I am working on Bootstrap navbar and after resizing as the hamburger menu shows the logo shifts its position and even overflows the navbar. How can I make the logo responsive so that it changes its size or position as the navbar is resized in the window?
<!-- Navigation Bar -->
<div class="navbar navbar-default" id="navbar-outer">
<div class="container-fluid" style="margin:0px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class=" glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
<a class="navbar-brand" href="#">
<img src="../images/LOL_LOGO_NEW-01.png" />
</a>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar navbar-nav" id="navbar-menu">
<li><a href="#" >WHAT WE DO</a></li>
<li>WHO WE ARE</li>
<li>OUR WORK</li>
<li>VENTURES</li>
<li>BLOG</li>
<li>CONNECT</li>
</ul>
</div>
</div>
Also, along with the answer if you could provide me with the reason as to why it happened then it'll be appreciated as I am still in the learning phase.
Thanks. :)
without resizing it looks normal
look how it overflows on resize
I added some background color so you can easily see the block for each container. The logo will be red, the navbar-header will be yellow, and the navbar-collapse will be green.
navbar-brand has a float: left so it will float to the left of the block, if you have it after navbar-header(which has display:block so it will take the whole width of the screen) block it will just floating left below, you can move it inside navbar-header or move it up outside of container-fluid.
.navbar-brand {
background: red;
float: right;
display: block;
}
.navbar-header {
background: yellow;
}
.navbar-collapse {
background: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Navigation Bar -->
<div class="navbar navbar-default" id="navbar-outer">
<div class="container-fluid" style="margin:0px;">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="../images/LOL_LOGO_NEW-01.png" />
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class=" glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar navbar-nav" id="navbar-menu">
<li>WHAT WE DO</li>
<li>WHO WE ARE</li>
<li>OUR WORK</li>
<li>VENTURES</li>
<li>BLOG</li>
<li>CONNECT</li>
</ul>
</div>
</div>
Related
I can't seem to create a fixed Navigation bar on scroll. I've looked at some of the answers posted on here however I can't get it to work for my solution. THe problem I'm facing is that the nav bar does not scroll after the header. It stays in a fixed position below the header and does not move despite scrolling down. Any ideas?
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar").addClass("top-nav-collapse");
} else {
$(".navbar").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
position: relative
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
background-color: azure
}
.top-nav-collapse {
padding: 0;
}
}
<body id="home" data-spy="scroll" data-target=".navbar-default">
<!-- Header -->
<header id="top" class="header-Home">
<div class="text-vertical-center">
<!--<img src="img/logocrop2.svg" class="CenterScreen" style="display:inline"> -->
<div class="row">
<div class="col-sm-4 col-sm-push-4">
<h4>About</h4>
<h4>Services</h4>
<h4>Contact</h4>
</div>
</div>
</div>
</header>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<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 page-scroll" href="#home">A&Co</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#home"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Scrolling Nav</h1>
<p><strong>Usage Instructions:</strong> Make sure to include the <code>scrolling-nav.js</code>, <code>jquery.easing.min.js</code>, and <code>scrolling-nav.css</code> files. To make a link smooth scroll to another section on the page, give the link the <code>.page-scroll</code> class and set the link target to a corresponding ID on the page.</p>
<a class="btn btn-default page-scroll" href="#contact">Click Me to Scroll Down!</a>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>About Section</h1>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Services Section</h1>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact Section</h1>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</body>
</html>
Screenshot 1
Screenshot 2
To keep the navigation bar in the same place as you scroll it's
position: fixed;
In the CSS for the nav that worked for me, but that not might be what you are after...
$(window).scroll(function(){
if($("body").scrollTop() > 100 || $("html").scrollTop() > 100) {
$(".navbar").addClass(".stop");
} else {
$(".navbar").removeClass(".stop");
}
});
enter code here
// css
.stop{
top: 0;
left: 0;
width: 100%;
padding: 0;
}
// html markup
<!-- Begin Navbar -->
<div class="navbar navbar-default ">
<div class="container">
<div class="navbar-header">
<div class="logo">
<a class="navbar-brand" href="index.html">
<img src="images/Restaurant-logo.png" class="img-responsive" alt="Restaurant logo">
</a>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"><span class="inner"></span></span>
<span class="icon-bar"><span class="inner"></span></span>
<span class="icon-bar"><span class="inner"></span></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left ">
<li>Home</li>
<li>Menu</li>
<li>About</li>
<li class="dropdown">
<button class="btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown" aria-expanded="false">
Reservation
</button>
<ul class="dropdown-menu dropdownhover-bottom" role="menu" aria-labelledby="dropdownMenu1">
<li>Reservation Table</li>
<li>Reservation Event</li>
</ul>
</li>
</ul>
<div class="logo">
<a href="index.html">
<img src="images/Restaurant-logo.png" class="img-responsive" alt="Restaurant logo">
</a>
</div>
<ul class="nav navbar-nav navbar-right ">
<li>Blog</li>
<li>Contact</li>
<li>Order No : (123) 234-8765</li>
</ul>
</div><!-- /collapse -->
</div><!-- /container -->
</div><!--/Navbar -->`enter code here`
I am having a css issue as the width of the screen gets smaller will someone please tell me how to adjust my menu bar. I am using the google translate in my menu bar but the problem I am having is when the screen is full size and as you start moving the screen in to make it smaller the google translate starts to drop down to another level making all other dropdowns on the menu bar not work properly because google translate interferes.
Is there a way to make google translate button stay inline or on the menu bar without dropping to another row?
Or even making the width of the google translate not as wide to see if it will stay on the same line?
Any help would be greatly appreciated!
http://jsfiddle.net/bobrierton/5c1vbo2s/11/
.goog-te-gadget .goog-te-combo {
margin: 0px 0px;
}
.goog-logo-link {
display:none !important;
}
.goog-te-gadget{
color: transparent !important;
font-size:0px;
}
.goog-te-combo {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
color: #687074;
text-transform: uppercase;
cursor:pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!--=== Header v4 ===-->
<div class="header-v4">
<!-- Navbar -->
<div class="navbar navbar-default mega-menu" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="row">
<div class="col-md-7">
<a class="navbar-brand" href="index.html">
<img id="logo-header" src="assets/img/logo-header.png" alt="Logo">
<img id="logo-header" src="assets/img/logo-text.png" alt="Logo text">
</a>
</div>
<div class="col-md-5 header-right">
<div class="social margin-bottom-10">
<ul class="header-links list-inline">
<li>Apple Store</li>
<li>Google Play</li>
</ul>
<ul class="social-icons social-icons-color">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<button class="btn-u btn-u-lg" type="button"><i class="fa fa-cc-mastercard"></i> Pay Online</button>
<button class="btn-u btn-u-red btn-u-lg" type="button"><i class="fa fa-calendar"></i> Make An Appointment</button>
</div>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="full-width-menu">Menu Bar</span>
<span class="icon-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
</button>
</div>
</div>
<div class="clearfix"></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<div class="container">
<ul class="nav navbar-nav">
<!-- Home -->
<li class="active">
<a href="index.html" class="" data-toggle="">
Home
</a>
</li>
<!-- End Home -->
<!-- Driver License -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Driver License
</a>
<ul class="dropdown-menu">
<li class="">General Information</li>
<li>Online Services</li>
<li>Fees</li>
<li>Forms</li>
</ul>
</li>
<!-- End Pages -->
<!-- Motor Vehicles -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Motor Vehicle
</a>
<ul class="dropdown-menu">
<li class="">General Information</li>
<li>Online Services</li>
<li>Sales Tax</li>
<li>Fees</li>
<li>Forms</li>
<li>Title By Mail</li>
</ul>
</li>
<!-- End -->
<!-- Features -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Property Tax
</a>
<ul class="dropdown-menu">
<li class="">General Information</li>
<li>Lookup/Pay Online</li>
<li>Tax Certificates</li>
<li>Discount Periods</li>
<li>Instalment Options</li>
<li>Forms</li>
</ul>
</li>
<!-- End Features -->
<!-- TDT -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Tourist Tax
</a>
<ul class="dropdown-menu">
<li class="">General Information</li>
<li>Pay Online</li>
<li>Online Account Management</li>
<li>Collection Reports</li>
</ul>
</li>
<!-- Ens -->
<!-- Additional Services -->
<li class="dropdown">
<a href="full-width-page.html" class="dropdown-toggle" data-toggle="dropdown">
Additional Services
</a>
<ul class="dropdown-menu">
<li class="">Parking Permits</li>
<li>Hunting & Fishing</li>
</ul>
</li>
<!-- End -->
<!-- Contacts -->
<li class="">
<a href="contact.html" class="">
Contact Us
</a>
</li>
<!-- End Contacts -->
</ul>
<!-- Nav Bar Right Block -->
<ul class="nav navbar-nav navbar-border-bottom navbar-right">
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</ul>
<!-- End Nav Bar Right Block -->
</div><!--/end container-->
</div><!--/navbar-collapse-->
</div>
<!-- End Navbar -->
</div>
<!--=== End Header v4 ===-->
You can use white-space: nowrap BUT you will need to make sure that it fits in the different break points because, as you requested, it will no longer wrap to fit.
.header-links {
white-space: nowrap;
}
After adding this, simply use your media queries to make adjustments through your different breakpoints to get the look/style you desire. An example of using a media query that makes style adjustments UNDER 860px screen width would be:
#media only screen and (max-width: 859px) {
.header-links li {
padding-right: 2px;
padding-left: 2px;
}
.header-links a {
font-size: 13px;
}
}
I am brand new to Bootstrap 3 and am trying to achieve a header that looks like the following:
As you can see there are several components here:
Logo; left-aligned
Menu items to the right of the logo
Message of the day (MOTD) in the top-right
"Hi, username!", right-aligned
"Envelope" Glyphicon to the left of the Username
"Heart" Glyphicon to the left of the Envelope Glyphicon (in the picture above it is a star but it should be a heart)
Here is my jsFiddle representing my best attempt, and here is the main <body> element of that fiddle:
<!DOCTYPE html>
<html>
<head>
<!-- Stuff goes here -->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Menu 1 | Menu 2 | Menu 3</li>
<li class="active">This is the message of the day up here!</li>
<li class="active"><span class="glyphicon glyphicon-heart"></span></li>
<li class="active"><span class="glyphicon glyphicon-envelope"></span></li>
<li class="active">Hi, smeeb!</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
When I run this in jsFiddle, nothing is laid out properly and I can't even see most of the <li> elements. Any idea as to where I'm going awry?
Put the class "in" after the class "navbar-collapse" in the div with the id property "navbar".
With the class "in", your navbar will begin visible.
<!DOCTYPE html>
<html>
<head>
<!-- Stuff goes here -->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<div id="navbar" class="collapse navbar-collapse in">
<ul class="nav navbar-nav">
<li class="active">Menu 1 | Menu 2 | Menu 3</li>
<li class="active">This is the message of the day up here!</li>
<li class="active"><span class="glyphicon glyphicon-heart"></span></li>
<li class="active"><span class="glyphicon glyphicon-envelope"></span></li>
<li class="active">Hi, smeeb!</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
You can use this markup and style it according to your css. Make menus to left and others name and icons to right menu. then seperate the top message and position absolute it to the parent nav bar relative.
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Menu 1 </li>
<li class="active">Menu 2</li>
<li class="active">Menu </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="glyphicon glyphicon-heart"></span></li>
<li class="active"><span class="glyphicon glyphicon-envelope"></span></li>
<li class="active">Hi, smeeb!</li>
</ul>
</div>
<div>This is the message of the day up here!</div>
Ok, I run the risk of getting down voted here, but from a design perspective you could run into issues with the "quote of the day" in the navbar, especially when on smaller devices as things "scoot in".
Might I suggest having a top bar right above the nav?
<div class="top-bar-wrap">
<div class="container">
<div class="top-bar">
<div class="pull-right"> <!-- This will keep your quote to the right. Just change it to pull-left if if you want it to start from the left. -->
<p>Quote of the day</p>
</div>
</div>
</div>
</div>
Then you will be freed up to have your nav and icons next to the links. Just make sure to add "navbar-right" to your navbar holding your li items. You can add these gliphs in as li items if you'd like, or you can add them following the li with a -- display:inline -- property in your CSS and that should work. ALTHOUGH, might I suggest one more thing?
As a designer first that came to the dark side of development... the icons and code to display the username might also be best served in a bar just below your nav. You can duplicate the code for the "top-bar" section and place it just under your nav.
/* For the topbar above the nav */
.top-bar-wrap {
padding: 6px 0;
background-color: #333; }
.top-bar {
min-height: 20px;
line-height: 20px; }
/* For the bar just below the nav "Member-bar" */
.member-bar-wrap {
padding: 6px 0;
background-color: #333; }
.member-bar {
min-height: 20px;
line-height: 20px; }
<div class="member-bar-wrap">
<div class="container">
<div class="member-bar">
<div class="pull-right">
<!-- Gliphs and code for your member name display -->
</div>
</div>
</div>
</div>
That will keep everything nice and tidy... and you won't run into issues for smaller screens.
I have a webpage which has a bootstrap navbar and a google map. navbar is fixed on top and the google map is placed so that to fill the rest of the screen
<div class="container-fluid">
<header class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="brand" href="#">{{ HTML::image('images/logo.png', array('class'=>'logo')) }}</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Reports <b class="caret"></b>
<ul class="dropdown-menu">
<li>Report 1</li>
<li>Report 2</li>
<li>Report 3</li>
<li>Report 4</li>
</ul>
</li>
<li class="dropdown">
User <b class="caret"></b>
<ul class="dropdown-menu">
<li>Settings</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="main">
<div id="mapcanvas"></div>
</div>
</div>`
There is no problem with the loading of google maps and the navbar. But when the nav bar is collapsed and I am clicking the toggle button the menu is not getting displayed.
CSS:
html,body {width:100%;height:100%;margin:0;padding:0;}
#mapcanvas {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:50px;
}
Bootply : bootply.com/3ejKtiSHkw
i don't know exactly whats the problem, but ive found out theat it seems to be sth. with the css.
adding the navbar-fixed-top-class to your navbar makes the dropdown work. I don't know if thats you required behavior though.
so, to break it down:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
makes the dropdowns work in the collapsed navbar.
I'm trying to create a navigation bar similar to Bootstrap. If you go to their site and re-size your browser. if you re-size it narrow enough, the top navigation bar will become a button. when you click on the button, it pushes everything down and displays the full navigation again.
That's what I'm trying to accomplish with this jsfiddle, but it has the following issues:
initially, the button is not hidden, it should be hidden and only be visible when the screen gets too narrow.
(fixed) the button doesn't display background like bootstrap does
(fixed) re-size browser to make navigation disappear and click on the button. then click on sub menu, the sub menu items does not display well.
issue 1 screen prints:
nav bar should not be visible yet because browser width is larger than 940px
nav bar appears, it's fine because browser width is less than 940px
full html code:
<html lang="en">
<head>
<title></title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
});
</script>
</head>
<body>
<div class="conatiner-fluid">
<div class="row-fluid">
<div class="span10">
<a class="btn btn-navbar" data-toggle="collapse"
data-target=".nav-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav nav-tabs">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"
href="#">Help<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Keep</li>
<li>Screaming</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span10">
other content
</div>
</div>
</div>
</body>
</html>
Is this closer to what you are after?
http://jsfiddle.net/panchroma/R4BEY/
You have a span10 div in your example and I didn't know where you were heading with this so I added a span2 after it to complete the row.
The HTML is below. You had a typo on your opening container div, and you were missing the navbar and navbar-inner divs. I think that was it for the changes I made.
Good luck
<div class="container-fluid">
<div class="row-fluid">
<div class="span10">
<div class="navbar">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse ">
<ul class="nav nav-tabs">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Help<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Keep</li>
<li>Screaming</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div> <!-- end nav-collapse -->
</div><!-- end nav bar inner -->
</div> <!-- end nav bar -->
</div><!--end span10 -->
<div class="span2">span 2</div>
</div><!-- end row -->
<div class="row-fluid">
<div class="span10">
other content
</div>
<div class="span2">span 2</div>
</div>
</div>