CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
prgrm
prgrm

Reputation: 3833

Button in the center of a card footer in Bootstraps

I have this .card-footer:

<div class="card-footer">
    <button class="btn btn-theme pull-left" type="button" id="toleft"><</button>
    <button class="btn btn-theme" type="button" id="more">+</button>
    <button class="btn btn-theme pull-right" type="button" id="toright">></button>
</div>

The buttons .toleft and .toright are in the correct position, however the button #more should be exactly on the center of the footer, but it is still on the left.

Any ideas?

Upvotes: 3

Views: 24740

Answers (4)

Sebastian Brosch
Sebastian Brosch

Reputation: 43574

Bootstrap 3

You can use the following solution adding .text-center to the .card-footer container:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-footer text-center">
  <button class="btn btn-theme pull-left" type="button" id="toleft">&lt;</button>
  <button class="btn btn-theme" type="button" id="more">+</button>
  <button class="btn btn-theme pull-right" type="button" id="toright">&gt;</button>
</div>

Bootstrap 4.0+

On Bootstrap 4.0+ there is no class .pull-left or .pull-right anymore. You have to use .float-left and .float-right instead. You can also use .text-center to center the second button.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="card-footer text-center">
  <button class="btn btn-dark float-left" type="button" id="toleft">&lt;</button>
  <button class="btn btn-dark" type="button" id="more">+</button>
  <button class="btn btn-dark float-right" type="button" id="toright">&gt;</button>
</div>

Note: I don't recommend to use custom CSS rules. Bootstrap is a CSS Framework to provide solutions for many design problems. Overwriting CSS properties on components can cause problems.

Upvotes: 10

Joshua Craven
Joshua Craven

Reputation: 4545

If you're seeing this in 2018 or beyond, please note that some of these old answers will not work with Bootstrap 4...

However, there is no need to include additional CSS as a couple of the previous answers suggest.

The pull-left and pull-right classes no longer work in Bootstrap 4.

Instead, we now use float-left and float-right to float our left and right buttons.

The easiest way to achieve the desired effect would be to start by centering the footer contents by adding the text-center class to the footer.

Next, we can float the left button with the float-left class and float the right button with the float-right class.

Here's the final HTML:

<div class="card-footer text-center">
<button class="btn btn-theme float-left" type="button" id="toleft">left</button>
<button class="btn btn-theme" type="button" id="more">center</button>
<button class="btn btn-theme float-right" type="button" id="toright">right</button>
</div>

Which gives us the following result:

Upvotes: 3

Conan
Conan

Reputation: 2709

Just tried this with the latest alpha6 build of Bootstrap 4 (I'm assuming you're using BS4 as you mentioned the card component), and it looks as though the default behaviour is to align buttons in card footers to the middle anyway.

Note that I also had to introduce the .pull-left / .pull-right utility classes, as these no longer appear to be defined in the Bootstrap CSS.

See demo below:

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-block">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    <button class="btn btn-theme pull-left" type="button" id="toleft">&lt;</button>
    <button class="btn btn-theme" type="button" id="more">+</button>
    <button class="btn btn-theme pull-right" type="button" id="toright">&gt;</button> </div>
</div>

Upvotes: 1

Ehsan
Ehsan

Reputation: 12959

Try This :

.card-footer{
    text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="card-footer">
     <button class="btn btn-theme pull-left" type="button" id="toleft"><</button>
     <button class="btn btn-theme" type="button" id="more">+</button>
     <button class="btn btn-theme pull-right" type="button" id="toright">></button>
 </div>

Upvotes: 0

Related Questions