LikeToLearnStuff LikeToLearnStuff - 2 months ago 7
CSS Question

Making two headers directly below each other

I'm trying to write two headers directly above one another with no space in between like so:

header1

header2

The top of header2 should almost be touching the bottom of header1.

I'm using bootstrap and there is a large gap between the two headers.
I've tried overriding the class to remove the top and bottom margins but the gap is still there.

How can I do this?

<div class="row even">
<div class="col-md-12">
<h1 id="row-bottom-margin" class="text-center"> A Title </h1>
<div class="col-md-12">
<h3 id="row-top-margin" class="text-center"> Title 2 </h3>
</div>
</div>
</div>


css:

#row-top-margin{
margin-top: 0px;
}

#row-bottom-margin{
margin-bottom: 0px;
}

Answer

You need to reset the margin of the headers and apply negative margin to the h2:

h1, h2 {
  margin: 0;
}

h2 {
  margin-top: -0.5em;
}

make sure your css is applied after the bootstrap css, so that the styles get overwritten.

example: http://www.bootply.com/0Njb4PrXSi


edit: updated example for your code (http://www.bootply.com/3HG9MmaROJ)

rearrange the html like:

<div class="row even">
    <div class="no-margin col-md-12">
        <h1 class="text-center">A Title</h1>
        <h3 class="text-center">Title 2</h3>
    </div>
</div>

and use no-margin class to change the margin:

.no-margin h1, .no-margin h3 {
    margin 0;
}

.no-margin h3 {
    margin: -0.75em;
}