CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmobile-devices
Haradzieniec
Haradzieniec

Reputation: 9340

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

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.

Upvotes: 0

Views: 1427

Answers (2)

Junaid S.
Junaid S.

Reputation: 2642

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

Upvotes: 2

Maky
Maky

Reputation: 521

There is a class in bootstrap 3 for that. It's the col-xs class. See this reference Bootstrap media queries

You need 2 divs in 2 lines when the screen is below 768px. For these two 2 divs add class col-xs-12 and text-center class. Also you will have to add an additional col-sm-6 class when the div is larger (and maybe col-md col-lg classes for higher screens depends how you want to show them.) This is the fiddle

Upvotes: -1

Related Questions