CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
wakeup
wakeup

Reputation: 67

bootstrap: Why div child is bigger than div parent?

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>

Upvotes: 1

Views: 2744

Answers (2)

Wail
Wail

Reputation: 147

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.

Upvotes: 0

Chiller
Chiller

Reputation: 9738

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>

Upvotes: 1

Related Questions