Why the navbar's height so big?

Question

Why is this navbar's height more than 1 row? I just want it to be 1 row.

Note: This is only a small part of the code, can anyone tell me the reason why the height is so big, so I can modify according to the suggestion? I don't want to change the html structure too much.

html,body {
  height: 100%;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.css">
<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-12 col-md-2 p-0 bg-primary">a</div>
    <div class="col bg-faded py-3">c</div>
  </div>
</div>

Temani Afif · Accepted Answer · 2018-12-30T08:25:08.690

This is due to the default alignment which is stretch. It works fine when both element are in the same row but when there is a wrap you will have 2 lines with the same height and each element will be stretched inside making you first element to have half the height of the container:

To avoid this, you can change the alignment on small screen considering align-content-*-* (https://getbootstrap.com/docs/4.2/utilities/flex/#align-content)

We make the alignment to be flex-start that we change to stretch at the md breakpoint:

html,body {
  height: 100%;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.css">
<div class="container-fluid h-100">
  <div class="row h-100 align-content-start align-content-md-stretch">
    <div class="col-12 col-md-2 p-0 bg-primary">a</div>
    <div class="col bg-faded py-3">c</div>
  </div>
</div>

Here is another question with more details to better understand what is happening: extra space when centering elements using flexbox

score 0 · Answer 2 · answered Dec 30 '18 at 08:06

0

height is so big because you add h-100 on your code, remove h-100 shows block size of your element

answered Dec 30 '18 at 08:06

Nisharg Shah

16,638
10
62
73

h-100 is add to its parent, can you explain more about it? – huan feng Dec 30 '18 at 08:08
h-100 is bootstrap class to give element 100% height – Nisharg Shah Dec 30 '18 at 08:09
I know h-100 is a bs class, why adding it to navbar's parent will impact the navbar. I added the h-100 here because i want the container to take full height. – huan feng Dec 30 '18 at 08:11
because when you give 100% height to container, each element of your container got 100% – Nisharg Shah Dec 30 '18 at 08:14
like in jsfiddle if you give `bg-primary` to c element it also have 100% height – Nisharg Shah Dec 30 '18 at 08:17
Apparently, bg-primary does not do anything related to height. Thanks anyway. – huan feng Dec 30 '18 at 08:26
i know, anyway you got your final answer, i am happy for that – Nisharg Shah Dec 30 '18 at 08:29

לבני מלכה · Answer 3 · 2018-12-30T08:17:09.960

Remove h-100 from class="row"

EXPLAIN!

when you set h-100 to row mean height:100% -

100%

Set the height of an element to 100% of the height of the parent element(in your case container-fluid) and not auto according the contains inside the element

html,body {
  height: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid h-100">
  <div class="row">
    <div class="col-12 col-md-2 p-0 bg-primary">a</div>
    <div class="col bg-faded py-3">c</div>
  </div>
</div>

Thanks for your quick answer, can you help to answer why the h-100 works fine in below example: https://www.codeply.com/go/Rgq96HykJ2/sidebar-that-changes-to-navbar — huan feng, Dec 30 '18 at 08:21

Why the navbar's height so big?

3 Answers3