Btn is not at right

Question

I want to have a a h5 "Posts" at left and the button "Btn" at right, however the "Btn" is not at right is at the left of the .col div, do you know how to proper position the button at right? With 'justify-content-end' is not working.

Also I want to have 4 cards with equal width in each row, but do you know why the cards appear so long? Is not possible that the card is more like a square and not a rectangle?

Example: http://jsfiddle.net/1b790tL5/

HTML:

<div class="container">
  <div class="row">
    <div class="col">
      <h5 class="display-5 font-weight-bold text-dark">Posts</h5>
    </div>
    <div class="col justify-content-end">
      <a href="" class="btn btn-primary">Btn</a>
    </div>
  </div>
</div>

<div class="container mt-4">
  <div class="card-deck">
    <div class="card p-0 shadow">
      <img class="card-img-top border-bottom" src="https://via.placeholder.com/280" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title text-dark font-weight-bold">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
          content.</p>
      </div>
    </div>
    <div class="card p-0 shadow">
      <img class="card-img-top border-bottom" src="https://via.placeholder.com/280" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title text-dark font-weight-bold">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
          content. This content is a little bit longer.</p>
      </div>
    </div>
     <div class="card p-0 shadow">
      <img class="card-img-top border-bottom" src="https://via.placeholder.com/280" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title text-dark font-weight-bold">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
          content. This content is a little bit longer.</p>
      </div>
    </div>
     <div class="card p-0 shadow">
      <img class="card-img-top border-bottom" src="https://via.placeholder.com/280" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title text-dark font-weight-bold">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
          content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

You should limit this to a single question. The right alignment issue has been asked many times before. Also, you have square images with text below in the cards. How do you expect the cards to be square? — Carol Skelly, Nov 21 '18 at 12:53
remove the ".col" class from [a.btn.btn-primary]- Btn's parent — vssadineni, Nov 21 '18 at 12:56
to your first: set col with param as `-10` :use `
`:http://jsfiddle.net/1b790tL5/3/ — לבני מלכה, Nov 21 '18 at 12:56
use `text-right` on the [button column](http://jsfiddle.net/1b790tL5/1/) - https://stackoverflow.com/questions/42442323/bootstrap-4-col-align-right. as for the second part - they are equal widths for me in chrome — Pete, Nov 21 '18 at 12:58

score 0 · Accepted Answer · answered Nov 21 '18 at 13:02

0

refer the image below. items take equal width when you use col class, in order to control the width add a number like col-1 to col-10 or 12 as per the framework.

answered Nov 21 '18 at 13:02

vssadineni

454
4
11

Thanks, so it should besides the card class is necessary to add the .col class? – user10676579 Nov 21 '18 at 13:07
No I do not mean to add col class to all the cards, I meant that you can control the width with these classes. – vssadineni Nov 21 '18 at 13:11
you could experiment with the classes and understand how they work. and when you are satisfied use them in your work. – vssadineni Nov 21 '18 at 13:13
Thanks, do you know why like this "http://jsfiddle.net/s7c153pk/1/" there is no margin between the cards? – user10676579 Nov 21 '18 at 13:21
because of the inline width 18rem, to .card.show class. inspect your own jfiddle you will know what is happening. – vssadineni Nov 21 '18 at 13:30

Btn is not at right

1 Answers1