Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Align div right in Bootstrap 3

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?

like image 972
Klaaz Avatar asked Nov 03 '13 21:11

Klaaz


People also ask

How do I pull a button right in 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.


2 Answers

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.

like image 132
JasonB Avatar answered Oct 12 '22 23:10

JasonB


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.

like image 22
Eric Geurts Avatar answered Oct 12 '22 23:10

Eric Geurts