Align div right in Bootstrap 3

Question

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    lt div class  row  gt     lt div class  container  gt       lt div class  col-md-4  gt        left content      lt  div gt       lt div class  col-md-4 col-md-offset-4  gt         lt  -- The next div has a background color and its own paddings and should be aligned right-- gt         lt  -- It is now in the right column but aligned left in that column -- gt         lt div class  yellow background  gt right content lt  div gt       lt  div gt     lt  div gt   lt  div gt    Shure I know how to do this in CSS  but can it be done in pure bootstrap 3

User · Answer

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:
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

User · Answer

Do you mean something like this   HTML   lt div class  row  gt     lt div class  container  gt        lt div class  col-md-4  gt        left content      lt  div gt        lt div class  col-md-4 col-md-offset-4  gt          lt div class  yellow-background  gt          text          lt div class  pull-right  gt right content lt  div gt           lt  div gt        lt  div gt     lt  div gt   lt  div gt    CSS   yellow-background     background  blue      pull-right     background  yellow      A full example can be found on Codepen

User · Answer

Add offset8 to your class  for example    lt div class  offset8  gt aligns to the right lt  div gt

User · Answer

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

User · Answer

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

[html] Align div right in Bootstrap 3

Examples related to html

Examples related to css

Examples related to twitter-bootstrap-3