Bootstrap grid layout

Question

I have a question about formatting using bootstrap mesh ...
I would like to get an effect similar to the images below, but the only way I can do this is to repeat the layout using visible-xs and hidden-xs . Can this be done using only the boot system?

Mobile phone layout

---

Desktop layout

My code looks like this:

 <div class="container"> <h1>My Schedules</h1> <br> <div class="visible-xs"> <div class="col-xs-4 text-center"> <button type="button" class="btn btn-primary">Trimester 1</button> <br><br> </div> <div class="col-xs-4 text-center"> <button type="button" class="btn btn-primary">Trimester 2</button> <br><br> </div> <div class="col-xs-4 text-center"> <button type="button" class="btn btn-primary">Trimester 3</button> <br><br> </div> </div> <div class="hidden-xs col-sm-2"> <div> <button type="button" class="btn btn-primary">Trimester 1</button> <br><br> </div> <div> <button type="button" class="btn btn-primary">Trimester 2</button> <br><br> </div> <div> <button type="button" class="btn btn-primary">Trimester 3</button> <br><br> </div> </div> <div class="col-xs-12 visible-xs" style="background-color:gray; height:50%;"></div> <div class="col-sm-10 hidden-xs" style="background-color:gray; height:50%;"></div> </div> 

Any help is appreciated!

Answer 1

I would do it like this (I did not test it, but you understood):

 <div class="container"> <div class="row"> <div class="col-md-2"> <div class="row"> <div class="col-xs-4 col-sm-12"> <button type="button" class="btn btn-primary">Trimester 1</button> </div> <div class="col-xs-4 col-sm-12"> <button type="button" class="btn btn-primary">Trimester 2</button> </div> <div class="col-xs-4 col-sm-12"> <button type="button" class="btn btn-primary">Trimester 3</button> </div> </div> </div> <div class="col-md-10"> <!-- Here you put the grey rectangle --> </div> </div> </div> 

Thus, your three trimesters will be displayed on the same line on smaller devices, and the gray rectangle on the other line.

Answer 2

Use the lines, http://getbootstrap.com/css/

Wrap whatever you want, as shown in the grid section in doco, then internally the size using col-offset if necessary

Example:

 <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> 

Each line has 12 intervals, and you can also compensate (see link)

EDIT

bootstrap2 css inserted by mistake, upgraded to BS3

Answer 3

Working setting.

 .headImg, .bodyImg { width: 100%; height: 250px; } h1 { padding: 10px 20px; } .btn-primary { border-radius: 0px; } .vertical-btn { text-align: center; } .btn-group { margin: 0 auto; text-align: center; width: inherit; display: inline-block; } @media (max-width: 768px) { .vertical-btn .btn-group .btn { margin: 10px; display: inline; } h1 { padding: 10px 20px; text-align: center; } } @media (min-width: 768px) { .vertical-btn .btn-group .btn { margin: 10px 0; display: block; width: 100%; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <img src="http://placehold.it/1850x250/444/fff" class="headImg"> <div class="container-fluid"> <div class="row"> <h1>My Schedules</h1> <div class="col-sm-2"> <div class="vertical-btn"> <div class="btn-group"> <button type="button" class="btn btn-primary">Trimester 1</button> <button type="button" class="btn btn-primary">Trimester 2</button> <button type="button" class="btn btn-primary">Trimester 3</button> </div> </div> </div> <div class="col-sm-10"> <img src="http://placehold.it/850x250/444/fff" class="bodyImg" /> </div> </div> </div>