3

I am trying to create a container in bootstrap with a button on the bottom floating on the right. Unfortunately, the button is leaving the div. Why is this happening and how can I prevent this? Here is a copy of the HTML

<body>
  <div class="container">
    <p>
      ... 
    </p>
    <button type="button" class="btn btn-primary float-right">Primary</button>
  </div>
</body>

CSS

.container {
  border: 1px solid black;
}

and a plunker: https://plnkr.co/edit/9DUn1CUj0g6NPhEmqeB9?p=preview

user1876508
  • 12,864
  • 21
  • 68
  • 105

2 Answers2

3

Because the button has applied float-right it will create some out of flow. Ref : https://www.w3.org/TR/CSS21/visuren.html#x23

Just add 

<div style="clear: both;"></div>

after the <button>

.container {
  border: 1px solid black;
}
<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@4.0.0-beta" data-semver="4.0.0-beta" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />
    <script data-require="bootstrap@4.0.0-beta" data-semver="4.0.0-beta" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <p>
        Measured fer yer chains piracy marooned schooner snow yo-ho-ho parley furl six pounders lanyard. Snow brig Sink me rum American Main reef sails bucko pirate crow's nest Sail ho. American Main coxswain lee heave down tender brig schooner gibbet piracy rum. 
      </p>
      
      <button type="button" class="btn btn-primary float-right">Primary</button>
      <div style="clear: both;"></div>
    </div>
  </body>

</html>

Method 2 :

add overflow: hidden; to container

/* Styles go here */

.container {
  border: 1px solid black;
  overflow: hidden;
}
<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@4.0.0-beta" data-semver="4.0.0-beta" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />
    <script data-require="bootstrap@4.0.0-beta" data-semver="4.0.0-beta" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <p>
        Measured fer yer chains piracy marooned schooner snow yo-ho-ho parley furl six pounders lanyard. Snow brig Sink me rum American Main reef sails bucko pirate crow's nest Sail ho. American Main coxswain lee heave down tender brig schooner gibbet piracy rum. 
      </p>
      <button type="button" class="btn btn-primary float-right">Primary</button>
    </div>
  </body>

</html>
Znaneswar
  • 3,329
  • 2
  • 16
  • 24
2

This seems to be a normal problem when trying to wrap the button tag. Using a row inside the container can solve this problem. Here you can see i am using col-md-12 which is insite the row ,but you can change it depending on your design.

// Code goes here
/* Styles go here */

.container {
  border: 1px solid black;
}
<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@4.0.0-beta" data-semver="4.0.0-beta" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />
    <script data-require="bootstrap@4.0.0-beta" data-semver="4.0.0-beta" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
   
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <p>Measured fer yer chains piracy marooned schooner snow yo-ho-ho parley furl six pounders lanyard. Snow brig Sink me rum American Main reef sails bucko pirate crow's nest Sail ho. American Main coxswain lee heave down tender brig schooner gibbet piracy rum.</p>
          <button type="button" class="btn btn-primary float-right">Primary</button>
        </div>
      </div>
    </div>
  </body>

</html>
Obed
  • 41
  • 4