Adding a Header to Bootstrap

Question

I’m fairly new to Bootstrap and am having trouble placing a header above the navigation bar. I need to have a header for the current website with at least 70 px in height, at the same time I need to make sure the Responsiveness works when seen through mobile phone. My current code is

<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 is was think I could do is to add

<header></header>

Above navigation bar and place my logo there.

Can someone please provide me a sample code with css on how I can achieve this ? As I heard that some minimum padding is to be maintained so that the responsive navigation works if seen through a mobile device.

Answer 1

add a header tag and give it the "page-header" class. This will give your website a nice little header.

Answer 2

If you're wondering about Bootstrap's standard headers, you should also be aware of how to add a subhead.

<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>