I am trying to create a simple grid, currently with one row and seven columns. Each column consists of a div containing one letter of text. I want these columns to space evenly out across the page, as is meant to be the default behaviour, but they are all bunched up on the left. Setting the row's width to 100% with an id doesn't help. Any help would be appreciated.
<div class="row">
<div class="column positive-bg stable" ng-repeat="i in [1,2,3,4,5,6,7]">M</div>
</div>
Use col instead column class.
<div class="row">
<div class="col positive-bg stable" ng-repeat="i in [1,2,3,4,5,6,7]">M</div>
</div>
More about Ionic Grid.
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;
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.
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.
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.