how to make col-md-3 at the right side align in html bootstrap 4

user_14449022 0
Viewed 133

i want to make one div right align , but not able keep it in right side in row. how to make the value 172.21 at right side in the row.
screenshotscreenshot

HTML:

                                <div class="row">
                                    <div class="col-md-6">
                                        <h4>Status</h4>
                                        <input type="checkbox" disabled checked data-toggle="toggle" data-onstyle="outline-success" data-offstyle="outline-danger">
                                    </div>
                                    <div class="col-md-3">
                                        <h4>Max Demand  </h4>
                                    </div>
                                    <div class="col-md-3">
                                        <h4>172.21</h4>
                                    </div>
                                </div>
bootstrap-4 css html
3 Answers

If there is text, just "align-right"

If there is block, in BS3:

Add "pull-right" to the element container

In BS4:

"float-right"

E.g. in BS4:

   <div class="row">
                                <div class="col-md-6">
                                    <h4>Status</h4>
                                    <input type="checkbox" disabled checked data-toggle="toggle" data-onstyle="outline-success" data-offstyle="outline-danger">
                                </div>
                                <div class="col-md-3">
                                    <h4>Max Demand  </h4>
                                </div>
                                <div class="col-md-3 float-right">
                                    <h4>172.21</h4>
                                </div>
                            </div>
user_8884720

You just need add class in last column like: text-left text-md-right.
I hope below snippet will help you.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">

<div class="container border">
 <div class="row">
  <div class="col-md-6">
   <h4>Status</h4>
   <input type="checkbox" disabled checked data-toggle="toggle" data-onstyle="outline-success" data-offstyle="outline-danger">
  </div>
  <div class="col-md-3">
   <h4>Max Demand  </h4>
  </div>
  <div class="col-md-3 text-left text-md-right">
   <h4 class="btn btn-warning">545</h4>
  </div>
 </div>
</div>

user_70529270

Just for the text, add text-right class after col-md-3

and for the entire column, add pull-right class after col-md-3 if you're using bootstrap-3

and for bootstrap-4 add float-right instead of pull-right class.

user_64029560
Related