I'm tyring to avoid col height's equality to row height in Bootstrap. Here is the script:
<div class="row justify-content-center text-center">
<div class="col-sm-3"></div>
<div class="col-sm-9"></div>
</div>
The col-sm-9 column's content is more than col-sm-3, so its height is bigger than col-sm-3's. But col-sm-3's height increases with col-sm-9. How can I avoid it and set auto height according to content.
Thanks.
Answered in the comments by Paulie_d.
<div class="row align-items-start"></div>
Thanks
Related
I'm using Bootstrap 4, but I don't want to use screen width. I want layout over whatever width the container has.
I couldn't find the details after searching.
The following codes are placed according to the screen width. However, I want it to be adjusted according to the current width of the container I specified.
<div class="row">
<div class="col-lg-4">
SIDEBAR
</div>
<div class="col-lg-8">
<div class="row"> /*The following boxes should be shaped according to the width of this container.*/
<div class="col-xl-4 col-lg-3">A</div>
<div class="col-xl-4 col-lg-3">B</div>
<div class="col-xl-4 col-lg-3">C</div>
<div class="col-xl-4 col-lg-3">D</div>
</div>
</div>
</div>
I'm not very sure what you need exactly, but it seems that you want a boxed layout instead a fluid one. If you use a .container class will apply the boxed effect you want.
<div class="container">
<div class="row">
<div class="col-lg-3 col-xl-4">Column</div>
<div class="col-lg-3 col-xl-4">Column</div>
</div>
</div>
Here the documentation: https://getbootstrap.com/docs/4.0/layout/overview/
If this is not what you need, please try to be more clear about your goal.
I want to center vertically the divs inside the container but the columns take the height of the document and not of main (whom height equals the one of its content) Hereby my code:
<main class="col-lg-12">
<div class="col-lg-1 col-md-0"></div>
<div class="col-lg-4 col-md-6 col-xs-12">
<img src={{image}}>
</div>
<div class="col-lg-1 col-md-0" ></div>
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="title">{{title}}</div>
<div class="text">{{text1}}</div>
</div>
<div class="col-lg-1 col-md-0"></div>
</main>
main div{
height: 100%;
}
I can see in Developer Tools that the div takes 100% of the doc not of main... How could I fix this in order to vertically align the image?
Thank you!
first bootstrap .col should be in .row container
you might need one in your main col to nest columns inside
then, don’t write css to set height:100% on columns, you dont need that.
If I’m right .col have display: flex, so you can use align-items-stretch class to make you column taking the height of their wrapper, being the missing .row
I suppose you will need a height:100% on the row. to do that add it a class h-100
I am new to bootstrap 4 and haven't worked on bootstrap 3 much either.
When I assign a class col-(breakpoint)-(span) to div(s), they don't automatically arrange in a single row or adjust according to the width of the window, instead they remain left aligned and stacked on top of one another. So I assign CSS flex property to the parent container and that does the trick.
Now to make these wrap according to the window size I assign classes according to bootstrap 4 grid system, but that does not make the containers wrap to the next row. Instead the combined width of the flex-items exceeds the width of the window, enabling sideways(x-axis) scroll.
What I want is that the first two containers remain in one row and last two wrap to another row on smaller screen widths(phone portrait, <576px).
<div style="display:flex;">
<div class="col-sm-3 col-6"></div>
<div class="col-sm-3 col-6"></div>
<div class="col-sm-3 col-6"></div>
<div class="col-sm-3 col-6"></div>
</div>
Where am I going wrong?
Use all necesarry grid classes, see the docs https://getbootstrap.com/docs/4.0/layout/grid/
You have to wrap all cols in row and rows in container (.container or .container-fluid)
<div class="container">
<div class="row">
<div class="col-sm-3 col-6">x</div>
<div class="col-sm-3 col-6">y</div>
<div class="col-sm-3 col-6">z</div>
<div class="col-sm-3 col-6">a</div>
</div>
</div>
Try this to remove the style attribute that contais flex and add instead a class="row" and for the child divs replace the classes with this class="col-lg-3 col-md-3 col-6"
I'm trying to follow the guide here: http://getbootstrap.com/css/
and I just can't seem to understand what the "row" class is doing. I was trying some of the examples in the guide such as:
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
I tried it with the row div and without it, and I was trying to place everything inside a container, and there was no difference at all, they all looked the same.
Could anyone explain what the meaning of the "row" class is ?
In Bootstrap, the "row" class is used mainly to hold columns in it. Bootstrap divides each row into a grid of 12 virtual columns. In the following example, the col-md-6 div will have the width of 6/12 of the "row"s div, meaning 50%. The col-md-4 will hold 33.3%, and the col-md-2 will hold the remaining 16.66%.
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-4"></div>
<div class="col-md-2"></div>
</div>
I like to think of the row as a container that can contain X many columns equal to 12. You would use the row class to separate different stacked element (columns).
The columns as you defined them col-xs-12 col-md-8 mean that on a medium sized screen and above the div will span 8/12 of the page and on a xs small screen (mobile) it will span the full 12 columns. This works with the col-xs-12 col-md-4 class because 8 + 4 = 12.
If your entire site is split this way (8/12 and 4/12) then all you really would need is one row! Other wise you'd create another row for different column width. An example would be:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8"></div>
<div class="col-xs-12 col-sm-4"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4"></div>
<div class="col-xs-12 col-sm-2"></div>
<div class="col-xs-12 col-sm-6"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
</div>
</div>
The container class is used to create a nice margin around your entire site, but if you have a portion of your site you want to span across the entire width, you would need to close the container and create a container-fluid class. Then create another container to get the margin back. Hope that all makes since! Just how I think about it as.
The difference can be seen here with row class. Row like container is a class applied to the element.
P.S: run the snippet in full view
.color {
background: #cfcfcf
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class='color container'>
Container only
</div>
<p>
<div class='color container-fluid'>
<div class=row>
Fluid Container & row
</div>
</div>
<p>
<div class='color container'>
<div class=row>
Container & Row
</div>
</div>
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.