It's the first time I'm using twitter bootstrap.
I wanted to limit the size to 940 px, and for that I used the span12 class.
But it doesn't seems to be working. Whole content is spread wide across the page.
What do I do to fix it ?
Here's the code :-
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<ul class="nav">
<li class="active">Home</li>
<li>Find Your Mac</li>
<li>How it Works</li>
<li>About Us</li>
<li>Contact Us</li>
<li>FAQ</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
The navbar is fixed at the top of the page. Even though the span12 has a width:940px since the navbar is affixed to the top, it takes 100% width.
To fix this apply the width to .navbar-fixed-top as below
.navbar-fixed-top{
margin: 0 auto; //to align horizontally in center
width: 940px;
}
The easiest way will be to put a <div class="container">, a <div class="row">, and a a <div class="span12"> inside the fixed navbar. Since the navbar is position: fixed;, it's removed from the normal flow of the page. You'll need to define the containment inside the navbar. After that it hardly seems worth keeping it nested in the original ones, so may as well make them siblings. So, like this:
<div class="navbar navbar-fixed-top">
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar-inner">
<ul class="nav">
<li class="active">Home</li>
<li>Find Your Mac</li>
<li>How it Works</li>
<li>About Us</li>
<li>Contact Us</li>
<li>FAQ</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<!-- page content -->
</div>
</div>
</div>
You may need to adjust the specific nesting, but this should fix the immediate issue.
Related
I want my page to be in a class="container" but I want the header (the blue and grey column) also in the class but I want the blocks to give the background to the whole row. So the blue and grey color needs to be over the whole width. I was wondering if there is some way to get that?
The question:
Is there a way to get the grey and blue block to be the full width so the color is the full width but the text is just like it is now. The div has a class="container"
Try this,
<div class="header">
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Community</li>
<li>Groepen</li>
<li>Trainingen</li>
<li>Support</li>
<li>Profile</li>
<li>Inloggen</li>
</ul>
</div>
</nav>
</div>
<div class="subheader">
<div class="container">
<ul class="breadcrumb">
<li>Home</li>
</ul>
</div>
</div>
<div class="middle-section">
<div class="container">
</div>
</div>
Can somebody explain what is going on here?
I'm using bootstrap 3.3.7.
Why are .container elements invisible?
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#">Big Brother</a>
</div>
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>something</li>
</ul>
</div>
</div>
<div class="container">
<h2>Invisible</h2>
</div>
Your <h2> is not invisible, it's hiding behind your navbar.
You're using a navbar that uses fixed positioning. This takes it out of the normal document flow where it doesn't take up space so the elements after it begin to flow as if it wasn't there.
If you add padding-top: 50px; to <body> you will see your <h2>.
If you read through the Bootstrap Navbar Docs you'll notice a callout that says Body padding required.
I'm new to Web Development, and i've written the following code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="https://in.linkedin.com/in/debdebashis" target="_blank">Debashis Deb</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About Me
</li>
<li>Skills
</li>
<li>Interests
</li>
<li>Contact Me
</li>
<li>
<a> </a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid first">
<p>Welcome to my Page, Here you can find most of the informations related to me</p>
</div>
The problem that I'm facing is that, my last div is not getting displayed in the page. What mistake am I doing ?
On a fixed navbar you have to add a padding to the <body> of your site:
From the Bootstrap Documentation:
The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
Make sure to include this after the core Bootstrap CSS.
http://getbootstrap.com/components/#callout-navbar-fixed-top-padding
body {
padding-top: 70px;
}
See the following snippet (little changes to support the responsive navbar too): https://jsfiddle.net/17mmmxps/1/
I created a navbar with Twitter-Bootstrap but I'm having trouble with my navigation.
I want to create navigation where nav is on the left and my logo on the right. I created the .nav-head-middle div with vertical-align:middle; and display:inline-block; so that my navigation and logo are on the same line (i.e. the middle).
My navigation and logo are on the same line but my problem is that my logo isn't on the right.
HTML
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="nav-head-middle">
<ul class="nav navbar-nav nav-adelva">
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>PARTNERS</li>
<li>CLIENTS</li>
<li>NEWS</li>
<li>CAREER</li>
<li>CONTACT</li>
</ul>
</div>
<div class="nav-head-middle">
<div class="navbar-right">
<img src="image/logo.png" />
</div>
</div>
</div> <!--/container -->
</div> <!--/navbar -->
CSS
.nav-head-middle{
display:inline-block;
vertical-align:middle;
}
Your problem could reside in not specifying the first set of navigation tabs to float left.
In CSS you need to tell the parts on the left to "go left" and the parts on the right to "go right".
In your case, with using bootstrap, you should utilize the built in code as apposed to creating extra custom CSS. The build in classes that should help are "navbar-left" and "navbar-right".
Not sure if this HTML will work for you or if it will help clarify your troubles, but I would think the html code should look closer to this:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav nav-navtabs navbar-left">
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>PARTNERS</li>
<li>CLIENTS</li>
<li>NEWS</li>
<li>CAREER</li>
<li>CONTACT</li>
</ul>
<ul class="nav nav-tabs navbar-right">
<li><img src="image/logo.png" /></li>
</ul>
</div> <!--/container -->
</div> <!--/navbar -->
I am trying to insert an image above a navbar, but I it is not working for me. Here is my html:
<div class="wrapper" />
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">
<a class="brand" href="#">Home</a>
</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
and my css:
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 250px;
}
Anytime I add a div or any content, it is pushed to the top of the page. I can add padding, but when I start to resize the screen it breaks and leaves a gap in the image and the navbar. Any help would be great.
<div /> means <div> in HTML 5 and not <div></div> as it does in XHTML. Div's are not valid self closing tags.
Ref
Demo
<div class="wrapper"></div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">
<a class="brand" href="#">Home</a>
</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
The issue is /> at the end of .wrapper, because it is not allowed (depending on your doctype). Remove it and give it </div> like the other divs, I think it's going to work.