I am trying to get started with Twitter Bootstrap, but for some reason, anything I do, results in a div spanning the entire page. As such, I cannot get the grid system / navigation bar to look right as every div appears to have it's own line.
I am sure that this is a simple fix but I am completely baffled.
http://jsfiddle.net/Aq5xn/show/
<!DOCTYPE html>
<html lang="en">
<head>
<title>
#section('title')
Page Title
#show
</title>
{{-- Ensures proper rendering & touch zooming --}}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{-- HTML::style('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css') --}}
{{ HTML::style('/css/bootstrap.css') }}
{{ HTML::style('/css/style.css') }}
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="#">asdf</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<p class="navbar-text pull-right">Logged in as username</p>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">{{-- #yield('content') --}}</div>
<div class="span4">Span 4</div>
<div class="span4">Span 4</div>
</div>
</div>
{{-- Scripts are placed here --}}
{{ HTML::script('//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js') }}
{{ HTML::script('//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js') }}
</body>
</html>
You are confusing Bootstrap 2.3.2 with Bootstrap 3.0.0. you can find the differences outlined in the CHANGELOG concerning the migration details. Glancing at your code, i see that navbar-inner class has been removed, container-fluid has been replaced by container, same for row-fluid and so on.
Basically, you're using Bootstrap 2.3.2 code with the new Bootstrap 3.0.0 engine... without migration. Follow the instructions outlined in the above link to know what you need to change and how.
PS: As of version 3.1 you can still use .container-fluid, you just need to use .row classes as with standard containers. Probably this was still the case even with version 3.0, I may have misunderstood the documentation.
Please do note that you are using Bootstrap 3.0.0.
span class is no longer in use. Changed to .col-md-* , read the details at the link below.
http://getbootstrap.com/css/#grid-options
if you still wish to use span class. Please revert it back to Bootstrap 2.3.2.
try this in bootstrap 3 http://getbootstrap.com:
<nav class="navbar navbar-inverse shadow main-menu" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">asdf</a>
</div>
<div style="height: auto;" class="navbar-collapse navbar-ex1-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
Related
I am following the example to use the Navbar from http://getbootstrap.com/components/#navbar-default, however, I am having problem to make it display horizontally like in the example. The code below is the same from the page. What am I missing to make it to display horizontally?
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body id="bs-example-navbar-collapse-1">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</body>
</html>
Try using ul class="nav nav-pills navbar-right".
I am not 100% sure that "my" problem was exactly the same as the original posters, but it looks very similar and the same solution could apply.
In my case, the problem manifested when the navbar was used within an Angular application with the "developer tools" on the side. This was reducing the width of the page made available to bootstrap, below a certain threshold (see below), which in turn made the navbar items to show on a column instead of a row.
The outermost navbar definition, as of the documentation sample, looked like this:
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
...
</div>
</nav>
After I checked the various element classes / styles in the browser, as well as the Bootstrap documentation, it seems that the following constraints apply:
The layout of the li elements is not directly controlled by the parent ul, but by the main nav element.
This one may bear a flex-direction: row style, and in this case the navbar items are shown horizontally, exactly as in the documentation samples. However, this style is conditioned by a minimum page width.
If the page is not wide enough, this style is not applied, the navbar is shown as collapsed and the "Toggle collapse" button is shown.
When expanding the navbar via the "Toggle collapse" button, the navbar items are always shown vertically, no matter how wide the page is.
Now the anomaly seems to be related to Bootstrap mistakenly deciding that the navbar items won't fit within a given page width, while common sense says they will. (In my case, it switched to collapsed navbar when the items would only need 40% of the available page width).
As stated by the documentation page, this is controlled (in the snippet above) via the navbar-expand-lg class, and more specifically the "lg" suffix. This explicitly refers to a specific display width. Changing this suffix (towards lower widths) triggers the presentation switch - from expanded to collapsed - in a way more appropriate for the actual navbar content. Concretely, in my case changing to navbar-expand-sm made the navbar behave as expected as the page gets wider or narrower.
At first view, this solution could affect the page portability across devices. However, I don't think this is the case because it is not about specifying an expected page with, but a minimum page width to accommodate the navbar - which does not depend on the device.
From the way I had read your question, I get that you are trying to get it vertically instead of horizontally. It's at least an assumption from your code example that is already horizontal. :)
A nav list with the class flex-column should to the trick for the list itself. Found this over at the Bootstrap documentation itself under there available styles. An example of this list itself could look something like this:
<ul class="nav flex-column nav-link">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<form class="my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</ul>
Most of the things bootstrap has for a navbar seem to work with this. This is at least with the things I have used until now.
I would like to use a bootstrap navbar fixed at the top of my page. I then would like to have a div bellow that that covers the rest of the page. I have the width solved by applying the class container-fluid. However i have adjusted the containers height to 93.5% and set the html overflow to hidden. This works fine with a full screen window. However this solution does not appear o be responsive and fails with window size adjustments. I would like the height of the div container to automatically fill the rest of the page. Code is bellow:
CSS
html {
height:100%;
overflow:hidden;
}
body {
height:100%;
}
#map-container{
height:93.5%;
border-color: black;
border-style:solid;
border-width:2px;
margin:5px;
}
.navbar{
margin-left:5px;
margin-right: 5px;
margin-top:5px;
margin-bottom:0px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>quickMap</title>
<!-- Bootstrap Core CSS -->
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="~/Content/quickMap.css" rel="stylesheet" >
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid" id="map-container">
<div>
</div>
</div>
<!-- jQuery -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
I think overflow: hidden is messing you up. I changed it to auto and it worked well enough for me.
html {
height:100%;
overflow:auto;
}
Not sure that 93.5% is the exact right number for the height, as, at least on my browser, the div ends up being slightly too tall for the window, but this can be fixed by adjusting the height slightly shorter. Something more like 91%.
I am using bootstrap framwork and trying to change few properties with navbar, like background color,
When I uses css from a local copy like, ./bootstrap.css override works fine or when I pasting whole css or just navbar css to liveweave CSS column override working.
But
when I am using maxcdn server like
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
Override is failing whether its liveweave or my pc, even after using !important override fails.
I am using
navbar navbar-default navbar-fixed-top
classes
I am sure about what I said above, even before posting this question I visited at least 10 pages or similar question to find solution but none them used CSS from maxcdn server.
Working Example
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
<script src="./google.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
main.css
.navbar-default{
background-color:red;
}
If you use a local css file for override. you must be sure this file is read after the maxcdn...... file. the last one is the css element used
Having the same issue... I noticed that, when viewing the maxcdn bootstrap.min.css in my text editor, the code stops running at ".glyphicon-phone:before{content:"\e145"}.glyphicon..." so I wonder if that is relating to the issue. Hoping that it gets sorted out soon!
I just incorporated Google Custom Search into my Bootstrap powered NavBar. Some weird formatting occurred which I fixed by adding the below CSS code.
This fixed many of the issues but there is still one left: the search box forces a line skip within my NavBar.
Below is my HTML and CSS code.
HTML code (basically the bootstrap template replacing their search form with Google's):
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<!-- Google search -->
<!-- <gcse:search></gcse:search> -->
<div style="width: 20%;">
<gcse:search></gcse:search>
</div>
<!-- Bootstrap search -->
<!-- <form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Android Term">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form> -->
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS code
/* AM22 - To make google search box appear correct */
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus, .gsc-search-button
{
box-sizing: content-box;
line-height: normal;
}
/* AM22 - To make google search results tabs appear correct */
.gsc-tabsArea div
{
/*By default, Google custom search CSS sets it as AUTO, which shows scroll bars*/
overflow: visible;
}
.nowrap {
white-space: nowrap;
}
I tried a few variations of the nowrap attribute, the nobr tag and white-space: nowrap; but none of these worked. Any suggestions?
For my website (link in my comment above) I placed the search box in the <div class="navbar-header">
I believe I also had to manually set the width so it wasn't full-page width.
Now about styling my version...
I am trying to customize bootstrap default fixed top nav to make it like one in images below. I am using latest twitter bootstrap 3.1.1. If you know please help me. You can even help me with any repository for it. The one in image is from i purchased which is using bootstrap 2x but i want to update it to 3x and use it in another template.
<div class="topHeaderSection">
<div class="header">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="assets/custom/img/logo.png" alt="My web solution" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
<li>About us</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
You need to take your dropdown button out of the div with the collapse class, and put it into the navbar-header div. Then create an additional navbar-header for the application title.
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Title - manually pull it left-->
<div class="navbar-header pull-left">
#Html.ActionLink("Application name", "Index", "Home", null, new { #class = "navbar-brand" })
</div>
<!-- Buttons that won't collapse - and manually pull right-->
<div class="navbar-header pull-right">
<!-- Your drop down button that is not part of the collapse group -->
<ul class="nav pull-left">
<li class="dropdown pull-right">
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
<!-- The normal bootstrap button to show collapsed menu items -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Regular collapsed items -->
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav pull-right">
<li>About us</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
Check out this answer to a similar question: https://stackoverflow.com/a/22978968/1721571.
Included in this answer is a link to a fiddle which should help you. I tried it out and it worked well without any changes.
Here's the link if you want to jump straight in. Fiddle: http://jsfiddle.net/nomis/n9KtL/1/
UPDATE
Your additional requirements may require some JavaScript. From my understanding you want the navbar to be static until the user scrolls down to the point where the navbar reaches the top of the window. Then you want it to be fixed.
Add your Contact div above the first navbar element. I have made it a navbar-default so the difference is more clear. You don't have to use the bootstrap nav or container classes. You can create your own and get the style to your liking:
<div class="navbar navbar-default navbar-static-top" style="margin-bottom:0px" role="navigation">
<div class="container">
<div class="text-info">Small div with contact information</div>
</div>
</div>
Now change the original navbar to static to start off with. We will also give it a menu class so we can select it with jQuery:
<div class="navbar navbar-inverse navbar-static-top menu" role="navigation">
For the JavaScript:
$(document).ready(function () {
var menu = $('.menu');
var origOffsetY = menu.offset().top;
function scroll() {
if ($(window).scrollTop() >= origOffsetY) {
$('.menu').addClass('navbar-fixed-top');
$('.body-content').addClass('menu-padding');
} else {
$('.menu').removeClass('navbar-fixed-top');
$('.body-content').removeClass('menu-padding');
}
}
document.onscroll = scroll;
});
Notice how I have added a class to the body-content, this stops the content disappearing behind the navbar-fixed when it changes class.
.menu-padding {
padding-top: 80px;
}
Here is the complete fiddle: http://jsfiddle.net/seanobr/wsNYQ/