bootstrap: Why div child is bigger than div parent?

Question

I have extracted a part of my web to show my problem. Why the yellow div is bigger than the black div which is his parent? How can it fit exactly in the parent? I'm new in bootstrap so I guess I'm doing something wrong

Thanks

Example

.indicador {
  background-color: black;
  color: white;
  border-radius: 5px;
}

.indicadormedio {
  background-color: yellow;
  color: #01CB99;
  font-size: 40px;
  border: 1px solid green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row " style=" display: table; ">

    <div class="col-sm-12 ">
      <div class="row">
        <div class="col-sm-12">
          <div class="row" style="background-color:red">
            <div class="col-sm-12 ">
              <div class="indicador">
                <div class="row">
                  <div class="col-sm-12">title </div>
                </div>
                <div class="row indicadormedio">
                  <div class="col-sm-12">30</div>
                </div>
                <div class="row">
                  <div class="col-sm-12">
                    <div class="row">
                      <div class="col-sm-12">subtitle</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

    </div>

  </div>

</div>

It's not bigger; `indicador` is expanding to contain `indicadormedio` like it's supposed to. — Blazemonger, Jun 30 '17 at 14:45
Rule 1 of the [bootstrap grid](http://getbootstrap.com/css/#grid): `Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.` — Ron van der Heijden, Jun 30 '17 at 14:58
Ron van der Heijden , I dont understand you, I have "
" at the beggining that is what you mean? — wakeup, Jun 30 '17 at 15:09

score 1 · Accepted Answer · answered Jun 30 '17 at 14:51

You need to use bootstrap classes to fix that, add row col-sm-12 to indicador

See result:

.indicador {
  background-color: black;
  color: white;
  border-radius: 5px;
}

.indicadormedio {
  background-color: yellow;
  color: #01CB99;
  font-size: 40px;
  border: 1px solid green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row " style=" display: table; ">

    <div class="col-sm-12 ">
      <div class="row">
        <div class="col-sm-12">
          <div class="row" style="background-color:red">
            <div class="col-sm-12 ">
              <div class="indicador row col-sm-12">
                <div class="row">
                  <div class="col-sm-12">title </div>
                </div>
                <div class="row indicadormedio">
                  <div class="col-sm-12">30</div>
                </div>
                <div class="row">
                  <div class="col-sm-12">
                    <div class="row">
                      <div class="col-sm-12">subtitle</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

    </div>

  </div>

</div>

@wakeup bootstrap has its own predefined classes and styles, so you need to use them properly :) .. if the answer helped you don't forget to accept it — Chiller, Jun 30 '17 at 15:20

Wail · Answer 2 · 2017-06-30T15:18:16.080

You had too many cascading divs, for which I don't see any visible purpose. I cleaned them up and it gave the following result.

Which ended with the following code:

<div class="container" >
   <div class="row indicador"  style=" display: table; " >                              
      <div class="row">
         <div class="col-sm-12" >title </div>
      </div>
      <div class="row indicadormedio">
         <div class="col-sm-12">30</div>
      </div>
      <div class="row">
         <div class="col-sm-12">subtitle</div>
      </div>
   </div>
</div>

I also route you to the following post to know when to use a row class.

Hope it helps.

bootstrap: Why div child is bigger than div parent?

2 Answers2