Bootstrap button bottom center of the screen

user_15157633 0
Viewed 620

I am new to bootstrap and learning new things and i am trying to bring the bootstrap button to center of the screen at bottom position so far my code is

.bottom-center {
  position: absolute;
  bottom: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<p>Just a test of placing the button in center of the screen at bottom position</p>
<div class='bottom-center'>
  <button type='button' class='btn btn-primary btn-large btn-start'>Center</button>
</div>

twitter-bootstrap-3 bootstrap-4 twitter-bootstrap css html
1 Answers

there is no need for any additional CSS to achieve that.

  1. First Thing: use bootstrap 4 instead of 3. (bootstrap 3 is getting too old)
  2. add class fixed-bottom to the button container to make it at the bottom of the screen.
  3. add d-flex justify-content-center to the the button container to make it centered

read more about flex property in bootstrap here

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<p>Just a test of placing the button in center of the screen at bottom position</p>
<div class="fixed-bottom d-flex justify-content-center">
  <button type='button' class='btn btn-primary btn-large btn-start'>Center</button>
</div>

user_112615180
Related