I called two columns in bootstrap, suppose the height of one column is 800 PX, and then i want the text in second column to start after the height 200 PX. what should i do? I don't want to use padding or margin. Is there any predefined class in the bootstrap for it? Please help, if any one could.
You can create another div of size 200px then below it you can put your div to have a height of 600 (or 800).
Code:
<div class="row">
<div class="col-xs-6" style="height:800;;background-color:yellow">
</div>
<div class="col-xs-6" style="height:200;background-color:blue">
</div>
<div class="col-xs-6" style="height:600;background-color:black">
</div>
</div>
Related
I just want to be sure about some basic HTML structuring.
Most HTML page body layouts start with a <div class="container"> which of course contains all the HTML in with boostrap v4 it contains rows and columns.
All nice and easy there.
My question is, am I "correct" or not to place columns and rows within separate containers?
This is what I mean:
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
Some Content
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
Some Content
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
Some Content
</div>
</div>
</div>
</div><!-- end body -->
I think the answer to my question is that "it is ok" because for example what happens if you want a full-page width div container then you'd use a separate container for those elements.
I just want to be sure, thanks!
As per your example, if the content has to be inside the container, then using multiple containers is redundant. Use a single container and then separate the rows.
This approach also depends heavily on the design.
Full page width div, YES, the separate container is correct.
Note : For full width
Use container-fluid for full width, and remove the padding as well.
container-fluid class has padding-left : 15px and padding-right: 15px.
You can remove it to cover the div end to end. You can use pl-0 and pr-0, classes provided by bootstrap to set padding-left and padding-right to 0, respectively.
I have a div with id=group1port.
Inside this div are multiple divs, one being id group1porteq.
I am using the equal heights to make the div's the same height however, with what I have, it currently changes the heights of all the div's, when I only want it to effect the div group1porteq. I have tried ('#group1port div.group1porteq') but this doesn't work. I have also tried removing the "div" completely and that also doesn't work. Also have tried changing it to ('#group1porteq div') and then that just makes all the div's inside that div equal.
The "div class="portlet light bordered" id="group1porteq"" is the two div's i need to have equal height
I have div's that all have multiple div's inside, and I am trying to just get equal height for 1 div. Here is a sample of the script.
<script>
if($(window).width() > 800){
$('#group1port div').equalHeights();
}
</script>
Here is a sample of the code
<div class="row" id="group1port">
<div class="col-md-4 col-sm-4">
<div class="portlet light bordered" id="group1porteq">
<div class="portlet-title">
<div class="caption">
<i class="icon-bar-chart font-dark hide"></i>
<span class="caption-subject font-dark bold uppercase">Bulletin</span>
</div>
</div>
<div class="portlet-body">
text
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="portlet light bordered" id="group1porteq">
<div class="portlet-title">
<div class="caption">
<i class="icon-bar-chart font-dark hide"></i>
<span class="caption-subject font-dark bold uppercase">Bulletin</span>
</div>
</div>
<div class="portlet-body">
text
</div>
</div>
</div>
</div>
I'm not sure I fully understand what div's you're trying to find, but this find's both 'group1porteq' divs nested within the 'group1port' div.
$('#group1port').find('#group1porteq').each(function() {
// Do equal height stuff
});
I don't know what equalHeights(), but it sounds like your issues are all related to the selectors. You can find a full list of selector options here https://api.jquery.com/category/selectors/
You have a duplicate id: id="group1porteq" on two divs. You cannot have an id be the same on a page. Try changing it to a class as a first step. Can you add some CSS to this bit of code? it would seem that you are trying to break a table apart. Try adding "display: block" to the class: class="group1porteq" once you change that and see if it breaks the table model so you can get individual heights again.
So, im using bootstrap 3.0, and working on columns, and im having problem with column heights.
My desired output is to have white border in between column, i was able to achieve this on columns with same height, but if the columns is shorter in height, the border is short also,
I tried setting the columns' height to 100%, but is doesnt work, setting the column's height via exact px (100px) works, but i cant use this since i need the column height to be responsive
Here is my html code
<div class="col-xs-12 bg-8560a9">
<div class="col-xs-4 text-left border-right-white full-height">Europe Zone 1 (West)</div>
<div class="col-xs-4 border-right-white full-height">
<div class="col-xs-6">794 M</div>
<div class="col-xs-6">81.6%</div>
</div>
<div class="col-xs-4 full-height">
<div class="col-xs-6">833 M</div>
<div class="col-xs-6">83.5%</div>
</div>
</div>
css
.full-height{height:100% !important;}
This is the common Problem that occurs when parent element don't have there heights set, height and width don't behave same for Browser,you can skip setting width but for element height this is generic issue
suppose your parent element has height: auto; and setting percentage height to children will
confuse browser to calculate height for element from an undefined value,since it is null so browser will do nothing.
you need to add
<div class="col-xs-12 bg-8560a9 full-height">
<div class="col-xs-4 text-left border-right-white full- height">Europe Zone 1 (West)</div>
<div class="col-xs-4 border-right-white full-height">
<div class="col-xs-6">794 M</div>
<div class="col-xs-6">81.6%</div>
</div>
<div class="col-xs-4 full-height">
<div class="col-xs-6">833 M</div>
<div class="col-xs-6">83.5%</div>
</div>
</div>
this will again work only if parent element height is set,
full reference to this problem is here
So, if you want to set a height on your web pages to a percentage, you have to set the height of every parent element of the one you want the height defined.
I need to divide the browser window into two fluid rows so that regardless of size, they are stretched across the screen. In the first row i need to add different columns which should be centered automatically. Basically it looks like this:
The problem is that I can not center cols in first row and rows are not stretch to the browser height. My code looks like this:
<div class="container-fluid">
<div class="row" style="text-align:center">
<div class="col-md-3">.col-md-1</div>
<div class="col-md-3">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-1">.col-md-1</div>
</div>
</div>
You can use offset to center div
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-3 col-md-3">.col-md-1</div>
<div class="col-md-3">.col-md-1</div>
</div>
</div>
And you can change padding for ajust space between blocs.
See on fiddle http://jsfiddle.net/JtzE6/
Also take a look at the Alignment Classes on twitter bootstrap documentation (Twitter Bootstrap Documentation). You should be able to apply these to any element tag in html. It worked for me.. Hope this helps..
I have the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</div>
</div>