Bootstrap h6 tag margin issue

Question

I'm fairly new to Bootstrap and I'm having a problem trying to align a header. Per the screenshots, when I put an h6 tag on the "Active Workflow" title it puts a margin on the bottom of it that makes it off center. I went through all of the styles in dev tools, and cannot figure out how this margin is getting added. Looking for any kind of insight here.

EDIT: Tried pulling the margin off the H6 tag but the padding is still there, added another image to display.

And the code:

<div class="row">
   <div class="col-md-11">
   <h6>Active Workflow</h6>
</div>

Please post all of the relevant code to reproduce the issue. — Carol Skelly, May 11 '18 at 14:09

score 2 · Answer 1 · answered May 11 '18 at 13:54

2

It's added by Bootstrap...

.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
}

You can remove it using margin utils with..

<h6 class="mb-0">Active Workflow</h6>

Read the Bootstrap docs on Spacing.

answered May 11 '18 at 13:54

Carol Skelly

351,302
90
710
624

That didn't work, although it made sense. What it looks like is that it's justifying the header against the top of the column and none of the vertical spacing classes seem to work. – TrevorGoodchild May 11 '18 at 13:59
Hard to say without seeing the code. – Carol Skelly May 11 '18 at 14:04

score 0 · Answer 2 · answered May 11 '18 at 13:56

0

bootstrap add default margin to heading element (h1-h6). you can override this by using mb-0

 <h6 class="mb-0">text<h6>

answered May 11 '18 at 13:56

patelarpan

7,188
2
20
25

score 0 · Answer 3 · answered May 11 '18 at 14:38

So I'm not sure why it works, but I noticed that on another page I wasn't using an H6 tag specifically, I had added it to a label. For some reason, this spaces it perfectly. An h6 tag, even with mb-0 on it, still top justifies the text.

@Html.Label("Active Workflow", new { @class = "h6" })

With just the h6 tag, the column is 23 pixels in height, with the label it's 26.

Bootstrap h6 tag margin issue

3 Answers3

Linked

Related