Adding a title to Bootstrap

Question

I'm new to Bootstrap, and it's hard for me to put a title above the navigation bar. I need to have a title for the current website with a height of at least 70 pixels, at the same time I need to make sure that the “Responsiveness” function works when viewed through a mobile phone. My current code

<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <button type="button" 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> </button> <a class="brand" href="#index.html"><img src="img/navigationlogo.png" alt="Home"/></a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"> <a href="#index.html"><img src="img/Home_Button.png" width="24" height="21" alt="Home"/></a> </li> </ul> </div> </div> </div> </div> 

What I think is to add

 <header></header> 

Above the navigation bar and place your logo there.

Can someone please provide me an example css code on how I can achieve this? Since I heard that minimum padding should be supported so that adaptive navigation works if seen through a mobile device.

Answer 1

add a title tag and assign it a class of "page-header" . This will give your site a small headline.

Answer 2

If you are wondering about standard Bootstrap headers, you should also know how to add a subtitle.

 <div class="page-header"> <h1>Your mother was a hamster <small>and your father smelt of elderberries</small> </h1> </div> 

Result:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="page-header"> <h1>Your mother was a hamster <small>and your father smelt of elderberries</small> </h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> 

Answer 3

You can put a div or html5 title above the navigation bar as follows if your width is 1000 pixels for the image:

 <header> <img src="http://placehold.it/1000x70"/> </header> 

You can place your navigator after the above code.

You can see jsfiddle demo