Align div right in Bootstrap 3

HtmlCssTwitter Bootstrap-3

Html Problem Overview


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?

Html Solutions


Solution 1 - Html

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.

Solution 2 - Html

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.

Solution 3 - Html

i think you try to align the content to the right within the div, the div with offset already push itself to the right, here some code and [LIVE sample][1]:
FYI: .pull-right only push the div to the right, but not the content inside the div.

HTML:

<div class="row">
  <div class="container">
    <div class="col-md-4 someclass">
      left content
    </div>
    <div class="col-md-4 col-md-offset-4 someclass">
      <div class="yellow_background totheright">right content</div>
    </div>
  </div>
</div>

CSS:

.someclass{ /*this class for testing purpose only*/
	border:1px solid blue;
    line-height:2em;
}
  
.totheright{ /*this will align the text to the right*/
  text-align:right;
}
    
.yellow_background{
	background-color:yellow;
}

Another modification:

...
<div class="yellow_background totheright">
  <span>right content</span>
  <br/>image also align-right<br/>
  <img width="15%" src="https://www.google.com/images/srpr/logo11w.png"/>
</div>
...

hope it will clear your problem [1]: http://bootply.com/91916

Solution 4 - Html

Bootstrap 4+ has made changes to the utility classes for this. From the documentation:

> Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.

So use the .float-right (or a size equivalent such as .float-lg-right) instead of .pull-right for your right alignment if you're using a newer Bootstrap version.

Solution 5 - Html

Add offset8 to your class, for example:

<div class="offset8">aligns to the right</div>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionKlaazView Question on Stackoverflow
Solution 1 - HtmlJasonBView Answer on Stackoverflow
Solution 2 - HtmlEric GeurtsView Answer on Stackoverflow
Solution 3 - HtmlxnomeView Answer on Stackoverflow
Solution 4 - HtmlVoicuView Answer on Stackoverflow
Solution 5 - HtmlpreetiView Answer on Stackoverflow