Hello everyone, I am trying to design a header using bootstrap. U want to put a logo at the top to the right of it the header. And I want to place a bootstrap search bar at the right of the entire header. I’ve tried to float the search bar right, but however it gets placed right after the header text. So the image, header text and the search bar come one after the other and hence when I keep minimizing the browser window, they do not stack properly either according to bootstrap.
<div class="container">
<img src="http://www.computerclipart.com/computer_clipart_images/cartoon_computer_and_books_0521-1004-3015-4128_SMU.jpg" height="90" width="120" />
<h1 class="logo"> Resource Directory
<form class="form-search pull-right">
<div class="input-append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn">Search</button>
</div>
</form>
</h1>
</div>
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container" style="width: auto">
<!-- Nav Bar Contents goes here, removed it to minimize the code -->
</div>
</div>
</div>
</div>
<div class="container">
<div class="hero-unit">
<h2><center>XYZ University - Academic Resource Directory</center></h2>
Welcome to the Academic Resource Directory of XYZ University. All the resources related to academics can be found here!
</div>
<hr>
<footer>
<p>© Copy 2012</p>
</footer>
</div>
And this is another custom made css file.
h1 {
font-size:1.8em;
}
h2 {
font-size:1.4em;
}
img {
float: left;
}
.logo {
font:2.5em Arial;
margin:0 0 10px 0;
padding-top: 35px;
width:auto;
color:#000;
height: 70px;
float: left;
}
body {
background: #fff;
font-family:Arial;
font-size:0.8em;
}
.clear {
clear:both;
}
Please help me design my header. The image at the left, next to, i.e, right of it header text and right most of the header the search bar.