CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kode
Kode

Reputation: 3215

Bootstrap Jumbotron Not Adjusting Height

I have nested some inputs within a Bootstrap Jumbotron, but the Jumbotron doesn't seem to increase its height for the input boxes. They appear to flow over the Jumbotron instead of being within it. Here is my dummy code. Any clues as to why this doesn't nest within the Jumbotron?

<div class="jumbotron">

          <div class="col-sm-3 col-md-2">

              <div class="inputtext">
                  Current Balance
                  <div class="input-group">
                      <span class="input-group-addon">$</span>
                      <input type="number" id="currentbalance" class="form-control" placeholder="0">
                  </div>
              </div>

              <div class="inputtext">
                  Monthly Contributions
                  <div class="input-group">
                      <span class="input-group-addon">$</span>
                      <input type="number" id="monthlycpontribution" class="form-control" placeholder="0">
                  </div>
              </div>

              <div class="inputtext">
                  Interest Rate
                  <div class="input-group">
                      <span class="input-group-addon">%</span>
                      <input type="number" id="interestrate" class="form-control" placeholder="0">
                  </div>
              </div>

              <div class="inputtext">
                  Years Contributing
                  <div class="input-group">
                      <span class="input-group-addon">+</span>
                      <input type="number" id="yearscontributing" class="form-control" placeholder="0">
                  </div>
              </div>

              <div class="">
                  <input class="btn btn-default" type="submit" id="calculate" value="Calculate">
              </div>
          </div>

          <div class="col-sm-9 col-md-10">
              Chart goes here
          </div>

</div> <!-- /container -->

Upvotes: 0

Views: 359

Answers (1)

Ryan
Ryan

Reputation: 415

In bootstrap, col-* classes need to be contained in a parent <div> with a class of row. Here's a JSFiddle with the included parent <div class="row">:

http://jsfiddle.net/fpcucjed/

Now, the fields don't bleed past the jumbotron.

Upvotes: 3

Related Questions