Jump to content

Search the Community

Showing results for tags 'Bootstrap'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 47 results

  1. Hi i am new for the PHP, i had the experienced before to do a login system page but what i want it is HTML and PHP file to separate i dont want PHP with HTML together to 1 file , cause professional people will more likely to use 2 file rather than 1 file easy to maintain and edit how to use the external PHP file coding without re-design whole page cause normally what i tested before was link or turn to other new page and result will come out but the design was totally gone so have any ways and suggestion to do that ... in the end, im sorry i not well in english and my knowledge of PHP still quite new , thanks you so much
  2. HI there, first i apology my english not too well, hope you may understand what i mean ,Thanks Im try to using the Bootstrap one of the function is popover similar like tooltips, but i facing the problem For example : <div id="all"> <div id="a" class="circle_ball" data-user-id="2">●</div> <div id="b" class="circle_ball" data-user-id="1">●</div> </div> and my Jquery code is : $('#all').on('mouseenter','div',function(){ $(this).popover({ title: 'Jun Hoo', content: $(this).attr('data-user-id'), trigger:'hover', html:true }); }); but the result on the code will showing delay and at least need to hover the target more than 2 time ... any ways to figure out? thanks you so much i found ways to solve the delay speed, but will keep popover the content when mouse pointer hover the first popover body the ways is add one more code --- $('#all').popover({title: 'Loading', content: '...',selector: 'div',trigger:'hover',html:true}); Thanks for helping
  3. Hello I'm having a of a time getting my image element aligned in the top right corner of my web application and everything I try fails. at the top (head) of the page I'm using a navbar and below that I have an input group. I'm trying to float right an image (which is my school logo) but no matter what I do. I cant get it to sit nica and square where i want it. I provided a screen shoot of the problems I'm having and included is a code snippet. Can somebody please tell me WTH I'm doing wrong here? First part of code is NavBar and the second is input group. How would I set the logo by itself above the blue side panel where its supposed to be? <nav class="navbar navbar-progress"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Existential Graph Editor</a> </div> <ul class="nav navbar-nav"> <!--li class="active"><a href="#">Home</a></li--> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">File <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Edit <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Help <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li><a href="#">About</a></li> </ul> <!--ul class="nav navbar-nav navbar-right"> <!--li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li--> <!--img src="../images/uahLogo.png" class="img-rounded" --> <!--/ul--> </div> </nav> <form> <!--label class="label label-primary" for="drawType">Enter Expression (e, c, p, q):</label--> <div class="input-group"> <input id="drawType" type="text" class="form-control" placeholder="Enter Expression" aria-describedby="basic-addon2"> <span class="input-group-addon" id="drawC" onclick="return OnClickDraw();">Submit</span> <span class="input-group-addon" id="clear" onclick="return clearArea();">Clear</span> <span class="input-group-addon" id="save">Save</span> <span class="uahImg"><img src="../images/uahLogo.png" height="100"> </span> </div> </form>
  4. Hi, i am in need of urgent help. I have created a web template using bootstrap. I have created a "collapseble" nav bar and used "parallax, jquery single page nav" to scroll on the same page smoothly.This worked fine. There is no problem in it. After that according to the requirement i have used "affix" to have a div on top of the menu bar. suddenly my nav bar when collapsed (i mean on mobile devices) not working properly. It is showing a strange behavior. When nav bar got collapsed for the first time when the page gets loaded if i click on the nav bar the menu bar is sliding down and when i click on the menu item of the menu where the page scrolls to that section, the slided down menu bar is automatically getting slided up without me pressing on the collapsed menu button. After the page slides to that particular section when i click on the collapsed menu it is not working at all. I am attaching my home page where the problem persists. Can somebody help me fix this issue. home.zip
  5. The w3schools tutorial on Bootstrap 3 is excellent. Thanks for producing it! It would be helpful if there were a forum section on Bootstrap 3 so that users could post questions, issues or problems and learn from one another.
  6. Greetings classmates! School is in session. It seems this is mostly a CSS question. So my apologies for any re-tread. I have seen numerous posts addressing similar, but can't seem to put it together. Any help or direction to existing solutions is greatly appreciated. I am Developing an ASP.NET/MVC5 web app. It uses bootstrap 3. I am new to bootstrap and never really got into CSS more than the basics. Question: How can I change/override the a:hover of a thumbnail to include a user-defined hoverscale? So in the thumbnail.less file I see: @thumbnailHoverScale : 1.3; . . . a:hover img.thumbnail { .selected(@thumbnailHoverScale); } HoverScale is not a style attribute it seems so I can't override in standard local definition HTML style="..."!?! I do understand I can define a <style/> in local HTML to override, but again fail to comprehend exactly how. Here is my HTML: <div id="thumbnailContainer"> <div class="thumbnail-loading-spinner"></div> <ul id="thumbnails" data-bind='template: {name:"thumbnailsTemplate", foreach: thumbnails}'></ul> <div class="admin"></div> </div> and the template: <script id='thumbnailsTemplate' type="text/x-jquery-tmpl"> <li> <a href="${Url}" data-vpath="${VPath}"> <img class="thumbnail" src="${UrlThumbnail}" /> </a> </li> </script> So basically in the template, I want to override hoverscale just for just the generated thumbs. I have tried a number of style="" property definitions, then realized HoverScale is not a property. I also tried a number of variations like: ...class="thumbnail {HoverScale:2}" I think I am close on this one, possibly, but not sure how I would apply it to just the generated thumbs?? <style> a.thumbnail:hover { .selected(3) } </style> with no joy. Anyone? Thanks! Cheers!
  7. Gerhard

    BS Navbar

    Hi, just walking through the tutorial of bootstrap. The NavBar is really cool, but how does it navigation. I don't have any idea how I can switch from one page (or content) to another whild clicking on the links in the nav bar. I the sample absolutely nothing happens here. Thanks for helping a newbee. With best regards Gerhard
  8. I have a php based website script which I want to make responsive. What are the ways to make it responsive? I am not a developer so need an easy way. I know a little bit of html and css. Download the template from https://www.dropbox.com/s/pfolvxhn9co2qd3/bluesky.zip?dl=0 to have an idea about the coding and website structure.
  9. I have a script developed in php. It is non-responsive. I want to convert it to a responsive website. Is there any free tool or software or step by step guide to do it? I know a little html and css, but not php. I was wondering if there is a place where I can import my existing template, apply bootstrap with one click and export. It is an open source script and can be downlaoded from phpb2b.com.
  10. j.silver


    Dear all: If I will learn js, jQuery, Ajax, and json, do I need to additionally learn bootstrap? What extra value would I get from bootstrab?
  11. Hi w3 Community i want to learn how to replicate this effect on the main screen of this website https://overv.io/ The traget(booklets) starts off somewhere fixed and translate/rotates towards 0 once it's reached it's original location, scrolling further down won't change any location scrolling back up with move the items back towards the location it stated. Here's something which i think it should look like.. window.onscroll = function() {var speed = 1; //this should be adapted to the height of divvar startdeg = 130; //var startx = 300;var starty =-300;var scroll = $(window).scrollTop(); //using scrolling as variablevar deg = (startdeg - scroll) / speed;var translatex = startx - scroll/ speed;var translatey = starty - scroll/ speed;//Here should be some conditioner or maybe a do-while loop to stop transforming once it reached it's original location?$(".logo").css({"transform": "translate("translatex+"px,"translatey+"px) rotate("+deg+"deg)",}); }; https://jsfiddle.net/aavelyn/ktccxr6j/1/ PS: I'm fairly basic with javascript,jquery though i can fully understand the code presented. Thanks a lot!!
  12. I am creating a script where people can create a tour like Bootstrap tour without editing their website code. The code will be generate on my website and they just have to add a link on their website for the tour to work.The problem i am having is when the person website have the same for example div.page-container.page-header-fixed > div.page-footer > div.page-footer-wrap.bg-dark-gray > div.page-footer-holder.page-footer-holder-main > div.row > div.col-md-3 > h3 it will place the **tour pop up** on all items with the same structures like above code is their a way of telling the script what structures to apply to code to like maybewhat line the code onwhere on the page the structures is like **above x below y right side of z on the left side of f**or by what is contains inside of the divso that it won't show the tour on the wrong item
  13. (sorry if I choose wrong place to post this. I got confused whether to post it on javascript or css) I am trying to learn bootstrap. but simply after including bootstrap.css, it overrides most of the styles I defined on the page. like buttons, tables, etc. can anyone guide me how to handle this?
  14. matt11

    bootstrap grid width

    i don't understand this.Desktop screen resolution: 1280x1024this code: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_large&stacked=hshould do a 4:8 split right? But on my monitor it's 3:9. It sees it like a small device.Also i don't understand the screen width in pixels bcz there are smartphones with QHD resoluton (2560x1440) so would they look at col-lg-* number then ?
  15. jybo71

    Bootstrap menu

    Hello I am using bootstrap as a beginner. I try to make a dropdown menu on several level but it don't work. My script : <body> <div class="container-fluid"> <ul class="nav nav-pills nav-stacked"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" >Menu 1<span class="caret"></span></a> <ul class="dropdown-menu"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" >Menu 1-1<span class="caret"></span></a> <ul class="dropdown-menu"> <li>menu1-1-1</li> <li>menu1-1-2</li> </ul> <li>menu 1-2</li> <li>menu 1-3</li> </ul> </li> </ul> </div> </body> Is it possible to do that with bootstrap ? or do I choose an other way .... Thanks
  16. The columns are showing full width in IE7 & 8 even though i have set to 'col-sm-4'. i have used bootstrap files n respond.min.js locally inorder to eliminate probs caused by CDN links.. <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="bootstrap.min.js"></script> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="respond.min.js"></script> <![endif]--> <title>Untitled Document</title><style type="text/css">.container-fluid { background-color:pink;}</style></head><body><div class="container-fluid"> <h1>Hello World!</h1> <div class="row"> <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div> <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> </div></div></body>
  17. <nav class="navbar navbar-default navbar-fixed-top col-xs-12"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> When i shrink window, navbar comes horizontally covering the whole browser width. How to get ride of this?
  18. I find this tutorials very useful and I think it will be really handy if you do Bootstrap tutorial. On site getbootstrap.com is nice documentation, but some things aren't explained so well.Who think this is good idea? Thanks.
  19. Hi W3Schoolers. I have downloaded Bootstrap 3.1 and after that, my glyphicons are not properly visible as below. They are shown 'x' square box instead of real images. I followed some advises from internet, and deleted Bootstrap, re-download it, also deleted glyphicon font files from library>fonts folder and re-installed it too. But it is still same. My laptop is Macbook air 2011, and OS is Mavericks 10.9.3 Please help me to find out solution. Thanks in advance. Jin
  20. Hi all, I'm using a simple example template from Bootstrap and wish to display a modal form when the page loads. I have the code below direct from bootstrap to load the modal form when a button is pressed, but i've tried a few other things to get the modal to appear on load, but none of which is working. I'm sure its something simple, but this is a learning curve for me, so any help appreciated. Code I've got from Bootstrap: <!-- Button to trigger modal --><a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> <!-- Modal --><div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div></div> I've tried using the following to get it to load on the form load: $('#myModal').modal('show') and $(document).ready(function(){ $('#myModal').modal('show')}; neither of which I can seem to get to work. Cheers Col
  21. Hi, i wanna ask how to make a dropdown menu using bootstrap ?Tell me how to make it step by step ( coz i'm a newbie in javascript hehe..)Thanks for any helps
  22. Hey there. I just recently started to use Bootstrap and was wondering why this dropdown is not working, I have exactly what they have on their example site. <!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script href="js/jquery.js" type="text/javascript" ></script><script href="js/jquery-ui.js" type="text/javascript" ></script> <script href="js/bootstrapjs" type="text/javascript" ></script><script href="js/bootstrap-dropdown.js" type="text/javascript" ></script><link href="css/bootstrap.css" rel="stylesheet" type="text/css" /><link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /><!-- <script href="js/document.js" type="text/javascript" ></script> --><script type="text/javascript"> $('.dropdown-toggle').dropdown(); </script></head> <body><div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"><ul class="nav pull-left"> <a class="brand" href="#">Project name</a></ul><div class="nav-collapse"><ul class="nav pull-right"> <li><a href="#">Blog</a></li> <li class="divider-vertical"></li><li><a href="#">Facebook</a></li> <li class="divider-vertical"></li><li><a href="#">Twitter</a></li> <li class="divider-vertical"></li><li><a href="#">Flickr</a></li> <li class="divider-vertical"></li><li><a href="#">YouTube</a></li><li class="divider-vertical"></li> <li class="dropdown"> <a href="#" class="dropdown-toggle">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Another link</a></li> </ul> </li> </ul> </div><!-- /.nav-collapse --> </div> </div></div> </body> </html>
  • Create New...