Is there a way in Bootstrap 3 to right align a div?
I am aware of the offsetting possibilitys but I want to align a formatted div to the right of its container while it should be centered in a fullwidth mobile view. The class 'pull-right' is not working anymore. Did they forgot to replace it or am I missing something obvious?
<div class="row"> <div class="container"> <div class="col-md-4"> left content </div> <div class="col-md-4 col-md-offset-4"> <!-- The next div has a background color and its own paddings and should be aligned right--> <!-- It is now in the right column but aligned left in that column --> <div class="yellow_background">right content</div> </div> </div> </div>
Shure I know how to do this in CSS, but can it be done in pure bootstrap 3?
Answer: Use the text-right Class You can simply use the class . text-right on the containing element to right align your Bootstrap buttons within a block box or grid column. It will work in both Bootstrap 3 and 4 versions.
The class pull-right is still there in Bootstrap 3 See the 'helper classes' here
pull-right is defined by
.pull-right { float: right !important; }
without more info on styles and content, it's difficult to say.
It definitely pulls right in this JSBIN when the page is wider than 990px - which is when the col-md styling kicks in, Bootstrap 3 being mobile first and all.
Bootstrap 4
Note that for Bootstrap 4 .pull-right has been replaced with .float-right https://www.geeksforgeeks.org/pull-left-and-pull-right-classes-in-bootstrap-4/#:~:text=pull%2Dright%20classes%20have%20been,based%20on%20the%20Bootstrap%20Grid.
Do you mean something like this:
HTML
<div class="row"> <div class="container"> <div class="col-md-4"> left content </div> <div class="col-md-4 col-md-offset-4"> <div class="yellow-background"> text <div class="pull-right">right content</div> </div> </div> </div> </div>
CSS
.yellow-background { background: blue; } .pull-right { background: yellow; }
A full example can be found on Codepen.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With