CODEWITHSUNDEEP
csstwitter-bootstrap
Michael
Michael

Reputation: 821

How to put a button next to a bootstrap card's title?

I am trying to create bootstraps cards which are going to represent e-commerce products. Each of the cards is going to be a product and I need to put an "add to cart" button next to the card's title.

So this is what I currently have:

<div class="card">
  <div class="card-body">
    <h5 class="card-title"><%= "#{product.name.capitalize} %></h5>
    <%= button_to products_path(:pid => p.id), :class => 'btn btn-default' do %>
      Add to cart
    <% end %>
  </div>
  <p class="card-text">This is the product description.</p>
</div>

I have tried so far to float left the card title and float right the button. Kind of worked but the description below was weirdly aligned. I was hoping for a vanilla responsive bootstrap solution if there is any.

Upvotes: 0

Views: 4589

Answers (3)

IvanS95
IvanS95

Reputation: 5732

Bootstrap 4 classes only

Maybe you can kinda use this structure to insert your button there? Basically just made the title to be inside another container along with the button and made it a flexbox

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="https://via.placeholder.com/200x120" alt="Card image cap">
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h5 class="card-title mb-0">Card title</h5>
      <button type="button" class="btn btn-success">Primary</button>
    </div>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Upvotes: 3

imvain2
imvain2

Reputation: 15847

Try wrapping the title AND button in the same div (or h5 if you need to) and add float-right to the button:

<div class="card">
  <div class="card-body">
    <div class="card-title"><%= "#{product.name.capitalize} %>
    <%= button_to products_path(:pid => p.id), :class => 'btn btn-default float-right' do %>
      Add to cart
    <% end %>
  </div>
  </div>
  <p class="card-text">This is the product description.</p>
</div>

Upvotes: 0

AngelMdez
AngelMdez

Reputation: 170

I would use position: relative; in the outer container (class card) and then 

button{
  position: absolute;
  top: 0;
  right: 0;
}

It is important to set the position: relative; to the card. Otherwise the position absolute would be relative to the full body, not the card element.

Something like this jsfiddle. The "card" class should be the outer container, and class "inner" the class of your button.

https://jsfiddle.net/4az3mgL0/3/

Upvotes: 0

Related Questions