CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Andy Murray
Andy Murray

Reputation: 5

Bootstrap button not staying within div?

I'm trying to make a bootstrap button resize if the text within it is too long.

At the moment it is sticking out the other end of the div and looks silly.

Here's my code:

<div class="row marketing">

    <div class="col-lg-7">

        <video id="video_player" class="video-js vjs-default-skin" autoplay preload="auto" width="100%" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
              <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
              <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track>
        </video>

    </div>

    <div class="col-lg-5">

      <div class="list-group">
          <a href="#" class="list-group-item"><span class="glyphicon glyphicon-ok-sign"></span> Cras justo odio</a>
          <a href="#" class="list-group-item"><span class="glyphicon glyphicon-ok-sign"></span> Dapibus ac facilisis in</a>
          <a href="#" class="list-group-item"><span class="glyphicon glyphicon-ok-sign"></span> Morbi leo risus</a>
          <a href="#" class="list-group-item"><span class="glyphicon glyphicon-ok-sign"></span> Porta ac consectetur ac</a>
          <a href="#" class="list-group-item"><span class="glyphicon glyphicon-ok-sign"></span> Vestibulum at eros</a>
      </div>

      <a class="btn btn-lg btn-success" href="#">Donec id elit non mi porta gravida at eget metus.</a>

    </div>

  </div>

Thanks, Andy

Upvotes: 0

Views: 1756

Answers (1)

yeadude
yeadude

Reputation: 23

I had the same problem. I solved it by setting the CSS property:

white-space:normal

because Bootstrap has it on default as nowrap

Upvotes: 2

Related Questions