Is it ok to use col class inside col class in bootstrap? - html

I want to draw a line below a paragraph with hr element. The propbelem is that the p element has 15px padding in bootstrap but the hr element spans to the full available width. The line below the paragraph extends 15px left and 15 right to the paragraph's width. So I just did the following:
<div class="row">
<div class="col-lg-12 text-justify">
<p>
Some text is here.
</p>
</div>
<div class="row">
<div class="col-lg-12"> <div class="col-lg-12"><hr></div></div>
</div>
I nested col-lg-12 directly inside col-lg-12. But in bootstrap we ought to nest .col inside .row classes. So is it okay use col class inside col class here?

No. It's not a Bootstrap best practice since as you mentioned col should be inside row.. The effect will be extra spacing on the left and right side of the inner col. The inner columns will wrap and not layout horizontally as expected.
"content must be placed within columns and only columns may be
immediate children of rows"

Related

Place static <div> next to <div> with bootstrap grid width

On my webpage, I have a div element on the left with a static width of 300px. Right next to it, on the right, I want to display another element which has a dynamic, flexible width (because the browser window could be resized by the user) by using the Bootstrap grid with col-12. Imagine this:
<div class="row">
<div style="width:300px;"></div>
<div class="col-12"></div>
</div>
The div with class="col-12" should be right next to the left div, without space in between of them, and it should be growing/flexing always to the right of the window.
Unfortunately, it seems not to work, having a static px-width on the left element, and on the right an flex element with col-12. The second div is always BELOW the first div. Do you know a solution? Thanks in advance!
Try giving the second div in the row the class "col".
<div class="row">
<div style="width:300px;"></div>
<div class="col"></div>
</div>
Regards!

Bootstrap 4 - Multi row cards are not responsive correctly

I'm trying to make my cards row responsive with some margin but when I apply margin:5px; to my cards, the row overflows. They are not aligned at the center correctly. There is some space left on the right side of the cards. How can I make them aligned at the center properly?
Here is my HTML and CSS:
http://codepen.io/reklamarsiv/pen/vgPLLv
You need to put the padding and margin inside of the col-* tags. Create a div inside with the class of card instead of putting the class of card in the same div.
<div class="col-xs-12 col-md-6 col-lg-3">
<div class="card">
// contents of card...
</div>
</div>
Updated codepen: http://codepen.io/anon/pen/rjRpQd

Empty div ignored for Responsive Grid?

I'm working on a static, responsive HTML page.
I made a div with class 'row' then put another div with class 'col-2' that is empty then another div with class 'col-2' that has some text in it. This text should be displayed 16.6% away from the left most point of the browser. However, that's not the case unless I put something inside the first div with class 'col-2' - instead, it's putting that text at the left most point on the page, as if I didn't have a div with class 'col-2' before it.
I get that since the div is empty it's not being displayed but then how am I suppose to use the grid view exactly?
Code:
<div class="section header">
<div class="row">
<div class="col-2"></div>
<div class="col-2">
Title
</div>
</div>
</div>
divs are displayed as full-width blocks by default. If you want the col-2 class to display inline with a specified width, you need to declare it as such:
.col-2 {
display: inline-block;
width: 16.66666%
}
example: http://jsfiddle.net/dno5dzgL/5/

Bootstrap - Aligning two rows accordingly / padding

i want to create a responsive webpage with twitter bootstrap. I have a picture which should be a certain width and a bar with a background color which should have the same width and both should be aligned on the left and right side.
As Bootstrap uses padding-left:-15px; padding-right:-15px; I have this effect:
http://codepen.io/anon/pen/thsgC
This confuses me. How can I align both rows with Bootstrap accordingly without overwriting bootstraps own css classes .row and .col-xs-12
Thanks.
In Bootstrap the col-* class has padding on it. To get around it you can either override it (not recommended) or place the background coloured div inside another div:
<div class="col-xs-12">
<div class="navigation">color</div>
</div>
Like this http://codepen.io/anon/pen/ixcmg
Actually both rows are aligned correctly. The problem is in the first row, image element is child of col-xs-12 element while in second row, navigation class is on the same div element which has col-xs-12 element
try to put navigation class in child element of col-xs-12 like this
<div class="row">
<div class="col-xs-12">
<div class = "navigation">
color
</div>
</div>
</div>
also its not good practice to overwrite bootstrap's own classes, you can give extra class to the element which should be used to overwrite bootstrap css property values.

How do I accomplish following design using bootstrap 3.2.0?

I need to design something the first one in the picture below, there should not be left or right padding.
What I really want to do is:
Two columns with background color. I've added two columns but bootstrap container and column classes adds padding and margins.
Content inside those columns must be in normal paddings and margins.
There must be no space / gutter between cols.
It must be follow bootstrap's breaking points.
You don't need to change anything in native Bootstrap to achieve this if you have two <div>s in the same <row>. Just move your left and right classes into the same line as col-xs-4 / col-xs-8. Also you shouldn't have a <section> as a parent of your <container>, you should move it be a child of container (though I removed it below, since it seems unecessary).
Example:
<div class="container"> //change this to container-fluid if you want full screen width
<div class="row">
<div class="col-xs-4 left">
</div>
<div class="col-xs-8 right">
</div>
</div>
</div>
JS Fiddle Demo
Create a nopadding class like this one:
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
If you add that class to your column divs there will be no padding on them.