Twitter bootstrap weird top and left margin - html

I am trying out twitter bootstrap and am new to CSS/HTML. Here's my simple HTML:
<!DOCTYPE html>
<html>
<head>
......
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Test App</a>
</div>
</div>
</div>
</body>
</html>
It renders and page that has a weird top and left margin:

If you would like the navbar to be full width and stuck to the top then add the navbar-fixed-top class to the navbar like so:
<div class="navbar navbar-inverse navbar-fixed-top">

check in firebug, either of your container - navbar, navbar-inner, container may have padding or margin.

With regards to the top margin try body {
padding-top: 0;
}

Related

How to have a normal bar by Bootstrap? (Not a Navigation)

I am trying to have a bar on the top of my site, its not a navigation bar. Various items will go on this bar. So I was thinking How can use Bootstrap for this purpose. There is a nav bar in Bootstrap but I used it already for the navigation of my bar. Can I also use it for different purposes?
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
</div>
</nav>
Use navbar-static-top instead of navbar-fixed-top for your Bootstrap's Navigation bar.
Add <div id="normal-bar">My normal bar</div> before your Bootstrap's Navigation bar and you can customize it any way you want.
Bootstrap's Starter template - DEMO
HTML
<div id="normal-bar">My normal bar</div>
<div class="navbar navbar-inverse navbar-static-top">
......
</div>
CSS
body {
padding-top: 0px; /* It was 50px before */
}
#normal-bar {
/* Your CSS - It's only for DEMO */
background-color:#f00;
text-align:center;
padding:10px 0px;
font-size:20px;
}
You don't need to use nav. For additional bars and sections use this code:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<p>Some text here or whatever you want</p>
</div>
</div>
</div>
Your nav has position:fixed and min-height:50px properties, so don't forget to add to your next section margin-top:50px so it's visible.
Yes, you can use two navigation bars to achieve this behavior by using two separate navbars with navbar-fixed-top and navbar-static-top. See this example on bootply.

Bootstrap fixed header width

I am new to Bootstrap and can't find any answer to my question.
I am using the AdminLTE bootstrap theme for testing. I want to create a nice website theme with it and I want a fixed width. The fixed width is working but not for the header bar.
I want the header bar and menu to always be fixed.
Because I add the "fixed" class to te body my site is fixed width.
Only the header isn't fixed width. It is only fixed to the screen.
Can someone help me out?
You need to wrap the interior of the header with a <div class="container"></div>
<header class="header">
<div class="container">
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<a href="index.html" class="logo">
<!-- Add the class icon to your logo image or logo icon to add the margining -->
Testing
</a>
</nav>
</div>
You need to remove the margin-left and position fixed from the navbar css as well.

Absolute positioning of navbar in Twitter bootstrap 3

The fixed navbar in bootstrap is not absolute in position. When using fixed navbars the markup below the navbars appears right on the header navbar. How to overcome this:
I tried position:absolute and also a margin from top equal to size of navbar header height. Nothing is working. Any suggestions?
Bootstrap provides option to be fixed at the top
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
...
</div>
</nav>
reference: http://getbootstrap.com/components/#navbar-fixed-top
OR
You can use absolute to be fixed at the top and add same height navbar as body padding-top
for example
.navbar{
height: 50px;
}
body{
padding-top: 50px;
}
In bootstrap 4, use fixed-top instead of navbar-fixed-top:
<nav class="navbar fixed-top navbar-light bg-faded">
<a class="navbar-brand" href="#">Fixed top</a>
</nav>

Bootstrap mobile navbar cuts off

I'm building a site with Bootstrap. For some reason, the mobile navbar cuts off "Menu" as you can see here:
I'm just using normal Bootstrap responsive code for the navbar:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">Menu</a>
<div class="nav-collapse collapse">
Trouble is, if I add any sort of padding, it adds too much padding to the non-mobile navbar and makes it look weird. Has this happened to anyone else?
In your theme.css file you have:
.navbar-inner {
border-radius: 0;
margin: -20px 0; <-- *
}
* This is putting your inner navbar off the top of the page. Either remove it or change it to -10px;

Text not aligning properly with bootstrap's navbar-text pull-right

I have following code in the html file:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
Hello Bootstrap
<p class="navbar-text pull-right">This is first notice.</p><br/>
<p class="navbar-text pull-right">This is second notice. </p>
</div>
</div>
</div>
I am getting the output like this:
Notice that "This is second notice" is not aligned properly with respect to the line above it. I am trying to get the two notices aligned properly with each other.
I also tried removing <br/> from code above but with that I get the following output:
Could someone please point me what I am doing wrong?
JSFiddle: http://jsfiddle.net/N6vGZ/23/
The reason both paragraphs are not aligning properly in the navbar is because the default line-height of 40px set forth by the bootstraps doesn't allow them both to stack correctly. You can fix that by setting a lower line-height, something like 20px should do the trick.
Note: i included both paragraphs inside a container that i can easily float and target with my own class, as not to bother the other elements around it.
HTML
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
Hello Bootstrap
<div class="notices pull-right">
<p class="navbar-text">This is first notice.</p>
<p class="navbar-text">This is second notice.</p>
</div>
</div>
</div>
</div>
Try this:
CSS
.notices p {
line-height:20px !important;
}
Demo: http://jsfiddle.net/N6vGZ/29/
You didn't include the css but I assume that you have "float: right" on your "pull-right" class.
I think the easiest way to solve it is to wrap the two p's in their own div and float that dive right:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
Hello Bootstrap
<div class="pull-right">
<p class="navbar-text">This is first notice.</p>
<p class="navbar-text">This is second notice. </p>
</div>
</div>
</div>
Don't forget to set a width on the "pull-right" class in your css if you haven't already.
You can use ul with nav class and li with pull-right
http://jsfiddle.net/N6vGZ/28/