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.
Since Google seems to like this answer...
If you're looking to match Bootstrap 4's naming convention, i.e. offset-*-#, here's that modification:
.offset-right-12 {
margin-right: 100%;
}
.offset-right-11 {
margin-right: 91.66666667%;
}
.offset-right-10 {
margin-right: 83.33333333%;
}
.offset-right-9 {
margin-right: 75%;
}
.offset-right-8 {
margin-right: 66.66666667%;
}
.offset-right-7 {
margin-right: 58.33333333%;
}
.offset-right-6 {
margin-right: 50%;
}
.offset-right-5 {
margin-right: 41.66666667%;
}
.offset-right-4 {
margin-right: 33.33333333%;
}
.offset-right-3 {
margin-right: 25%;
}
.offset-right-2 {
margin-right: 16.66666667%;
}
.offset-right-1 {
margin-right: 8.33333333%;
}
.offset-right-0 {
margin-right: 0;
}
@media (min-width: 576px) {
.offset-sm-right-12 {
margin-right: 100%;
}
.offset-sm-right-11 {
margin-right: 91.66666667%;
}
.offset-sm-right-10 {
margin-right: 83.33333333%;
}
.offset-sm-right-9 {
margin-right: 75%;
}
.offset-sm-right-8 {
margin-right: 66.66666667%;
}
.offset-sm-right-7 {
margin-right: 58.33333333%;
}
.offset-sm-right-6 {
margin-right: 50%;
}
.offset-sm-right-5 {
margin-right: 41.66666667%;
}
.offset-sm-right-4 {
margin-right: 33.33333333%;
}
.offset-sm-right-3 {
margin-right: 25%;
}
.offset-sm-right-2 {
margin-right: 16.66666667%;
}
.offset-sm-right-1 {
margin-right: 8.33333333%;
}
.offset-sm-right-0 {
margin-right: 0;
}
}
@media (min-width: 768px) {
.offset-md-right-12 {
margin-right: 100%;
}
.offset-md-right-11 {
margin-right: 91.66666667%;
}
.offset-md-right-10 {
margin-right: 83.33333333%;
}
.offset-md-right-9 {
margin-right: 75%;
}
.offset-md-right-8 {
margin-right: 66.66666667%;
}
.offset-md-right-7 {
margin-right: 58.33333333%;
}
.offset-md-right-6 {
margin-right: 50%;
}
.offset-md-right-5 {
margin-right: 41.66666667%;
}
.offset-md-right-4 {
margin-right: 33.33333333%;
}
.offset-md-right-3 {
margin-right: 25%;
}
.offset-md-right-2 {
margin-right: 16.66666667%;
}
.offset-md-right-1 {
margin-right: 8.33333333%;
}
.offset-md-right-0 {
margin-right: 0;
}
}
@media (min-width: 992px) {
.offset-lg-right-12 {
margin-right: 100%;
}
.offset-lg-right-11 {
margin-right: 91.66666667%;
}
.offset-lg-right-10 {
margin-right: 83.33333333%;
}
.offset-lg-right-9 {
margin-right: 75%;
}
.offset-lg-right-8 {
margin-right: 66.66666667%;
}
.offset-lg-right-7 {
margin-right: 58.33333333%;
}
.offset-lg-right-6 {
margin-right: 50%;
}
.offset-lg-right-5 {
margin-right: 41.66666667%;
}
.offset-lg-right-4 {
margin-right: 33.33333333%;
}
.offset-lg-right-3 {
margin-right: 25%;
}
.offset-lg-right-2 {
margin-right: 16.66666667%;
}
.offset-lg-right-1 {
margin-right: 8.33333333%;
}
.offset-lg-right-0 {
margin-right: 0;
}
}
@media (min-width: 1200px) {
.offset-xl-right-12 {
margin-right: 100%;
}
.offset-xl-right-11 {
margin-right: 91.66666667%;
}
.offset-xl-right-10 {
margin-right: 83.33333333%;
}
.offset-xl-right-9 {
margin-right: 75%;
}
.offset-xl-right-8 {
margin-right: 66.66666667%;
}
.offset-xl-right-7 {
margin-right: 58.33333333%;
}
.offset-xl-right-6 {
margin-right: 50%;
}
.offset-xl-right-5 {
margin-right: 41.66666667%;
}
.offset-xl-right-4 {
margin-right: 33.33333333%;
}
.offset-xl-right-3 {
margin-right: 25%;
}
.offset-xl-right-2 {
margin-right: 16.66666667%;
}
.offset-xl-right-1 {
margin-right: 8.33333333%;
}
.offset-xl-right-0 {
margin-right: 0;
}
}
You need to combine multiple classes (col-*-offset-* for left-margin and col-*-pull-* to pull it right)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-3 col-xs-offset-9">
I'm a right column
</div>
<div class="col-xs-3">
We're
</div>
<div class="col-xs-3">
four columns
</div>
<div class="col-xs-3">
using the
</div>
<div class="col-xs-3">
whole row
</div>
<div class="col-xs-3 col-xs-offset-9 col-xs-pull-9">
I'm a left column
</div>
<div class="col-xs-3">
We're
</div>
<div class="col-xs-3">
four columns
</div>
<div class="col-xs-3">
using the
</div>
<div class="col-xs-3">
whole row
</div>
</div>
</div>So you don't need to separate it manually into different rows.
<div class="row col-xs-12">
<nav class="col-xs-12 col-xs-offset-7" aria-label="Page navigation">
<ul class="pagination mt-0">
<li class="page-item">
<div class="form-group">
<div class="input-group">
<input type="text" asp-for="search" class="form-control" placeholder="Search" aria-controls="order-listing" />
<div class="input-group-prepend bg-info">
<input type="submit" value="Search" class="input-group-text bg-transparent">
</div>
</div>
</div>
</li>
</ul>
</nav>
</div>Bootstrap 5 SASS solution:
@mixin make-col-offset-end($size, $columns: $grid-columns) {
$num: divide($size, $columns);
margin-right: if($num == 0, 0, percentage($num));
}
@mixin make-grid-offset-end($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
@each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
@include media-breakpoint-up($breakpoint, $breakpoints) {
@if $columns > 0 {
// `$columns - 1` because offsetting by the width of an entire row isn't possible
@for $i from 0 through ($columns - 1) {
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
.offset-end#{$infix}-#{$i} {
@include make-col-offset-end($i, $columns);
}
}
}
}
}
}
}
@include make-grid-offset-end();
This will give you all of the classes offset already has, but with offset-end (e.g. offset-end-md-2)