Bootstrap btn block width to fit the screen

user_3970241 0
Viewed 68

Bootstrap button goes outside the screen and could not figure out how to fix this.

Here is the plunker

<div class="bigone">

    <div class="mybar">Nav bar</div>

    <div class="main">Main bar</div>

    <div class="footer">
      <button class="mx-2 my-2 btn btn-block btn-sm btn-danger">Testing</button>
    </div>

</div>

Following is the css

.bigone {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

Thank you

bootstrap-4 css
1 Answers

This is because of the margin of the button. Add display flex property to your footer class. This will fix the issue by containing the button element within the div with required margin.

.footer {
  display: flex;
}

Working example.

.bigone {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}
.footer {
  display: flex;
}
<link data-require="bootstrap@4.0.0-alpha.6" data-semver="4.0.0-alpha.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="tether@1.4.0" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>

<div class="bigone">

  <div class="mybar">
    Nav bar
    </br>something else
  </div>

  <div class="main">
    <div class="container-fluid">
      <div class="row">

        <div class="col-12">
          <h1>FIRST LINE</h1> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> 
          <h1>LAST LINE</h1>
        </div>

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

  <div class="footer">
    <button class="mx-2 my-2 btn btn-block btn-sm btn-danger">Testing</button>
  </div>

</div>

user_60993270
Related