CODEWITHSUNDEEP
csstwitter-bootstrap
William
William

Reputation: 4588

Bootstrap - How to set middle column element to render full width on mobile and browser collapse

Using bootstrap, I have this code:

 <div class="container">

            <div class="row">
                <div class="col-xs-6 col-xs-offset-3">
                    <h2>How to Enjoy Eating Bugs <small>3/6/2015</small></h2>
                    <p> I eat bugs for a living...yum!, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.scing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
                </div>
            </div>
 </div>

The output when the page is displayed on desktop is perfect.

enter image description here

When I collapse the page the render does not look the way I want and looks like this:

enter image description here

When the page is collapsed I want the render to look like this:

enter image description here

I could experiment with media queries to accomplish this but I assume there is probably a simpler "bootstrap" way solve the problem. Please answer with minimal example code if possible.

Upvotes: 1

Views: 345

Answers (3)

slander
slander

Reputation: 111

change the classes to col-md-6 col-md-offset-3

It should go full width when the screen size is under bootstrap's definition of medium (992px)

Upvotes: 1

mrjoltcola
mrjoltcola

Reputation: 20852

If you have only 2 modes that you want to support, then Stephen Lander's answer is the elegant solution:

https://stackoverflow.com/a/43876855/257090

However, if you want to be explicit, or if you have more than 2 modes, you can set distinct offset/widths for each screen size so the offset will upshift/downshift with device size.

As the size shrinks, you will want to reduce or eliminate the offset, ie. only use offset on the md or lg styles.

<div class="col-lg-6 col-lg-offset-3 col-md-7 col-md-offset-2 col-xs-12 col-xs-offset-0">

</div>

Upvotes: 0

Becks
Becks

Reputation: 468

This should be what you are looking for:

<div class="col-xs-6 col-xs-offset-3 col-md-12 col-md-offset-0">

You can change md with lg or xl.

For more info about bootstrap grid system I suggest you to look here, it's full of useful examples

Upvotes: 0

Related Questions