CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4
Michael LB
Michael LB

Reputation: 2722

Aligning button to the right of a 'card' using Bootstrap v4

I'm new to Bootstrap and thought I'd dive in using their v4 alpha release.

I'm trying to align the 'Arrange a valuation' button (near to bottom of page) in the following example to the right whilst leaving the other text aligned to the left. I also need the text and button to be vertically aligned in the middle.

http://www.atlasestateagents.co.uk/mlb/landlords/services-and-fees.php

Can you help?

<div class="card card-block card-blue clearfix">
    <p class="card-text">Want to know how much rent you could achieve for your property?&nbsp;<a href="#" class="btn btn-blue-outline pull-right">Arrange a Valuation</a></p>
  </div>

Upvotes: 7

Views: 27833

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362410

In the latest Bootstrap 4 (alpha 6) pull-right is now float-right:

<div class="card card-block card-outline-primary">
    <p class="card-text">Want to know how much rent you could achieve for your property? &nbsp;
        <a href="#" class="btn btn-outline-primary float-right">Arrange a Valuation</a>
     </p>
</div>

http://www.codeply.com/go/D2i7JWqv4d

Upvotes: 16

Christian Col&#243;n
Christian Col&#243;n

Reputation: 106

Add .pull-right to the a tag's class. 

<div class="card card-block card-primary">
    <p class="card-text">Want to know how much rent you could achieve for your property?&nbsp;<a href="#" class="btn btn-primary-outline pull-right">Arrange a Valuation</a></p>
</div>

Upvotes: 0

Related Questions