Article Push/Pull Alignment Using Bootstrap 3

Article push/pull alignment using bootstrap 3

Based on Possible to achieve this Mobile/Desktop layout using Bootstrap? (or other grid)

css:

.floatright{float:right;}
@media (max-width: 768px)
{    
    .floatright{float:none;}
}  

html:

<div class="container" style="background-color:green">
<article class="row">
    <header class="col-md-8 floatright">
        <a href="#">
            <h2>Title</h2>
        </a>
    </header>
    <div class="col-md-4">
        <figure>
            <a class="thumbnail" href="#">
        <img src="..." alt="4x3 Image" class="img-responsive">
                <figcaption>Caption</figcaption>
            </a>
        </figure>
    </div>
    <div class="col-md-8 floatright">
        <p>Content</p>
    </div>
</article>
</div>

Bootstrap 3 pull-right class pushing out of row

Add proper container/container-fluid class and row class.
When you are nesting columns inside column add div with row class.

Your button's padding is creating issue as it take some space and get collapsed down on small viewport.

Try to use col-xs-2 if there is not any issue with your requirement.

I have made changes to your code using css and mediaqueries.
This will help you

JSfiddle Complete Solution

<div class="container">
<div class="row">      <div class="col-xs-1 vertical-center col-padding-left5">        <button class="btn btn-link padding0 ">          <i class="fa fa-2x fa-trash text-red small-font"></i>        </button>      </div>            <div class="col-xs-10">                <div class="row">          <div class="col-lg-8 no-padding">            <label>Some input</label><br>            <input class="form-control no-padding">          </div>          <div class="col-xs-4">            <label>And</label><br>            <input type="number" class="form-control">          </div>          <div class="col-xs-8">            <label>More Input</label><br>            <input class="form-control">          </div>          <div class="col-lg-8 no-padding">            <label>Some input</label><br>            <input class="form-control no-padding">          </div>          <div class="col-xs-4">            <label>And</label><br>            <input type="number" class="form-control">          </div>          <div class="col-xs-8">            <label>More Input</label><br>            <input class="form-control">          </div>        </div>              </div>              <div class="col-xs-1 vertical-center col-padding-right5">        <button class="btn btn-link padding0 " data-ember-action="1284">          <i class="fa fa-2x fa-check text-green small-font"></i>        </button>      </div>    </div></div>

Bootstrap 3: pull-right for col-lg only

You could put "element 2" in a smaller column (ie: col-2) and then use push on larger screens only:

<div class="row">
    <div class="col-lg-6 col-xs-6">elements 1</div>
    <div class="col-lg-6 col-xs-6">
      <div class="row">
       <div class="col-lg-2 col-lg-push-10 col-md-2 col-md-push-0 col-sm-2 col-sm-push-0 col-xs-2 col-xs-push-0">
         <div class="pull-right">elements 2</div>
       </div>
      </div>
    </div>
</div>

Demo: http://bootply.com/88095

Another option is to override the float of .pull-right using a @media query..

@media (max-width: 1200px) {
    .row .col-lg-6 > .pull-right {
        float: none !important;
    }
}

Lastly, another option is to create your own .pull-right-lg CSS class..

@media (min-width: 1200px) {
    .pull-right-lg {
        float: right;
    }
}

UPDATE

Bootstrap 4 includes responsive floats, so in this case you'd just use float-lg-right.
No extra CSS is needed.

Bootstrap 4 Demo

Pull / Push in bootstrap 3.x.x grid system

You had a slight mismatch of form-group elements. I've tidied them up and simplified the col-* classes too:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">  <div class="row">    <div class="form-group col-xs-6 col-md-3">      <label>Username ID</label>      <input type="text" class="form-control" name="username_id" />    </div>    <div class="form-group col-xs-6 col-md-3">      <label>Full Name</label>      <input type="text" class="form-control" name="full_name" />    </div>    <div class="form-group col-xs-6 col-md-3">      <label>Member Status</label>      <input type="text" class="form-control" name="member_status" />    </div>    <div class="form-group col-xs-6 col-md-3">      <label>Phone Number</label>      <input type="text" class="form-control" name="phone_number_mobile" />    </div>    <div class="form-group col-xs-6 col-md-3">      <label>Address / State</label>      <input type="text" class="form-control" name="address_city_state" />    </div>    <div class="form-group col-xs-6 col-md-3">      <label>Registered Date</label>      <input type="text" class="form-control" name="dt_added" />    </div>  </div></div>

Bootstrap 3 Footer Text Alignment Based on Grid Size

This can be done with using the existing media queries in Bootstrap. Since v.3 is mobile first, I would make all the content centered first, and then on the next larger media query (768) add styles to the elements that need to be left and right aligned. I have edited your code a little as well:

HTML

<footer>
 <div class="container">
   <div class="row">     
     <div class="col-sm-4  ">
       <a href="#"><img src="http://www.kissingerassoc.com/images/1.gif" class="img-responsive center-to-left"/></a>
       <br>
       <br>
    <div class="small center-to-left ">© 2013 Company, Inc.</div>
   </div>

    <div class="col-sm-4">
         <div class="text-center">
           <p><a href="#">Host Company, Inc.</a><br>
            <a href="#">Terms of Use</a> | <a href="#">Privacy Policy</a></p>
           <p>social media icons</p>
         </div>
     </div>

     <div class="col-sm-4 ">
        <span class="center-to-right">
       <button type="button" class="btn btn-default btn-sm">
       <span class="glyphicon glyphicon-bullhorn"></span><br>
       Feedback
       </button>
     </span>
     </div>
 </div>
 </div>
</footer>

CSS

.center-to-left {
 display: block;
 margin-right: auto;
 margin-left: auto;
 text-align: center;
 }

.center-to-right {
 display: block;
 margin-right: auto;
 margin-left: auto;
 text-align: center;
 }

@media (min-width: 768px) {

.center-to-left {
 text-align: left;
 float: left;
 }

.center-to-right {
 float: right;
 text-align: right;
 }

}

Bootstrap - Using Push/Pull with col-12?

You reverse things! You write your base code to be 2,1,3 then you push pull it until it looks the way you want it on a bigger screen.

That's the whole mobile first thing.

<div class="row">
  <div class="col-md-4 col-sm-4 col-md-push-4">2</div> <!-- Push Column -->
  <div class="col-md-4 col-sm-4 col-md-pull-4">1</div> <!-- Pull Column -->
  <div class="col-md-4 col-sm-4">3</div>
</div>

Fiddle

This breaks above md but you get the idea

Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3

This answer is in three parts, see below for the official release (v3 and v4)

I couldn't even find the col-lg-push-x or pull classes in the original files for RC1 i downloaded, so check your bootstrap.css file. hopefully this is something they will sort out in RC2.

anyways, the col-push-* and pull classes did exist and this will suit your needs. Here is a demo

<div class="row">
    <div class="col-sm-5 col-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

EDIT: BELOW IS THE ANSWER FOR THE OFFICIAL RELEASE v3.0

Also see This blog post on the subject

• col-vp-push-x = push the column to the right by x number of columns, starting from where the column would normally render -> position: relative, on a vp or larger view-port.

• col-vp-pull-x = pull the column to the left by x number of columns, starting from where the column would normally render -> position: relative, on a vp or larger view-port.

  vp = xs, sm, md, or lg

  x = 1 thru 12

I think what messes most people up, is that you need to change the order of the columns in your HTML markup (in the example below, B comes before A), and that it only does the pushing or pulling on view-ports that are greater than or equal to what was specified. i.e. col-sm-push-5 will only push 5 columns on sm view-ports or greater. This is because Bootstrap is a "mobile first" framework, so your HTML should reflect the mobile version of your site. The Pushing and Pulling are then done on the larger screens.

• (Desktop) Larger view-ports get pushed and pulled.
• (Mobile) Smaller view-ports render in normal order.

DEMO

<div class="row">
    <div class="col-sm-5 col-sm-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-sm-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

View-port >= sm

|A|B|C|

View-port < sm

|B|
|A|
|C|

EDIT: BELOW IS THE ANSWER FOR v4.0

With v4 comes flexbox and other changes to the grid system and the push\pull classes have been removed in favor of using flexbox ordering.

• Use .order-* classes to control visual order (where * = 1 thru 12)
• This can also be grid tier specific .order-md-*
• Also .order-first (-1) and .order-last (13) avalable

<div class="row">  <div class="col order-2">1st yet 2nd</div>  <div class="col order-1">2nd yet 1st</div></div>