I'm trying implement a component with Bootstrap 4 that looks something like this:
+-------------------------+
| Row 1 - Top |
+-------------------------+
| |
| |
+-------------------------+
| Row 2 - Vertical Center |
+-------------------------+
| |
| |
| |
| |
+-------------------------+
The height of the container is supposed to be 100vh.
According to my understanding, using flex would be an approach to solve this problem.
This is the markup I currently have: http://codeply.com/go/RRMwIHt8QA
As you can see, there seems to be some kind of offset of Row 2. Any ideas what's causing this and how to make the row take the full width of the available space?
To accomplish that you first need to add flex-column to the container so the row's stack vertically.
Then the row's need align-items-start align-content-start to prevent them from stretching.
Finally, using a pseudo, here ::after, you can match the first row so the second row can be vertically centered. An alternative is to position the first row absolute, though I find the pseudo version more responsive.
Fiddle demo
Stack snippet
.test-container {
height: 100vh;
}
.test-container .row:first-child,
.test-container::after {
content: '';
flex: 1 1 0;
}
/* styling for this demo */
.test-container .row > div {
border: 1px dashed lightgray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column container-fluid test-container">
<div class="row align-items-start align-content-start">
<div class="col-4">R1-C1</div>
<div class="col-4">R1-C2</div>
<div class="col-4">R1-C3</div>
</div>
<div class="row align-items-start align-content-start">
<div class="col-4">R2-C1</div>
<div class="col-4">R2-C2</div>
<div class="col-4">R2-C3</div>
</div>
</div>
It's the d-flex class that give you problems
Remove it or check here what better fits your needs
Related
I have a fairly normal Bootstrap 4 grid, dividing a row into 3 columns with equal width:
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
(or using the Bootstrap 4 autolayout feature I could remove the "-md-4" part.
However, now I need to adapt the layout, so that the middle column is half of the width of the first or the last column:
| 40 % |20 %| 40 % |
If I would use the standard 12-column grid system, that would not add up (I would have to introduce 1/10 columns?): 4,8 | 2,4 | 4,8
Is there an (easy) possibility to achieve that? Do I have to redefine the Less/Sass Variables for the amounts of available columns and their widths? (which I would rather not, since I quite like the original grid system) - I imagined if I had a 10/20/../10x Grid System, I could very easily build it:
<div class="row"><!--10 equal width columns-->
<div class="col-md-4">col-4</div>
<div class="col-md-2">col-2</div>
<div class="col-md-4">col-4</div>
</div>
Any help is appreciated!
There's no way with Bootstrap "out-of-the-box", but you could extend use of the auto-layout (.col) columns by setting a specific width...
.col-20 {
flex: 0 0 20%;
max-width: 20%;
}
.col-40 {
flex: 0 0 40%;
max-width: 40%;
}
<div class="row">
<div class="col col-40">col</div>
<div class="col col-20">col</div>
<div class="col col-40">col</div>
</div>
https://www.codeply.com/go/cCakaqk7UP
I'm using Bootstrap 3.0 and I have this situation:
<div class="row">
<div class="col-md-8 col-xs-12">text</div>
<div class="col-md-4 col-xs-12">photo</div>
</div>
Desktop
---------------- ---------
| text | photo |
---------------- ---------
Mobile
-------------------------
| text |
-------------------------
| photo |
-------------------------
On mobile I need to have photo before text.
-------------------------
| photo |
-------------------------
| text |
-------------------------
I tried using pull/push for col-sx but without success.
I know that Bootstrap is "mobile-first" and a solution could be to get them in the order I want on the sx first and then push/pull them in to position on the desktop, but for SEO reasons I need to have text code before photo.
Is it possible ?
Thank's
Approach it the other way around - mobile first...
So put your photo before text, and use push/pull on larger screens.
You cannot use push/pull on xs cols.
BTW, you need xs NOT sx! :)
<div class="row">
<div class="col-md-4 col-md-push-8 col-xs-12">photo</div>
<div class="col-md-8 col-md-pull-4 col-xs-12">text</div>
</div>
I don't think so this would impact SEO. SEO has nothing to do with div layouts. SEO impacts with headers, images, links, and paragraphs, etc.
However, to solve your layout, you can do like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-8 col-sm-push-8 col-xs-12">text</div>
<!--first push-->
<div class="col-md-4 col-sm-pull-8 col-xs-12">photo</div>
<!--then pull-->
</div>
You should try flexbox.
If you have just these two items in the .row element then it is relatively simple
/* Of course, use your xs max-width */
#media screen and (max-width: 768px) {
.class-of-this-row {
display: flex;
flex-direction: column-reverse;
}
}
<div class="row class-of-this-row">
<div class="col-sm-8 col-xs-12">text</div>
<div class="col-sm-4 col-xs-12">photo</div>
</div>
I have a Bootstrap 3 layout with the following structure:
<div class="row row-full">
<div class="col col-lg-6 col-md-12">
<div class="row row-middle">
<h1>Some Title</h1>
<h3>SubTitle</h3>
</div>
<div class="row row-bottom">
<h1>Some Title</h1>
<h3>SubTitle</h3>
</div>
</div>
</div>
And this is my customization with the CSS:
.row-full{
height:100%;
}
.row-full .col{
height:100%;
}
.row-bottom, .row-middle{
height:50%;
}
And I end up with the following layout from a large screen:
--------------------------------------
| Title | |
| SubTitle | |
| | |
--------------------------------------
| Title | |
| SubTitle | |
| | |
--------------------------------------
So in my layout the main row takes 100% of the screen and same applies for the column. Each sub-row, takes 50% of the height but I need also to be able to set the vertical alignment inside the column because it is a responsive layout.
I tried with FlexBox but it mess up my grid system.
What is the correct way by using Bootstrap 3.0?
What I need is the ability to vertical align the content inside the rows.
I am trying to setup a div with bootstrap.
My problem is that I need to have a set margin on the left and right of the div. By using col-md-10 doesn't get me the margin I need. It's more than 10px if the screen is wide.
For example:
<div class="col-md-offset-1 col-md-10">
//contents...
</div>
-------------------------------------
| --------- div --------------
|10px margin 10px margin
| | |
| | |
| -------------------------------
-------------------------------------
Does anyone have an idea of how to fix it? Thanks a lot!
If I understand you want always a margin value of 10px at each side. You can create a custom class and use calc(), try this:
<div class="col-md-offset-1 col-md-10 margin">
//contents...
</div>
.margin {
margin:0 10px;
width:calc(100% - 20px);
}
Check this BootplyDemo
Another Option could be a custom class on the container and use padding. Try:
<div class="container margin">
<div class="col-xs-12">
//contents...
</div>
</div>
.margin {
width:100%;
padding:0 10px;
}
Another BootplyDemo
You should be using the container-fluid class on your main content div.
<div class="container-fluid">
<!-- Contents -->
</div>
What this does is creates a full-width container with a bit of padding on the right and left, top and bottom that responsively resizes based on the width of your browser.
Hope this helps!
I have 3 divs in a horizontal row in my footer. I'm using the bootstrap grid.
<div class="col-xs-6 col-sm-4 div1">
<div class="col-xs-6 col-sm-4 div2">
<div class="col-xs-6 col-sm-4 div3">
So that they appear in this sequence
+------+------+------+
| div1 | div2 | div3 |
+------+------+------+
When the browser width decreases to a certain width suppose 600px, I want the 3 divs to stack vertically in a single column in the following sequence.
+------+
| div1 |
+------+
| div3 |
+------+
| div2 |
+------+
How can I achieve that using CSS?
You can use push and pull method. Also remove the col-xs-6 class to achieve the single column layout on mobile views.
<div class="container">
<div class="col-sm-4">div1</div>
<div class="col-sm-4 col-sm-push-4">div3</div>
<div class="col-sm-4 col-sm-pull-4">div2</div>
</div>
The class col-xs- applies to screen widths <768px.
If the divs need to stack vertically for mobile views, change this class to 'col-xs-12'
This will make them take 100% width and align vertically one below the other.
you can change it using CSS like this.
say on full screen the css will be
.div1, .div2, .div3{
float: left;
width : 33%;
}
using css media query
#media (max-width: 600px) {
.div1, .div2, .div3{
width : 100%;
}
}
now at 600px width or less the divs will be width 100% and they will be shown vertically
in bootsrap you do not need anything, this option is included by default you just need to remove col-xs-6 class from divs