I can't seem to get this to work - my columns go full width.
Here's a JSfiddle for direct use
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-body">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li>
<a href="#p1" class="btn btn-primary" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-cloud"></span>
</a>
</li>
<li>
<a href="#p2" class="btn btn-primary" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-cloud"></span>
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!--Open Panel Controls-->
<div class="tab-pane active" id="p1">
<!-- HERE IS THE PROBLEM AREA - I want a grid here, but no luck :-/ -->
<div class="row">
<div class="column-md-4" style="background: green;">
This is my first column
</div> <!-- /col emulator-->
<div class="column-md-1">
These are buttons
</div>
</div> <!--/row-->
</div>
<div class="tab-pane" id="p2">
<div class="row">
<div class="column-md-4" style="background: red;">
This is my first column, page 2
</div> <!-- /col emulator-->
<div class="column-md-1">
These are buttons, page 2
</div>
</div> <!--/row-->
</div>
</div> <!-- /tab-content -->
</div> <!-- /panel-body -->
</div> <!-- /panel>
</div> <!-- /container-fluid -->
<script src="/scripts/bootstrap.min.js"></script>
Ouch, simple mistake. Here's the fix
<!-- It's col, not column -->
<div class="col-md-4" style="background: green;">
This is my first column
</div> <!-- /col emulator-->
<div class="col-md-1">
Related
I'm using bootstrap 4.3.1, ASP.NET MVC (.NET 5) and all the pages have gaps at the side which is fine but I want one div to ignore that and be 80% of the width and centered, whilst the remaining parts of the page stay the same.
No matter what the div wont change unless I put "width: 1000px;" and there's still the left margin, even though I specify "left: 50px !important".
I've tried a combination of setting the div as "container-fluid" and adding that into a "row". I've also tried adding style tags "style="width:80% !important; left:50px !important;padding:0px;margin:0px;"
Solution Zip File: Google Drive
<div class="row" style="width:80% !important; left:50px !important;padding:0px;margin:0px;" >
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#rLocal">Test 1</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rrEPRA">Test 2</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rSWA">Test 3</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rGI">Test 4</a></li>
</ul>
<div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade active" id="rLocal">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 1
</div>
<div class="card-body">
<p>
TODO
</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="rrEPRA">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 2
</div>
<div class="card-body">
<p>
TODO
</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="rSWA">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 3
</div>
<div class="card-body">
<p>
None
</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="rGI">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 4
</div>
<div class="card-body">
<p>
TODO
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
<body>
<div class="container">
<main role="main" class="pb-3">
<div class="container-fluid">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#rLocal">Test 1</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rrEPRA">Test 2</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rSWA">Test 3</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rGI">Test 4</a></li>
</ul>
<div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="rLocal">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 1
</div>
<div class="card-body">
<p>
TODO
</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="rrEPRA">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 2
</div>
<div class="card-body">
<p>
TODO
</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="rSWA">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 3
</div>
<div class="card-body">
<p>
None
</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="rGI">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 4
</div>
<div class="card-body">
<p>
TODO
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
You have a container-fluid inside of a container. Your parent container will take the appropriate width in the center of the screen, and then your container-fluid will take the 100% of that. So in the end you'll have a div with the same width of a container. All you need to do is remove the div enclosing the <main>, i.e., the <div class="container">.
It should look something like:
<main>
<div class="container-fluid">
// Navbar Code
</div>
</main>
This should span the navbar wide. However, you'll still have a 15px padding on both sides, you can remove it by adding a px-0 class on the container-fluid div.
Also, you have imported Jquery, Bootstrap-min and Bootstrap Bundle.
You do not the need the Bootstrap-min if you have the bundle. You should remove it to prevent any issues with JS related parts of Bootstrap.
I have a problem:
as you can see in the picture, the problem is, that the column doesnt take the full hight. On the left side is what i got and on the right is what i want. Maybe you guys can help me out. Here is the source code which leads to the image on the left. I have searched for a solution but unfortunatelly nothing fits my source code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="row m-auto">
<div class="col-md-12 p-0">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 bg-warning">
<!-- this is the left side -->
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}>
<input class="form-control mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style={{marginTop: "7.5px", marginBottom: "7.5px"}}>
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 bg-primary">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<!-- Should be in the middle and full screen (like the area where you and another person have a conversation-->
Message
</div>
</div>
<div class="row">
<!-- should be at the bottom of the Screen like in everyother Chat-->
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Text-Input and Button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This question is basically the same as this and this, but the overly complex, nested and incorrect Bootstrap grid structure you're using make it almost impossible to make the height work as expected.
If you simplify the markup as recommended in your other questions, the height issue is resolved using the flexbox grow and shrink utilities as explained in the Bootstrap docs...
"Use .flex-grow-* utilities to toggle a flex item’s ability to grow to
fill available space. "
Using vh-100, flex-grow-0, flex-grow-1, flex-column, etc...
<div class="container-fluid d-flex flex-column vh-100">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
...
</nav>
<div class="row flex-grow-1">
<div class="col-md-4 bg-warning">
<!-- this is the left side -->
</div>
<div class="col-md-8 bg-primary d-flex flex-column flex-grow-1">
<div class="row flex-column flex-fill">
<div class="col bg-success flex-grow-0">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
</div>
</div>
<div class="col bg-info flex-fill">
<!-- Should be in the middle and full screen (like the area where you and another person have a conversation--> Message </div>
<!-- should be at the bottom of the Screen like in everyother Chat-->
<div class="col bg-success flex-grow-0"> Text-Input and Button </div>
</div>
</div>
</div>
</div>
https://codeply.com/p/iP18GJ1ZdU
It can be done through display: flex. It is necessary to set height: 100% to take available height.
So I've edited some classes and add some classes.
The complete stackblitz example can be seen here
An example:
<div class="box">
<div class="row box m-0">
<div class="col-md-12 p-0 foo-flex">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid foo-flex-item">
<div class="row h-100">
<div class="col-md-4 bg-warning">
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style="height: 0%; width: 100%; paddingLeft: 0; paddingRight: 0; paddingTop: 8px;">
<input class="form-control mr-sm-1" style="width: 80%;" type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style="7.5px; marginBottom: 7.5px;">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 bg-primary">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<div class="row">
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Message
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Text-Input and Button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <script src=" index.js"></script> -->
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
I'm developing an app mainly in HTML5/CSS/JS and I'm using framework7. Following the tutorials and all the documentation available I can't make a side panel appear... What am I doing wrong?
<body>
<div class="panel-overlay">
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Menu de Opções</p>
<p>Fechar Menu</p>
</div>
</div>
</div>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only open-panel" data-panel="left">
<i class="icon icon-bars"></i>
</a>
</div>
<div class="center">Home</div>
<div class="right"> <a href="#" class="link icon-only">
<i class="icon icon-back"></i></a>
</div>
</div>
</div>
<div class="page-content">
<div class="content-block">
<p>Menu</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
I'm testing on Chrome, but nothing is happening... It is also not working on IE
I am facing a problem with bootstrap 3 and the nav-justified class. When I put the nav inside a div with class col-*, it does not work properly. When you try to minimize the screen, if the resolution is less than 1500px the <li> overflows the div. I was wondering why.
I would like to know if I am missing something. Here goes an exemple of code:
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading clickable">
XYZ
<span class="pull-right"><i class="fa fa-caret-up fa-lg"></i></span>
</div>
<div class="panel-body ">
<ul class="nav nav-pills nav-justified" role="tablist" id="myPill">
<li role="presentation" class="active">External I/O</li>
<li role="presentation">Version Information</li>
<li role="presentation">Config Information</li>
<li role="presentation">Channel A</li>
<li role="presentation">Statistics</li>
<li role="presentation">ADC</li>
<li role="presentation">Sampling Info</li>
<li role="presentation">Flags</li>
</ul>
<hr />
<div class="tab-content" id="advancedContent">
<div class="tab-pane active" id="externalio">
</div>
<div role="tabpanel" class="tab-pane" id="versionInformation">
</div>
<div role="tabpanel" class="tab-pane" id="configInformation">
</div>
<div role="tabpanel" class="tab-pane" id="channelA">
</div>
<div role="tabpanel" class="tab-pane" id="statistics">
</div>
<div role="tabpanel" class="tab-pane" id="adc">
</div>
<div role="tabpanel" class="tab-pane" id="samplingInfo">
</div>
<div role="tabpanel" class="tab-pane" id="flags">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Thank you.
I have a easy solution. Use this code below:
#media screen and (max-width:1500px){
.panel .nav>li>a{
padding:5px 0;
}
}
I am designing a fluid layout with twitter bootstrap but unfortunately there is some mistake in how i am approaching it.
Please advise where am i doing wrong. I have created a navbar div which contains navbar-inner and within that i have container. Within a container a row.
In a row i have 3 elements the project-name , the navigation bar and the login section.
On shrinking the page the project name stays in correct position, the navbar is hidden to show up only on click and the third the login section gets dislocated.
I can't understand why it is getting dis located.
I have uploaded the code on ---> http://jsfiddle.net/GgzgB/2/
but due to missing images the background is not shown.
PS: this is my first css attempt
<body>
<div class="navbar navbar-fixed-top">
<div id='cssmenu' class="navbar-inner">
<!--<div class="navbar-custom">-->
<div class="container">
<div class="row">
<div class="span2">
<!--<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>-->
<a class="brand" href="#">Project name</a>
</div><!--end of first col -span2-->
<div class="span7">
<div class="nav-collapse collapse">
<ul class="nav">
<li class='active '><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Company</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div><!--end of nav-collapse collapse-->
</div><!--end of second col - span5-->
<div class="span3">
<div class="login">
<form class="form-signin">
<div class="row">
<div class="span1">
<div class="row">
<input type="text" class="input-header-small pull-left" placeholder="Username">
</div>
<div class="row">
<input type="password" class="input-header-small pull-left" placeholder="Password">
</div>
</div>
<div class="span1">
<div class="row">
<button type="submit" class="btn btn-success btn-medium pull-right">Sign in</button></div>
</div>
</div><!--end of inner 1st row-->
</form>
</div><!--end of login-->
</div><!-- end of span3-->
</div><!-- end of row -->
</div><!-- end of container -->
</div><!-- end of inner -->
</div><!-- end of navbar navbar-fixed-top -->
</body>
First off, if you are trying to create a fluid layout, you'd use row-fluid as opposed to just row.
Additionally, you're putting the login form in the same row as the project-name and navbar.
I'm not going to perfect this for you, but this gets you much closer by using row-fluid, and creating a new row after the navigation:
<body>
<div class="navbar navbar-fixed-top">
<div id='cssmenu' class="navbar-inner">
<div class="container">
<div class="row-fluid">
<div class="span2">
<a class="brand" href="#">Project name</a>
</div>
<div class="span7">
<div class="nav-collapse collapse">
<ul class="nav">
<li class='active '><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Company</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div><!--end of nav-collapse collapse-->
</div><!--end of second col - span5-->
</div>
<div class="row-fluid">
<div class="span12">
<div class="login">
<form class="form-signin">
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<input type="text" class="input-header-small pull-left" placeholder="Username">
</div>
<div class="row-fluid">
<input type="password" class="input-header-small pull-left" placeholder="Password">
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<button type="submit" class="btn btn-success btn-medium pull-right">Sign in</button></div>
</div>
</div>
</div>
</form>
</div><!--end of login-->
</div><!-- end of span3-->
</div><!-- end of row -->
</div><!-- end of container -->
</div><!-- end of inner -->
</div><!-- end of navbar navbar-fixed-top -->
Often with CSS less is more, so I think you could start off with simplifying your code a bit by removing all the row/span definitions in the navbar, they aren't really necessary. Next, the Bootstrap documentation is quite good, so its always worth looking through them in detail to see if what you want has already been defined there.
From the documentation: "Align nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction." Also, we can use the "navbar-form" class to layout the login form, rather than the grid classes. So lets pare the code down a bit, and then you can perhaps get closer to what you are after.
<body>
<div class="navbar navbar-fixed-top">
<div id='cssmenu' class="navbar-inner">
<div class="container">
<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>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class='active '><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Company</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div><!--end of nav-collapse collapse-->
<div class="login pull-right">
<form class="form-signin navbar-form">
<input type="text" class="input-header-small pull-left" placeholder="Username">
<input type="password" class="input-header-small pull-left" placeholder="Password">
<button type="submit" class="btn btn-success btn-medium pull-right">Sign in</button></div>
</form>
</div><!--end of login-->
</div><!-- end of container -->
</div><!-- end of inner -->
</div><!-- end of navbar navbar-fixed-top -->
</body>
This may not be your final solution, but I think it would be a good starting point.