Bootstrap 3 - reduce <div> width for Extra small devices Phones (<768px) properly

Question

With Bootstrap 3 added, there is a code:

<style>
div{
text-align:center;
}
div > div {
border:1px solid green;
    display:inline-block;
}
</style>
<div class="col-xs-6 col-sm-12" style=" border:1px solid red;">
    <div>aaaaaaa text1</div>
    <div>bbbbbbbbbb text2</div>
</div>

or see it in jsFiddle here

The text should centered and be in one line for the width of 768+px and be centered and in two lines (bbbbbbbbbb text2 below aaaaaaa text1) for 767px or less.

Is it possible to do it with pure Twitter Bootstrap classses properly?

I probably should mention that the problem with the code above is that for very very small width the text becomes in four lines (bad!) although the width allows to make it wider. It is needed to be in two lines, not four as much as possible. Also, it stops to be centered for 767-px.

Answer 1

It seems that you actually donot know the power of bootstrap especially col structure

Here is the solution

<style>
@media (max-width: 768px) {
  div{
    text-align:left;
  }
}
div {
  text-align:center
}
</style>
<div class="col-xs-6 col-sm-12" style=" border:1px solid red;">
    <div class="col-xs-12 col-sm-6">aaaaaaa text1</div>
    <div class="col-xs-12 col-sm-6">bbbbbbbbbb text2</div>
</div>

There is no extra style you need for setting the width while using bootstrap !! But for extra customization like text-align:center in 768px+ screen only then you have to write media query, as I wrote above