div inside col takes the full width (bootstrap 4)

Question

I have the following code:

<div class="row justify-content-md-center">
   <div class="col-lg-6 col-md-8">
      <div style="background-color: #1b6d85">test</div>
   </div>
</div>

The div with the text "test" uses the full width inside the col. So the whole cols background is #1b6d85. But why? I didnt't declare the width of this div so ´shouldn't it be only the width of the text?

Answer 1

<div> is a block element so it will use all available width by default

Use <span> if you want an inline element where width is content related by default or set the display:inline on the <div>

Answer 2

Because the <div> element has display: block by default which means its width is 100% and its height is auto (auto = the size of whatever's inside).