Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove the top margin of header in bootstrap

HTML

<div class="container-fluid">
  <div class="row">
    <div class="page-header header_site">
      <h1><font>ABC Company</font></h1>
    </div>
  </div>
</div>

CSS Code:

.header_site {
  background-color: darkblue;
}

font {
  color: white;
  margin: auto 160px auto 160px;
}

I want to remove the top-margin as marked in the following figure.

enter image description here

like image 840
ONE_FE Avatar asked Jan 28 '16 10:01

ONE_FE


2 Answers

give your h1 and page header a margin-top of 0 and make sure your body doesn't have any padding:

body { padding: 0; }
.page-header,
.page-header h1 {margin-top:0;}

Example bootply

If you need your h1 to move down a bit, then give it padding-top

like image 163
Pete Avatar answered Oct 16 '22 11:10

Pete


For Bootstrap 3 just add class "media-heading"

<h1 class="media-heading"><font>ABC Company</font></h1>
like image 12
Scotty G Avatar answered Oct 16 '22 10:10

Scotty G