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.
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;
In Bootstrap, must all content- even just a basic block of text placed in the middle of a page for example, be placed inside columns and rows. My website seems to work just fine doing this:
<div class="container-fluid">
<h2>My Heading</h2>
<p>This Is Content On the page</p>
</div>
Yet, I have been told it should be like this:
<div class="container-fluid">
<h2>My Heading</h2>
<div class="row">
<div class="col">I'm content inside the grid</div>
</div>
</div>
Yet, on some of the templates on the bootstrap site itself, they don't always use columns and rows.
I'm really confused...
Thanks
No, not all content needs to be placed in .rows.
.rows and .cols simply provide you with a customizeable grid system (i.e.: number of columns, gutter sizes, responsiveness breakpoints are a few of the things one could customize) aimed at displaying content differently at various page widths. That (and also the division of the row in 12 columns) are what it was designed for.
The only purpose of rows and cols is to divide the space differently at different page widths and to provide some minor padding (gutters). If you don't need that for a part of your content, don't use it. Whenever you have a section which you want displayed according to your own custom rules, you can simply include and style it as you want.
So, for example, this is perfectly valid and can be seen in various Bootstrap examples:
<div class="container">
<div class="row">
<div class="col">
... normal layout cols here
</div>
</div>
<div>
your custom stuff here. you need to provide responsiveness CSS rules for this content.
Out of the box, being a `<div>`, this will fill all the available width
if, for example, it was included in a `.container-fluid`,
it would span the entire browser window, at all screen widths.
</div>
<div class="row">
<div class="col">
... more normal layout here...
</div>
</div>
But whenever you want to use .cols, you should place them as direct children of .rows. If you do not, you will see some nasty horizontal scrollbars across your content, because the grid has a system of negative margins and (positive) padding to cater for gutters at various width sizes.
With this basic example everything works fine, especially when the heading is centered. Using different approach for Bootstrap grid is usually not a good idea.
From Bootstrap docs:
In a grid layout, content must be placed within columns and only
columns may be immediate children of rows.
As alignment problems will occur in the long run.
Secondly when you start using SASS with Bootstrap and change grid variables then everything stays aligned and is controlled from
one place.
In your example if you want to align the heading you need to add a margin-left so that is would be aligned with I'm content inside the grid.
Look at this example how everything is aligning with and without rows/columns: https://codepen.io/LaCertosus/pen/KKKzVqR
<div class="container-fluid mt-5">
<div class="row">
<div class="col">
This text is inside <b>row</b> and <b>col</b>
</div>
</div>
<div class="row">
This text is only inside <b>row</b>
</div>
<div class="col">
This text is only inside <b>col</b>
</div>
<div>
This text is only <b>container</b>
</div>
</div>
<div>
This text is outside <b>container</b>
</div>
It is the right question to ask why I have to generate so much boilerplate but it will come out in the long run when elements need to align and scale in different screen sizes.
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.
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.
I need to make my bootstrap column span the full height of a row. The issue i am having is that I cannot get it to change size.
currently my HTML looks like this
<div class="container">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-11">
<!-- Content removed for demo | large form here -->
</div>
</div>
</div>
The col-sm-11 contains a form which is x height (around 400/500px)
the col-sm-1 contains no content but I want to make it 100% height so it matches the form next to it. How do I go about doing this
Attempts
I have tried applying height 100% to that column but it remains the same.
I have also tried setting a static amount like 300px but this just pushes the form down. and i need it to be 100% anyway
The easiest way I can think of for you to do this is to use one line of jQuery, if possible.
Add a class, two separate ones, to each of your two columns.
<div class="col-sm-1 col1">
</div>
<div class="col-sm-11 col2">
</div>
In jQuery, simply add this line of code at the top of your $(document).ready(function() {...});
$('.col1').height($('.col2').height());
Here is a JSFiddle
Note: I made your col-sm's col-xs's so that you could see it in JSFiddle without resizing.
Note #2: You may want to put the line of jQuery inside of a $(window).resize(function() {...}); so that it changes with the responsiveness.