CODEWITHSUNDEEP
twitter-bootstrapresponsive-designtwitter-bootstrap-3
Vikas Raturi
Vikas Raturi

Reputation: 926

Stacking Bootstrap Columns over each other

I am using Bootstrap v3 to develop my interface.
I use following snippet: 

    <div class="row">
        <div class="col-sm-4 col-xs-4">
            <h1>Hello...!</h1>
            <p>Para 1</p>
        </div>
        <div class="col-sm-8 col-xs-8">
            <h1>new div</h1>
            <p>Para 2</p>
        </div>
    </div>

However, when I decrease the size(width) of browser, the columns get smaller and smaller.
I want that, after a certain limit or min-width, the divs must stack over one another instead of getting smaller.

Upvotes: 8

Views: 30143

Answers (3)

Surendra Bobba
Surendra Bobba

Reputation: 476

Follow this link for exact sizes of columns/grids for xs, and sm, http://getbootstrap.com/css/#grid-example-mixed You are using a custom width functionality by using

   <div class="col-sm-4 col-xs-4" >

This gives custom width based on the device size. Instead for the columns to get stacked over by default just use this

   <div class="col-md-4">

instead of xs(xtra small) and sm(small size), use medium size as default, bootstrap will do the rest of your work. And another thing, there is also two different size for your columns(4 and 8), the view would be irregular. And another thing, if you want to continue using custom sizes for columns instead of my method, remember this : xs-4 is different as sm-4

Upvotes: 11

Carol Skelly
Carol Skelly

Reputation: 362290

Just remove the non-stacking 'col-xs-*' grid class..

<div class="row">
  <div class="col-sm-4">
    <h1>Hello...!</h1>
    <p>Para 1</p>
  </div>
  <div class="col-sm-8">
    <h1>new div</h1>
    <p>Para 2</p>
  </div>
</div>

Demo: http://bootply.com/92512

Upvotes: 1

BobDroid
BobDroid

Reputation: 1898

In bootstrap-3 "Class prefix" represents as follows:

.col-xs - Extra small devices - Phones (<768px)

.col-sm - Small devices - Tablets (≥768px)

.col-md - Medium devices - Desktops (≥992px)

.col-lg - Large devices Desktops (≥1200px)

In your coding (you are asking for desktop version i think so...) you have to remove class="col-sm-8 col-xs-8" and add class="col-md-8 col-lg-8"

the above code results, div over one another instead of getting smaller as you need.

Upvotes: 1

Related Questions