CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Jacob Stamm
Jacob Stamm

Reputation: 1873

Center contents of Bootstrap row, but justify when column

I'd like to know if there's a way in Bootstrap to have the contents of a col-* element within a row to be aligned left or right when arranged as columns, but for the contents to be aligned center when arranged as rows.

For example, take this simple row:

<div class="row">
    <div class="col-sm-8">
        Lorem ipsum
    </div>
    <div class="col-sm-4">
        Lorem ipsum
    </div>
</div>

When displayed as columns, the contents of each div should be aligned left and aligned right, respectively. But when viewed as rows in a smaller view port, they should be centered.

Upvotes: 2

Views: 1554

Answers (3)

partypete25
partypete25

Reputation: 4413

There isn't an out-of-the-box predefined solution using bootstrap. Bootstrap does have alignment classes but they aren't designed to change across breakpoints the same way their grid/column classes are. That said you can do it yourself using media queries.

.custom-align-left,
.custom-align-right {
  text-align:center;
}

// this is when col-sm comes into play
@media(min-width:768px){
 .custom-align-left {
   text-align:left;
 }
 .custom-align-right {
   text-align:right;
 }
}

<div class="row">
    <div class="col-sm-8 custom-align-left">
        Lorem ipsum
    </div>
    <div class="col-sm-4 custom-align-right">
        Lorem ipsum
    </div>
</div>

Upvotes: 2

A.Rowan
A.Rowan

Reputation: 1759

To get the effect shown below, you need to edit / override the standard bootstrap settings in the bootstrap.(min).css file.

<div class="row">
*centered text*
<div class="col-sm-8">
    *left/right aligned text*
</div>
<div class="col-sm-4">
    *left/right aligned text*
</div>

The .col-* part: The standard .col-xx-xx items are all floated left by bootstrap directly.

You can add a .col-*{ float: right;} to your personal .css file. But then you need to ensure your include statement is after the bootstrap.css listing. (Best Option)

Or you could directly edit your bootstrap.(min).css file.

Or you can just use brute force in your own .css file by adding the "!important" as shown.

Or you can break all the rules and just put a style="text-align:right !important" statement in whatever tag you want. But this is awful.

from CSS Tricks

https://css-tricks.com/when-using-important-is-the-right-choice/

The .row Part:

Bootstrap doesn't have anything for alignment in there for just .row classes. As such you should find it much easier for your .css elements to take effect.

Add a .row {text-align:center;} to your included .css file.

Upvotes: 1

Ismail RBOUH
Ismail RBOUH

Reputation: 10470

You can use media queries as follow:

.text-center-xs {
    text-align: center;
}    
.text-left-xs {
    text-align: left;
}    
.text-right-xs {
    text-align: right;
}


/* Small devices (tablets, 768px and up) */    
@media (min-width: 768px) {
    .text-center-sm {
        text-align: center;
    }
    .text-left-sm {
        text-align: left;
    }
    .text-right-sm {
        text-align: right;
    }
}


/* Medium devices (desktops, 992px and up) */    
@media (min-width: 992px) {
    .text-center-md {
        text-align: center;
    }
    .text-left-md {
        text-align: left;
    }
    .text-right-md {
        text-align: right;
    }
}


/* Large devices (large desktops, 1200px and up) */    
@media (min-width: 1200px) {
    .text-center-lg {
        text-align: center;
    }
    .text-left-lg {
        text-align: left;
    }
    .text-right-lg {
        text-align: right;
    }
}

Then:

<div class="row">
    <div class="col-sm-8 text-center-xs text-left-sm">
        Lorem ipsum
    </div>
    <div class="col-sm-4 text-center-xs text-right-sm">
        Lorem ipsum
    </div>
</div>

Demo : https://jsfiddle.net/iRbouh/5qkr7c5o/ (try to resize the output to see the result !)

I hope this will help you.

Upvotes: 2

Related Questions