I've tried playing with putting the indents and placement in different places but it still appear underneath the navigation button. I want it on the same line across the top.
I might of made it a bit messy trying to get it on the same line, if so just take out whenever isn't necessary.
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap For Beginners</title>
<meta name="description" content="Hello World">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<style>
.nav {
}
.nav container-fluid {
}
.nav li {
display: inline;
padding: 20px;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}
.jumbotron {
}
.jumbotron container-fluid {
}
.jumbotron h1 {
.footer {
}
.footer container-fluid {
}
.footer p {
}
</style>
</head>
<body>
<div class="nav">
<div class="container-fluid">
<ul class="nav nav-pills">
<li class="pull-right">Contact</li>
<li class="pull-right">About</li>
</ul>
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-6">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Have Feedback?">
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-default">Submit Feedback</button>
</div>
</div>
</form>
</div>
</div>
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<h1>Student</h1>
<h1>Business</h1>
</div>
</div>
</div>
<div class="footer">
<div class="container-fluid">
<p>By:</p>
<p>For:</p>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
The input bar doesn't seem to be responsive on really really small windows, is that normal?
I also want the footer to be the same size as the nav header and the jumbotron to fill up the rest of the space in between, everything fits in the window with no scrolling.
Thanks in advance.
Your code looks great, all you have to do is wrap the form and nav in a wrapper / container then separate the sections with col-md-6. I built an example for you here http://www.bootply.com/P7VmPZOfXp.
/* CSS used here will be applied after bootstrap.css */
.footer {
height: 58px;
background: #ccc;
}
<div class="wrapper">
<div class="container">
<div class="row">
<div class="container-fluid">
<div class="col-md-6 col-lg-6">
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-6">
<input class="form-control" id="exampleInputEmail2" placeholder="Have Feedback?" type="email">
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-default">Submit Feedback</button>
</div>
</div>
</form><!-- .form-horizontal -->
</div><!-- .col-6 -->
<div class="col-md-6 col-lg-6">
<div class="nav">
<ul class="nav nav-pills">
<li class="pull-right">Contact</li>
<li class="pull-right">About</li>
</ul>
</div><!-- .nav -->
</div><!-- .col-6 -->
</div><!-- .fluid container -->
</div><!-- .row -->
</div><!-- .container-->
</div><!-- .wrapper-->
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<h1>Student</h1>
<h1>Business</h1>
</div>
</div>
</div><!-- .jumbotron -->
<div class="footer">
<div class="container-fluid">
<p>By:</p>
<p>For:</p>
</div>
</div><!-- .footer -->
To address part of your issue, try putting the sections you would like to be side-by-side in the same div.row, then wrap a div.col-xx-x around each. For example:
<div class="nav">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<ul class="nav nav-pills">
<li class="pull-right">Contact</li>
<li class="pull-right">About</li>
</ul>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-6">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Have Feedback?">
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-default">Submit Feedback</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
I'm really not sure why you're not using the <navbar> class. It's there and ready to accomplish exactly what you're looking for. See this Bootply for example:
Bootply - Navbar
<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">
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input class="form-control" placeholder="Have Feedback?" type="text">
</div>
<button type="submit" class="btn btn-default">Submit Feedback</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
There is a way to do it like you have it, but I'm not sure how to get the <form> to align perfectly with the <nav> class, since there's padding on it and moves it down from the top a bit. You may need some custom CSS to handle that.
Bootply - Original
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<form class="form-horizontal">
<input class="form-control" id="exampleInputEmail2" placeholder="Have Feedback?" type="email">
</form>
</div>
<div class="col-xs-2">
<button type="submit" class="btn btn-default">Submit Feedback</button>
</div>
<div class="col-xs-6">
<ul class="nav nav-pills">
<li class="pull-right">Contact</li>
<li class="pull-right">About</li>
</ul>
</div>
</div>
</div>
Give them both a look and see if either works for you.
Hope that helps!
Related
Edit2:
Okay, the problem was, that I used a <div class="row"> around the <div class="topimage"> tag. Strange. Could someone explain why it is?
I'm pretty new to bootstrap and created a web page for learning purposes.
Everything is working pretty well so far, except the navbar.
This is my nav code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="headertest ">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<form class="navbar-form navbar-left">
<button class="btn btn-default">ENTDECKEN</button>
<button class="btn btn-default">FINDEN</button>
<button class="btn btn-default">PLANEN</button>
<p class="font">
<b> Zurück zur Hafenseite |</b> <a style="text-decoration: none">Salsbury & Mysteriöses Stonehenge</a>
</p>
</form>
</div>
<div class="col-sm-2 ">
<div class="navbar-form">
<img src="../assets/aida.png" class="logo ">
</div>
</div>
<div class="col-sm-4">
<div class="navbar-form navbar-right">
<form action="#" style>
<div class="dropdown">
<img src="../assets/lupe.png" class="icons" />
<img src="../assets/telefon.png" class="icons" />
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Erste Aktion</li>
<li>Zweite Aktion</li>
<li>Noch eine Aktion</li>
<li role="separator" class="divider"></li>
<li>Ein Link</li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>
</nav>
</div>
The problem is, if I use the navbar-fixed-top class, the content inside the navbar is jumping while I scroll.
Like the top margin is vanishing while I'm scrolling down and if I Scroll up, the margin (or whatever the problem is) just magically appears back.
Normal and scrolling up:
Scrolling down:
I hope you can see what I mean.
Does anybody know what I'm doing wrong?
(my css classes shouldn't be the problem. If I delete them, the content still keep "jumping")
Thank you
Edit:
I have an image as the first item (after the navbar) that seems to cause the problems.
If I delete it, the navbar is working as expected.
Css:
.topimage{
height: 600px;
width: 100%;
align-self: center;
background-image: url("./assets/testbild3.jpg");
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
and how I implemented it:
<div class="row">
<headertest></headertest><!-- navbar component -->
</div>
<div class="row ">
<div class="topimage">
</div>
</div>
The fiddler link: (where it works without "jumping" navbar content)
https://jsfiddle.net/Biberium/g52cd6v8/
I have a HTML page with forms ad content that i built with bootstrap which occupies full width and height of Opera,IE,Firefox and Chrome but when i run it in Edge it only occupies like 75 % ,only when i set the zoom to 125% in edge it renders the same way as it did in other browsers . Is there like any meta tag
like
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
to make Edge use the same settings like IE?
I was using this meta tag ,right after the header tag
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
my html page:
html {
min-height: 100%;
width: 100%;
height: 100vh;
}
body {
margin-top: 50px;
min-height: 100%;
width: 100%;
height: 100vh;
}
.fullwidth {
width: 100%;
}
.halfwidth {
width: 50%;
}
.fullscreen {
height: 100%;
width: 100%;
}
.halfscreen {
height: 50%;
width: 100%;
}
.verticalscrollbar {
overflow-y: scroll;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Best Taxi</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/site.css" />
<script src="js/jquery-3.1.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="shortcut icon" href="Images/favicon.ico" type="image/x-icon">
<link rel="icon" href="Images/favicon.ico" type="image/x-icon">
</head>
<body class="background-plain">
<div id="page">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">Best Taxi</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>City Attractions</li>
<!--Code for drop down link ,sub menu-->
<!-- <li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Drop Down Link
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>The Museum</li>
<li>The Palace</li>
<li>The Zoo</li>
</ul>
</li>-->
<li>Tour Packages</li>
<li>Pricing</li>
<li class="active">Contact Us</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<section id="Main" class="container col-lg-12 col-md-12 col-sm-12 col-xs-12 fullscreen">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 halfscreen">
<div id="Address" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h2>Address</h2>
<hr />
<div id="col-lg-6 col-md-6" style="float: left;">
<h5>Address:Flat Number 1,</h5>
<h5>Building Number 1000</h5>
<h5>EverGlade Street,</h5>
<h5>Way Number 15678,</h5>
<h5>DownTown,Thimphu</h5>
<h5>Bhutan</h5>
<h5>Phone:0000000000</h5>
<h5>Mail:info#besttaxi.com</h5>
</div>
<div id="AddressImage" class="col-lg-6 col-md-6 visible-lg visible-md">
<img src="Images/taxi_mail.png" class="img-responsive" />
</div>
</div>
<div id="ContactUsForm" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<form>
<h2>Contact Us</h2>
<hr />
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
<h5>Name:</h5>
</div>
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-8">
<input id="ContactName" type="text" class="form-control" required />
</div>
<br />
<br />
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
<h5>Email:</h5>
</div>
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-8">
<input id="ContactEmail" type="text" class="form-control" required />
</div>
<br />
<br />
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
<h5>Subject:</h5>
</div>
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-8">
<input id="ContactSubject" type="text" class="form-control" required placeholder="joe#gmail.com" />
</div>
<br />
<br />
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
<h5>Message:</h5>
</div>
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-8">
<textarea rows="5" cols="70" class="form-control"></textarea>
</div>
<br />
<br />
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4"></div>
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-8">
<br />
<button type="submit" class="btn btn-default btn-yellow">Submit</button>
</div>
</form>
</div>
</div>
<div id="AddressMap" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 halfscreen">
<br />
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3539.890031078142!2d89.6358250609653!3d27.47268275781882!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1485174584064" class="fullwidth" height="260"></iframe>
</div>
<hr />
</section>
<footer class="container navbar-fixed-bottom hidden-xs hidden-sm">
<p class="hidden-xs hidden-sm">Copyrights © 2017 Best Taxi rights reserved | Developed by Nakki </p>
</footer>
</div>
</body>
</html>
Currently I have my website looking like this.
http://imgur.com/jS1vEKq
Here's the html
<html ng-app="app">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/opencv_css.css" />
</head>
<nav class="navbar navbar-default">
<div class="container"> <!-- top intro part -->
<div class="navbar-header">
<a class="navbar-brand" href="#/"> OPENCV 3.0.0</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
<body ng-controller="MainController">
<div class="row"> <!-- Dropdown menu -->
<div class="col-md-20">
<div id="main">
<form class="form-horizontal" role="form">
<label class="control-label col-md-2">Filter List:</label>
<div class="col-md-5">
<select class="form-control"
ng-model="template"
ng-options="t as t for t in templates">
</select>
</div>
</form>
</div>
</div>
<input type="file" id="fileToUpload" name="fileToUpload">
<button ng-click="add()">Upload</button>
</div>
<div class="row">
<div class="col-md-push-2 col-sm-push-1 col-lg-push-1 col-md-8-col-sm-8 col-lg-6 text-warning">
<div id="imagesData">
<img id="img1" src="" alt="" class="data-image" />
</div>
</div>
<div class="col-md-push-4 col-sm-push-2 col-lg-push-2 col-md-16-col-sm-16 text-warning">
<div id="imagesData">
<img id="img2" src="" alt="" class="data-image" />
</div>
</div>
</div>
<script src="js/jQuery.js"></script>
<script src="js/angular.js"></script>
<script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I was wondering how I would move image elements just a few pixels lower so that they aren't right against the upload button? And I know that the way I've placed the images in bootstrap must be completely wrong and awful. I'm still a noob to web dev so I simply looked at someone else's code and made it fit to my needs.
Try a < br> (Without Space) it will break one line ;)
I saw this answer was given already, sorry
You can add a margin to your .data-image class
.data-image {
margin: 10px 0px;
}
Well theres a few ways you could do this firstly (kinda cheaty) just use simple <br> tags like so...
<br><br> <--- right here
<div class="row">
<div class="col-md-push-2 col-sm-push-1 col-lg-push-1 col-md-8-col-sm-8 col-lg-6 text-warning">
<div id="imagesData">
<img id="img1" src="" alt="" class="data-image" />
</div>
</div>
<div class="col-md-push-4 col-sm-push-2 col-lg-push-2 col-md-16-col-sm-16 text-warning">
<div id="imagesData">
<img id="img2" src="" alt="" class="data-image" />
</div>
</div>
</div>
you can add it in before or after the row tag i think but try this
I am developing a website for my high school's robotics team. I have 2 jumbotron elements but I need to modify one of the jumbotron elements without changing the other. How do I do this?
The site is www.robotichive3774.com
<!DOCTYPE html>
<html>
<head>
<title>Robotics Team 3774 Home</title>
<!-- Link to stylesheet -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/index1.css">
<!-- Mobile Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-------------------- UNIFORM CODE ------------------------->
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/Home">Team 3774</a>
</div>
<div class="navbar-collapse collapse" style="height: 0.866667px;">
<ul class="nav navbar-nav">
<li>Team Bio</li>
<li>Our Robot</li>
<li>Our Coach</li>
<li>Gallery</li>
<li>Outreach</li>
<li>Youtube</li>
</ul>
</div>
</div>
</div>
<!-- Banner -->
<div class="jumbotron">
<img src="/Images/Banner.png" class="img-responsive" alt="Responsive image">
</div>
<!----------------------------------------------------------->
<div class="jumbotron">
<h1>Team 3774 Member Bio</h1>
<p>Here you can find links to every member with some information on each of them.</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Abanoub Boules</h2>
<p>Team Captain, Engineer, Coder</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Andre Bernardo</h2>
<p>Head Engineer, Assistant Captain</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Leo Scarano</h2>
<p>Head Coder, Head Web-master</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Andrew Wojtkowski</h2>
<p>Coder, Web-master, Engineer</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Mina Hanna</h2>
<p>Engineer, Coder</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Kenneth Rebbecke</h2>
<p>Engineer, Documenter</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Kristen Kaldas</h2>
<p>Coder, Head Documenter</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Melanie Aguilar</h2>
<p>Secretary, Mascot</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Anish Patel</h2>
<p>Engineer, Head 3D Modelling</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
<div class="col-md-4">
<h2>Furhan Ashraf</h2>
<p>Financial Advisor, Engineer</p>
<button type="button" class="btn btn-default">Read More</button>
</div>
</div>
</div>
</body>
</html>
I need to have the jumbotron element on the top of the website to contain these elements but I can't have these elements applied to the second jumbotron.
.padding
{
padding-left:0;
padding-right:0;
padding-bottom:0;
}
Add an id selector to the one you wish you single out, such as id="top-jumbotron"
<!-- Banner -->
<div id="top-jumbotron" class="jumbotron">
<img src="/Images/Banner.png" class="img-responsive" alt="Responsive image">
</div>
Then apply the CSS using an ID selector, :
#top-jumbotron {
padding-left:0;
padding-right:0;
padding-bottom:0;
}
Keep in mind that an ID must be unique on the page, meaning you can only have one #top-jumbotron, one #bottom-jumbotron etc. They are useful for singling out unique elements that need specific styles or other methods applied to them.
ID selectors are denoted by a hashtag # and must be unique to the page
Example: #top-jumbotron
Class selectors are denoted by a period . and can be applied to one or more elements on the page
Example: .jumbotron
Alternatively, you can single out the first .jumbotron class on the page by using the :first-child pseudo selector like this:
.jumbotron:first-child
{
padding-left:0;
padding-right:0;
padding-bottom:0;
}
However for your case I would recommend using a specific targeted ID so you know it's always being applied to the correct jumbotron.
How can I prevent some of the default mobile functionality? (c.f. Bootstrap - Creating a mobile nav that doesn't use collapse)
In particular, I want to get two rows of navbar:
the first with logo and page title;
the second with something that will toggle a sidebar, with a search box filling the rest of the space.
The first time I tried I ended up ignoring the nav-bar and building my own layout, but before abandoning again I thought I would check the community. The main problem is that the search box insists on being 100% width (on small screens).
Playing around with Chrome devtools, I can turn off width:100% in .form-control but I can't seem to get .form-group to contract
<div class="navbar navbar-default navbar-static-top" ng-controller="NavbarCtrl">
<div class="container">
<div class="navbar-header">
af
</div>
<div id="navbar-main">
{{page.title}}
</div>
</div>
<div class="container">
<div class="navbar-left">
<ul class="nav navbar-nav">
<li>Crieria</li>
</ul>
</div>
<div id="navbar-search" class="navbar-right">
<form class="navbar-form " role="search">
<div class="form-group">
<input type="text" size="20" class="form-control" placeholder="Search">
<!-- <button type="submit" class="btn btn-default">Submit</button> -->
</div>
</form>
</div>
</div>
</div>
Try this:
If you need full width in the md and lg view use container-fluid instead of container
DEMO
<div class="navbar navbar-default navbar-static-top" ng-controller="NavbarCtrl">
<div class="container">
<div class="navbar-header col-xs-6 col-sm-6 col-md-6 col-lg-6">
af
</div>
<div id="navbar-main col-xs-6 col-sm-6 col-md-6 col-lg-6">
{{page.title}}
</div>
</div>
<div class="container">
<div class="navbar-left col-xs-4 col-sm-4 col-md-2 col-lg-2">
<ul class="nav navbar-nav">
<li><a href="" data-toggle>Crieria</a></li>
</ul>
</div>
<div id="navbar-search" class="navbar-right col-xs-8 col-sm-8 col-md-10 col-lg-10">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
<!-- <button type="submit" class="btn btn-default">Submit</button> -->
</div>
</div>
</div>
</div>
Where ever you do not want Bootstrap behavior, just don't use bootstrap classes, rather define your own classes with the styling and behavior you do want it to have.
If you attempt to overwrite Bootstrap behavior for any page element of substantial size and complexity; you'll find it would have been far easier if you'd just avoided using the bootstrap classes on that element by the time you overwrite all of it's behavior.
If all you want is a navbar with two rows though you could do it with boostrap default classes if you wanted to.. jsFiddle (link)
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<img src="http://placehold.it/70x70" class="span1" style="position:relative;top:10px">
<div class="span10">
<div class="row">
<div class="span2 offset5" style="text-align:right">
<div class="navbar-text">
<p>Login</p>
</div>
</div>
<div class="span2 offset1">
<div class="pull-right">
<form class="navbar-form">
<div class="input-append">
<input class="span2" id="appendedInputButtons" type="text">
<button class="btn" type="button">Search</button>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="span10">
<ul class="nav pull-right">
<li>Page 1</li>
<li class="divider-vertical"></li>
<li>Page 2</li>
<li class="divider-vertical"></li>
<li>Page 3</li>
<li class="divider-vertical"></li>
<li>Page 4<li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>