Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3 offset on right not left

In regards to BS 3 if I wanted just a narrow column of content on the right I might use an offset class of 9 and a column of 3.

However, what if I wanted the reverse and on the left side? Is there a proper way to do this in BS or should I just use my own CSS methods? I was thinking of creating a column of 3 with my content and just an empty column of 9.

like image 673
Work-Together2013 Avatar asked Dec 12 '13 02:12

Work-Together2013


People also ask

What is offset 3 in Bootstrap?

offset-md-3 which will offset the desired column element with 3 columns to the right from its default position on medium screen sizes and above. . offset classes always shifts its content to the right. This all stuff produced results .

How do I offset in Bootstrap?

An offset is used to push columns over for more spacing. To use offsets on large displays, use the . col-md-offset-* classes.

What is XS SM MD lg in Bootstrap?

The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide)


1 Answers

Bootstrap rows always contain their floats and create new lines. You don't need to worry about filling blank columns, just make sure they don't add up to more than 12.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">    <div class="container">    <div class="row">      <div class="col-xs-3 col-xs-offset-9">        I'm a right column of 3      </div>    </div>    <div class="row">      <div class="col-xs-3">        I'm a left column of 3      </div>    </div>    <div class="panel panel-default">      <div class="panel-body">        And I'm some content below both columns      </div>    </div>  </div>
like image 92
Ross Allen Avatar answered Oct 08 '22 01:10

Ross Allen