CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Vishnu
Vishnu

Reputation: 2452

Full width two column layout in bootsrap 3 for mobile

I want two column in mobile layout

<div class="row">
    <div class="col-md-2">
        <div class="btn-group-vertical">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
            <button type="button" class="btn btn-default">3</button>
        </div>
    </div>
    <div class="col-md-10    well">Main content</div>
</div>

Here is fiddle http://jsfiddle.net/52VtD/10168/

What I tried 

@media screen and (min-width: 768px) {

.row{

 width: 100%;

} 
}

Right now 2nd columns comes under the first column in mobile

Upvotes: 1

Views: 158

Answers (4)

Sunil Shivalkar
Sunil Shivalkar

Reputation: 220

Try this
<div class="row">
    <div class="col-md-2 col-xs-2 col-sm-2">
        <div class="btn-group-vertical">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
            <button type="button" class="btn btn-default">3</button>
        </div>
    </div>
    <div class="col-md-10 col-xs-10 col-sm-10   well">Main content</div>
</div>

Upvotes: 2

GuyH
GuyH

Reputation: 796

Change those classes to col-xs-2 on the first column, and col-xs-10 on the second column, and it will work for all sizes of screen.

The reason your original code didn't work is because specifying col-md-2 and col-md-10 only gives you two columns for medium size screens (md) and larger. The mobile has been left to the Bootstrap default for small screen mobiles, which is to stack the columns above each other. Bootstrap column classes work from small to large in order, so md only covers medium and large.

Upvotes: 1

Kangcor
Kangcor

Reputation: 1189

If you don't want that 'big gap' use something like nav-pills justified

example

<div class="row">
<div class="col-xs-2">
    <ul class="nav nav-pills nav-justified">
        <li type="button" class="btn btn-default">1</li>
        <li type="button" class="btn btn-default">2</li>
        <li type="button" class="btn btn-default">3</li>
    </ul>
</div>
<div class="col-xs-10">
    <div class="well">Main content</div>
</div>

Upvotes: 2

Daniel Stackenland
Daniel Stackenland

Reputation: 3239

Add classes for different sizes:

 <div class="row">
    <div class="col-md-2  col-sm-2 col-xs-2">
        <div class="btn-group-vertical">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
            <button type="button" class="btn btn-default">3</button>
        </div>
    </div>
    <div class="col-md-10 col-sm-10 col-xs-10    well">Main content</div>
</div>

Upvotes: 2

Related Questions