How to have 5 columns on desktop and 1 on phone

[JamiePattison]

I have some code which i’ve copied at https://codepen.io/anon/pen/eQLmQL

What im trying to do is have 5 columns across on a desktop, and 1 (maybe 2 at a later date) on a mobile phone. I read some articles and to me it seems the code is correct (the cols add up to 12 but even having them set to 2 each it displays 1 column as you can tell).

Could anyone guide me as im pretty new with CSS/Bootstrap

[Beverleyh]

but even having them set to 2 each it displays 1 column

Works as expected when the Bootstrap library is included in the pen settings. Dont forget that you have to link to Bootstrap in order to use it. You can refer to the basic template demo at the official docs link below for guidance.

Could anyone guide me as im pretty new with CSS/Bootstrap

The Bootstrap docs are pretty comprehensive https://getbootstrap.com/docs/3.3/getting-started/ but if you need further help, try Googling “bootstrap start guide” for other tutorials and walkthroughs.

[JamiePattison]

I added the bootstrap CDNs which shows the columns as expected, however this disrupts the website style (i downloaded a free template https://html5up.net/future-imperfect should you want to see the site).

Removing the .css reference(s) from the link you provided, then reverts back to the original problem. Anything i can do about this?

[Beverleyh]

It looks like you have 2 options;

1. Don’t use Bootstrap and modify/code your own in-page layout for the template you have.

OR

1. Use Bootstrap and modify the styles of the template so that it behave more like you want.

Option 1 will be easier.

5 columns across on a desktop

You can do this easily with flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You could also do it with floats (float property), or inline-blocks or CSS tables (display property) too. Learn more about layout here http://learnlayout.com/

and 1 (maybe 2 at a later date) on a mobile phone.

You can use “media queries” to switch the layout at whatever threshold you choose. Google that term to begin your research.

Good luck with your project.

[Author]

Posts