I'm new to coding and tried to build a small responsive website with Spectre.css.
I want 3 cards in a row and if the viewport gets too small, they should go in the next row.
Currently they just shrink but don't go in the next row.
Spectre.css provides media queries but I'm not sure how to actually use the provided structure...
See Flexbox Grid and Responsive
Tried to figure it out myself but... mhhh :D
<div class="container grid-xl">
<div class="columns">
<div class="card column col-3"></div>
<div class="card column col-3"></div>
<div class="card column col-3"></div>
</div>
</div>
I've found the answer myself.
Instead of adding only col-3 I had to add more than one argument.
Like col-3 col-3 col-md-5 col-sm-11 to make the line breaks.
Sounds logic...
Now it works as intended.
Related
I am currently trying to learn the Bootstrap grid system. I have the following html code that attempts to simply make a row with three columns:
<body>
<div class="container">
<div class="row">
<div class="col-4">
left column
</div>
<div class="col-4">
middle column
</div>
<div class="col-4">
right column
</div>
</div>
</div>
I believe this should just create three columns that align horizontally (fill up the same row), however, in Chrome, they stack vertically. Anyone know why?
Maybe a silly reply but have you checked that you have the css file correctly coming through?
row is automatically flex and col-4 is correct for 3 wide.
I cannot help but think the css file is in place.
Open up inspect element on the row element and you should see css like:
display:flex;
This isn't exactly a "problem" I'm trying to solve, just something I've noticed about bootstrap columns when I work with them.
It seems that bootstrap's "scaffolding" sizes "reset" somehow when I put a column inside a column.
For example:
Let's say I have a col-md-9, and I want two columns inside of it, which together span the entire width of the "parent" column.
I would have thought that I would set the width of the two columns at 4.5 (col-md-4.5), but when I do this, the two smaller columns behave as though they are nested inside a col-md-12... In other words, they fill up 3/4ths of the col-md-9, not 100%. If I give them the class of col-md-6, they will together span the whole width of their parent (col-md-9).
Here is a visual representation of what this would looks/behave like:
Again, this isn't really a 'problem' that I need solved per se, just something I was curious about because it seems to conflict with what I've read in a lot of bootstrap documentation.
First things first - there is no col-md-4.5 unless you've made your own custom CSS class for that. But perhaps you did something like col-md-4 and then a col-md-5 to add to a total of 9 and saw the results that you observed.
When I first started learning bootstrap I was baffled because I would do similar things with their grid system. If I had a col-md-9 then I expected that the children could never exceed 9. My elements were never positioned right. Then I learned how it really works.
Basically you can think of the children of an col-*-* as "resetting" themselves, or in other words they always will add up to 12 even if their parent is a col-xs-6 (or whatever else).
Here is a fiddle I have made.
The code for the fiddle is here:
<div class="container">
<div class="col-xs-12 red-outline">
<div class="col-xs-4 blue-outline">
col-xs-4
</div>
<div class="col-xs-5 blue-outline">
col-xs-5 for a total of 9
</div>
</div>
</div>
<div class="container padding">
<div class="col-xs-12 red-outline">
<div class="col-xs-6 green-outline">
col-xs-6
</div>
<div class="col-xs-6 green-outline">
col-xs-6 for a total of 12
</div>
</div>
</div>
<div class="container padding">
<div class="col-xs-12 red-outline">
<div class="col-xs-6 green-outline">
<div class="col-xs-3 black-outline">
3
</div>
<div class="col-xs-3 black-outline">
3
</div>
</div>
<div class="col-xs-6 green-outline">
<div class="col-xs-6 black-outline">
6
</div>
<div class="col-xs-6 black-outline">
6
</div>
</div>
</div>
</div>
What you can see when you run this fiddle is the red top bar represents the parent col-xs-12. In the first example, the blue add's up to 9, and doesn't take up the full width.
You can see in my second example the green add's up to 12, and does take up the full width.
Now for the third example we have some serious inception stuff going on. We have a col-xs-12 and then the two green col-xs-6's and then on the left hand side we have two col-xs-3's which add up to 6 (and as you can see, they do not take up the full width). On the right hand side we have the two col-xs-6's inside of a col-xs-6 which is inside of a col-xs-12. It's a bit of a mind bender, but just understand that you should have everything add up to 12, and not add up to whatever width the parent is.
I'm currently working with bootstrap, but there's just a few things that confuse me about the grid management.
In this case, my grid structure tends to go (as an example)..
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="homeBox">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="homeBox">
</div>
</div>
</div>
</div>
</div>
(Apologies for poor formatting)
This works fine for full width elements (col-xs-12), however if i'm trying to have two elements next to each other (col-xs-6) with a row before adding the content, they simply touch each other in the middle, and if adding a background it makes it seem like one element. Here's a JFiddle showing what I mean. If i was to add a row before the homebox, it makes them touch. I can also just not add a row after the col-xs-x, but then it won't align correctly to the other full width elements on the page.
In sites I'm working on, I workaround this by adding a 'leftRow/rightRow' class for small devices onwards, but this seems a bit of a bodged way of doing it.
What's the correct way to approach this?
Cheers.
http://www.razaprinters.com/bootstrap.html
Hi I have made this page using bootstrap it is working fine on Desktops i am mostly using classes like col-xs-4 or 12 but when i open my website on a cellphone it is not optimizing things are behaving awkwardly like the about us divs goes all the way up and etc. any help with the code will be helpful i am not posting the code as you can go to inspect element or view source code to access it.
In order for bootstrap to "work" you should put your columns inside container and row classes.
<div class="container">
<div class="row">
<div class="col-xs-12"></div>
</div>
</div>
For more information go here Bootstrap Grid System
Container is a parent to content you want to style, it can have multiple rows inside. A row is sort of horizontal group (like a row in a table). Rows have 12 columns, but you can apply different widths to elements to target different views (dektop, mobile) depending on screen width. You need a row element if you want columns to work. For instance if you use:
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>
</div>
Then this will take 50% width (it will be on the left) of parent .container element on larger screens and 100% width of parent .container on smaller screens. Hope that clarifies something. I really recommend reading Bootstrap documentation - it's short and simple.
I am creating a website in bootstrap. I need to make a right hand side column makes a big serial number 4. When I fill the column height make the big simultaneously space is come out the between the serial no 3 and 6.
How can I solve the problem?
<div class="col-md-3">content goes here</div>
<div class="col-md-3">content</div>
<div class="col-md-3">content</div>
<div class="col-md-3">BIG COLUM</div>
<div class="col-md-3">content</div>
<div class="col-md-3">content</div>
<div class="col-md-3">content</div>
Example
The only other thing I can think of is to use: on your vertical column. Check out this link http://getbootstrap.com/css/#grid-options
Check out the offset column section as well.
Remember to wrap your page in a <div class="container", then wrap it in a <div class="row"... also remember that the grid width is only 12 wide, so you have to many divs as col-md-3, you can use only four.