0

I'm having some problems with the columns. I supposed to have 5 columns for md and larger devices and 4 for sm and 3 for xs. The thing is that in large screens all my columns are on the left part of the screen. I've been going through my code but can't find out why it's been like this.

Right now it is like this: enter image description here

Essentially I want it to be like this, and preferably centered within each column (without having words stacked on each other): enter image description here

Improve this question
4
  • 1
    show us what u tried (code) Commented Mar 23, 2017 at 9:14
  • Give me one sec, have to remove the bad parts done by partner :) Commented Mar 23, 2017 at 9:17
  • So you having a row around the col-'s. One row has space for 12 col-'s. If you want to have 3 col-'s in xs you can give each div the class col-4 because 12 / 3 = 4. Same principle for sm, but you can't divide 12 by 5 Commented Mar 23, 2017 at 9:18
  • There is no easy way to get 5 centered. full width columns in Bootstrap 3. Commented Mar 23, 2017 at 10:27

1 Answer 1

Reset to default
2

I'm not sure what your code is but I would write it like: Note: you kind of need to do divisions of 12 if you want to the columns to be even. 5 even columns doesn't really work unless you have a offset at either side.

<div class="container-fluid"> <div class="row"> <div class="col-md-offset-1 col-md-2 col-sm-3 col-xs-4">Blue Box</div> <div class="col-md-offset-1 col-md-2 col-sm-3 col-xs-4">Blue Box</div> <div class="col-md-offset-1 col-md-2 col-sm-3 col-xs-4">Blue Box</div> <div class="col-md-offset-1 col-md-2 col-sm-3 col-xs-4">Blue Box</div> <div class="col-md-offset-1 col-md-2 col-sm-3 col-xs-4">Blue Box</div> </div> </div>

I hope this answers your question, let me know if there is anything further you need me to add or clarify.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thing is I'm supposed to hide 1/2 divs for smaller devices
Oh, and somehow with your code the last div is pushed down, any way I can keep it on the same level?
you want to hide the divs on smaller devices? That is bad practice, however, if you do then you would need to use media queries. At what size is it pushed down?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.