Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
I've read essential and basic instruction of Bootstrap 4 and I have a question about it :
When we should use .row in our structure. Cause I've seen this and it did not use .row in their code. However basic structure of Bootstrap looks like container(or container-fluid) -> row -> col-*-* . My guess is when we use tables or Jumbotron, we shouldn't use it but I have no idea why. Is there any idea?
When using the grid system (col-*-*) in Bootstrap, you should use rows.
Your example doesn't use the grid system, so rows aren't needed.
The grid system is contains of 12 columns, but if you don't want for example col-6 and col-4 to be on the same row, you should have 2 rows. So you use row to "separate" 2 (or more) grids from together.
You can read more about grids and rows in the docs.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have a small school project where I try to learn using CSS and Tailwind. I need to show my data using a loop in Vue. This data needs to be shown in rows of 3, 2 and 3 in desktop view and all underneath each other in mobile view. When in desktop view it is necessary that all items are the same size and the items of the second row should be centered. I don't know what is the best way to display all items like the image below:
Not purely with Tailwind I believe although its growing so much lately who knows, it might be possible.
The layout is straightforward except for the middle row. For that I added extra margins to force just 2 items on that row, and that would be where your custom css would come in and target those items using :nth-child()
https://codepen.io/clintongreen/pen/gOwmEKY
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I have seen there are lots of workarounds to make Bootstrap to support 5 columns grid, but there isn't a proper explanation why it doesn't support 5 columns in the first place.
Instead of making things work I think it is important to know how the Bootstrap structure works. Does anyone have any idea?
it a simple logic bootstrap grid system equal to 12 column if we divide 12col to 5col so result 2.4 and bootstrap not provide to 2.4 col you have to make your own html or css or search on google i hope it help you
or try it
http://www.wearesicc.com/quick-tips-5-column-layout-with-twitter-bootstrap/
Simply because, Bootstrap follows a 12 column grid system. (and 12%5 !== 0)
You're free to use other grid systems:
here's a list.
Or create your own
If you want, you can have two 1 columns acting as margins, and then with the 10 left, you can have five 2 columns.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Given that CSS components (buttons etc.) can be used apart from Bootstrap grid system, what are the actual advantages of using Bootstrap over CSS flex model?
I am asking this questions as I always have big problems with margin/padding in Bootstrap 3 as few pixels (15px or so) are added, preventing me to take advantage of the full width of a container. Also, if I try to manually sent the margin to 0 the whole layout is displaced (including outer containers)
One current disadvantage of using flex is that it doesn't work for IE9 or earlier. It's probably a bit soon to be dumping them yet.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm using Susy as CSS grid framework and I find that 48 columns gives me alot more control over the design. Most of the time 24 or even 12 columns is more that enough, but for special cases 48 is a bit more convenient.
I've noticed that the web standard seems to be 12, with Bootstrap & Foundation for example. Concerning those I understand that a larger grid would generate alot more css. But since Susy doesn't have that problem, is there another reason for limiting your columns to 12? To me it seems there isn't, but since most people are using 12 columns I can't shake the feeling that I'm missing something.
Nope. That should work fine. Cheers!
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
This may be a silly question, so my apologies in advance.
I'm designing a CSS grid for my website. The overall width of the grid is 1150px divided into 12 columns. But when it comes to the gutter width: It it best to use a small or big width? Or do you choose that depending on how you want your website to look/be styled?
Thanks for any help!
Gutter is a concept independent of CSS and it is related to a better legibility (easier to read).
There is no predefined rule about the width. Just set the whitespace between columns to some value that you want.
This value depends about what you looking for in your website (legibility, structure, design, information architecture ).