CODEWITHSUNDEEP
htmlcsstwitter-bootstraplayout
Aidan Vanleuven
Aidan Vanleuven

Reputation: 85

Bootstrap grid system layout

I have a question about formatting using bootstrap's grid system...
I would like to achieve an effect like the images below, but the only way I can seem to do it is to repeat the layout using visible-xs and hidden-xs. Is it possible to do this using only bootstrap's grid system?

Mobile Layout

enter image description here

Desktop Layout

enter image description here

My code so far 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!

Upvotes: 4

Views: 173

Answers (3)

ElectricSid
ElectricSid

Reputation: 80

I would do it like this (I haven't tested it, but you get the idea):

<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>

This way, your three trimester buttons would appear all in the same row in smaller devices, with the grey rectangle in another row.

Upvotes: 0

vanburen
vanburen

Reputation: 21663

Working setup.

.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>

Upvotes: 0

Daniel Brose
Daniel Brose

Reputation: 1403

Use rows, http://getbootstrap.com/css/

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

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 row has 12 spans, and you can offset too (see link)


EDIT

pasted bootstrap2 css by mistake, updated to BS3

Upvotes: 1

Related Questions