How to horizontally align elements within a Media Object in Boostrap 4?

Question

How to horizontally align elements within a Media Object in Boostrap 4?

Navigation

#1 by (3 votes)
#2 by (2 votes)

2

I am using the Media Object of Boostrap 4 for a comments module, I have added a button in it but I do not know how I can align it horizontally so that it sticks to the right margin.

The desired result is the button in that position:

.single-comment{
                border: 1px solid lightgray;
                padding: 15px;
                border-radius: 5px
            }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="media mb-4 single-comment"><img class="d-flex mr-3 rounded-circle" src="http://placehold.it/50x50" alt="">
  <div class="media-body">
    <h5 class="mt-0">Padre1</h5>
    <p>padre1</p>
    
    <button type="button" class="btn btn-primary btn-sm align-self-end mt-4">Responder</button>
   
   <div class="media mt-4"><img class="d-flex mr-3 rounded-circle" src="http://placehold.it/50x50" alt="">
      <div class="media-body">
        <h5 class="mt-0">Hijo</h5>
        <p>hijo</p>
      </div>
    </div>
  </div>
</div>

css bootstrap-4

asked by Serux 06.07.2018 в 15:34

source

2 answers

2

Bootstrap 4 uses .float-right difference from .pull-right from Bootstrap 3 . . p>

Example:

<div class="row">
   <div class="col-lg-12">
      <button class="btn btn-secondary float-right">Responder</button>
   </div>
</div>

answered by 06.07.2018 в 15:41

Decorator with parameters in Python Error when inserting in the Sql Server 2016 Database?

score 3 · Accepted Answer

Well one of the way to do that is by making the comment "child" take the whole width of the card with col-md-12 , and then float the button to the right with float-right the result would be the following

.single-comment {
  border: 1px solid lightgray;
  padding: 15px;
  border-radius: 5px
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="media mb-4 single-comment">
  <img class="d-flex mr-3 rounded-circle" src="http://placehold.it/50x50" alt="">
  <div class="media-body">
    <h5 class="mt-0">Padre1</h5>
    <p>padre1</p>

    <button type="button" class="btn btn-primary btn-sm float-right mt-4">
      Responder
    </button>

    <div class="media mt-4 col-md-12">
      <img class="d-flex mr-3 rounded-circle" src="http://placehold.it/50x50" alt="">
      <div class="media-body">
        <h5 class="mt-0">Hijo</h5>
        <p>hijo</p>
      </div>
    </div>
  </div>
</div>

I hope you serve.Greetings!.