1

I'm trying to make an advent calendar using Bootstrap 3.3.7 similar to the one here http://2015.itsashapechristmas.co.uk/

The markup I'm using is 

<div class="container">

      <div class="row grid">
          <div class="col-md-2 grid-item">1</div>
          <div class="col-md-2 grid-item">2</div>
          <div class="col-md-2 grid-item">3</div>
          <div class="col-md-2 grid-item">4</div>
          <div class="col-md-2 grid-item">5</div>
          <div class="col-md-2 grid-item">6</div>
      </div>

      <!-- Repeat --> 

</div>

Where I've put <!-- Repeat --> I'm using similar columns of 6 numbers inside .col-md-2

I wanted to make the numbers appear centered and square (as per the example link) so used this:

.grid {
    font-size: 48px;
}
.grid-item {
    padding: 60px;
    text-align: center;
}

Ideally I wanted this to collapse into smaller columns when the viewport is resized, but at the breakpoint for .col-md-2 it just collapses into a single column.

Am I doing this the correct way or are there better ways to achieve this?

Andy
  • 5,142
  • 11
  • 58
  • 131

1 Answers1

1

You need to add more classes to your div. Something like col-xs-6 which would give you 2 equal columns on the extra small viewport and col-sm-4which would give you three equal columns on small viewports.

Have a read on http://getbootstrap.com/css/#grid

A1raa
  • 605
  • 1
  • 7
  • 22
  • So just chaining them like this `col-md-2 col-xs-4 col-sm-6 ` ? – Andy Nov 24 '16 at 14:15
  • Yes, exactly. `
    6
    `     – A1raa Nov 24 '16 at 14:16
  • That works. Is the `.grid-item` CSS I've used the best way to get the numbers centered in a square-like pattern? – Andy Nov 24 '16 at 14:28
  • That's a whole other question and I don't want to go too off topic. You can use `text-align: center;` to align horizontally and there is a great post [here](http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div) on Stack Overflow for aligning text vertically. – A1raa Nov 24 '16 at 14:46