I have trouble aligning nested rows. See picture below. I have 1 row as 9, and 3 rows as 3. 9+3=12 on md and lg screen. In sm screen i would like to have row one as 12 and the 3 other rows under it(4+4+4).
https://s28.postimg.org/f0xa2380t/helpbootstrap.png
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-12">
<div class="row ">
<div class="col-md-12 large">
</div>
</div>
</div>
<div class="col-md-3 col-sm-12">
<div class="row ">
<div class="col-md-12 col-sm-4 small">
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-4 small">
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-4 small">
</div>
</div>
</div>
</div>
.small{ height:100px; border: 1px solid;} .large{ height:200px; border: 1px solid; }
https://jsfiddle.net/proabid/qLg72vns/
You just need to get rid of the rows in your second div:
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-12">
<div class="row ">
<div class="col-md-12 large">
</div>
</div>
</div>
<div class="col-md-3 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-4 small">
</div>
<div class="col-md-12 col-sm-4 small">
</div>
<div class="col-md-12 col-sm-4 small">
</div>
</div>
</div>
</div>
</div>
Example bootply
This works using Boostrap v4
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-12 large">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit qui exercitationem placeat doloribus aut id recusandae pariatur. Illum, porro aut ullam? Adipisci tempora fugiat quam quos dolorem, blanditiis dicta magni.
</p>
</div>
<div class="col-md-3 col-sm-3 col-xs-4 small">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit qui exercitationem placeat doloribus aut id recusandae pariatur. Illum, porro aut ullam? Adipisci tempora fugiat quam quos dolorem, blanditiis dicta magni.
</p>
</div>
<div class="col-md-3 offset-md-9 col-sm-3 col-xs-4 small">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedi qui exercitationem placeat doloribus aut id recusandae pariatur. Illum, porro aut ullam? Adipisci tempora fugiat quam quos dolorem, blanditiis dicta magni.
</p>
</div>
<div class="col-md-3 offset-md-9 col-sm-3 col-xs-4 small">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit qui exercitationem placeat doloribus aut id recusandae pariatur. Illum, porro aut ullam? Adipisci tempora fugiat quam quos dolorem, blanditiis dicta magni.
</p>
</div>
</div>
JSFIDDLE
https://jsfiddle.net/qLg72vns/8/
#Procode Please check following code with an example text:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<p>ABCD</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-4 col-xs-4">
<p>ABCD</p>
</div>
<div class="col-lg-12 col-md-12 col-sm-4 col-xs-4">
<p>ABCD</p>
</div>
<div class="col-lg-12 col-md-12 col-sm-4 col-xs-4">
<p>ABCD</p>
</div>
</div>
</div>
Removing the extra rows did solve my problem.
Related
With a card group of 4 cards in a single row, how do I make it such that as the screen gets smaller, it goes straight from 4 cards in a single row into 2 cards in the first row and 2 cards in the second row while skipping 3 cards in the first row and a single long card in the second row.
Here's an example of my HTML with bootstrap
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="row">
<div class="col s10 offset-s1 m6 l4">
<div class="card h-100">
<div class="card-content">
<div class="icon-block">
<div class="card-title text-center mt-3">
<h4 class="center">Item</h4>
</div>
<h5 class="card-title text-center mt-2">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quia eos, neque veritatis et repellendus,
accusantium nisi soluta repellat, quidem aspernatur
quae saepe tempora ad? Nam earum labore
necessitatibus optio rem.
</h5>
</div>
</div>
</div>
</div>
<div class="col s10 offset-s1 m6 l4">
<div class="card h-100">
<div class="card-content">
<div class="icon-block">
<div class="card-title text-center mt-3">
<h4 class="center">Item</h4>
</div>
<h5 class="card-title text-center mt-2">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quia eos, neque veritatis et repellendus,
accusantium nisi soluta repellat, quidem aspernatur
quae saepe tempora ad? Nam earum labore
necessitatibus optio rem.
</h5>
</div>
</div>
</div>
</div>
<div class="col s10 offset-s1 m6 l4">
<div class="card h-100">
<div class="card-content">
<div class="icon-block">
<div class="card-title text-center mt-3">
<h4 class="center">Item</h4>
</div>
<h5 class="card-title text-center mt-2">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quia eos, neque veritatis et repellendus,
accusantium nisi soluta repellat, quidem aspernatur
quae saepe tempora ad? Nam earum labore
necessitatibus optio rem.
</h5>
</div>
</div>
</div>
</div>
<div class="col s10 offset-s1 m6 l4">
<div class="card h-100">
<div class="card-content">
<div class="icon-block">
<div class="card-title text-center mt-3">
<h4 class="center">Item</h4>
</div>
<h5 class="card-title text-center mt-2">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quia eos, neque veritatis et repellendus,
accusantium nisi soluta repellat, quidem aspernatur
quae saepe tempora ad? Nam earum labore
necessitatibus optio rem.
</h5>
</div>
</div>
</div>
</div>
</div>
Right now it looks like you are using Materialize grid classes instead of Bootstrap grid classes.
You can use col-6 col-md-3 for all the card parent element so that it splits into two by default and splits into 4 after it reached medium screen breakpoint.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="row">
<div class="col-6 col-md-3">
<div class="card h-100">
<div class="card-content">
<div class="icon-block">
<div class="card-title text-center mt-3">
<h4 class="center">Item</h4>
</div>
<h5 class="card-title text-center mt-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia eos, neque veritatis et repellendus, accusantium nisi soluta repellat, quidem aspernatur quae saepe tempora ad? Nam earum labore necessitatibus optio rem.
</h5>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card h-100">
<div class="card-content">
<div class="icon-block">
<div class="card-title text-center mt-3">
<h4 class="center">Item</h4>
</div>
<h5 class="card-title text-center mt-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia eos, neque veritatis et repellendus, accusantium nisi soluta repellat, quidem aspernatur quae saepe tempora ad? Nam earum labore necessitatibus optio rem.
</h5>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card h-100">
<div class="card-content">
<div class="icon-block">
<div class="card-title text-center mt-3">
<h4 class="center">Item</h4>
</div>
<h5 class="card-title text-center mt-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia eos, neque veritatis et repellendus, accusantium nisi soluta repellat, quidem aspernatur quae saepe tempora ad? Nam earum labore necessitatibus optio rem.
</h5>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card h-100">
<div class="card-content">
<div class="icon-block">
<div class="card-title text-center mt-3">
<h4 class="center">Item</h4>
</div>
<h5 class="card-title text-center mt-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia eos, neque veritatis et repellendus, accusantium nisi soluta repellat, quidem aspernatur quae saepe tempora ad? Nam earum labore necessitatibus optio rem.
</h5>
</div>
</div>
</div>
</div>
</div>
I've used Bootstrap's card deck but i can't seem to make it align vertically.
One of the cards has shorter text and creates a mismatch, not sure how to fix it..
I should also mention that i want a 3 card display in that page on desktop and on mobile it stacks up vertically so that why i needed the extra margin in my css file.
<div class="container mw-100 h-100">
<div class="row h-100 align-items-center">
<div class="col-12 col-md-6 col-lg-4 col-xl-4">
<div class="card">
<img class="card-img-top" src="img1.jpg" alt="img1" />
<div class="card-body">
<h5 class="card-title">Title 1</h5>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero voluptas, vero voluptatibus odio nostrum facilis aut! Dolores, non accusamus. Sapiente et minus sint numquam. Labore laborum ut a commodi doloremque.
</p>
<p class="card-text">
<button type="button" class="btn btn-dark btn-lg" onclick="startGame()">Start</button>
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-4">
<div class="card">
<img class="card-img-top" src="img2.jpg" alt="img2" />
<div class="card-body">
<h5 class="card-title">Title 2<span class="badge badge-secondary">New</span></h5>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero voluptas, vero voluptatibus odio nostrum facilis aut! Dolores, non accusamus. Sapiente et minus sint numquam. Labore laborum ut a commodi doloremque.
</p>
<p class="card-text">
<button type="button" class="btn btn-dark btn-lg">Start</button>
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-4">
<div class="card">
<img class="card-img-top" src="img3.jpg" alt="img3" />
<div class="card-body">
<h5 class="card-title">Title 3<span class="badge badge-secondary">New</span></h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero voluptas, vero voluptatibus odio nostrum facilis aut! Dolores, non accusamus. Sapiente et minus sint numquam. Labore laborum ut a commodi doloremque.</p>
<p class="card-text">
<button type="button" class="btn btn-dark btn-lg">Start</button>
</p>
</div>
</div>
</div>
</div>
</div>
As for other css there is only height that is needed to align the container itself and some margins along with the regular browser reset props.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
.card {
margin-bottom: 0.75rem;
}
.row :first-child > .card {
margin-top: 0.75rem;
}
This is because you have your items aligned to the center <div class="row h-100 align-items-center"> change it to top <div class="row h-100 align-items-top"> This is in the 2nd line of your html. See here: https://jsfiddle.net/wp406n8d/4/
Also, you can get rid of this code:
.row :first-child > .card {
margin-top: 0.75rem;
}
And I'm not completely sure if you were wanting this also, but you can simply add height: 100% to the .card class to make all of the cards the same height. See here: https://jsfiddle.net/7ah6f4mo/
I have a layout that looks as expected on Safari > 9. But on Safari 9, the layout is broken: it looks like this.
This is my code.
.card h4 {
min-height: 90px;
}
.card p {
font-size: 0.875rem;
}
.figure-container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
}
#media (min-width: 768px) {
.card h4 {
min-height: 140px;
}
.card p {
font-size: 1.25rem;
line-height: 1.7rem;
}
.card-0 {
background: #F7F7F7;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-6 col-lg-4 d-flex flex-column my-lg-3 px-0 px-lg-3">
<div class="card p-3 pb-4 p-md-4 p-md-b-5 h-100" style="background: #F9f9f9;">
<h4 class="title-four">Lorem</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</div>
<div class="col-6 col-lg-4 d-flex flex-column my-lg-3 px-0 px-lg-3 ">
<div class="card p-3 pb-4 p-md-4 p-md-b-5 h-100" style="background: #EAD2F7;">
<h4 class="title-four">Ad asperiores</h4>
<p>
Ad asperiores delectus deleniti dolorem, esse et exercitationem expedita fuga ipsam, labore maxime natus porro quam quisquam, rerum sapiente temporibus vel vitae?
</p>
</div>
</div>
<div class="col-6 col-lg-4 d-flex flex-column my-lg-3 px-0 px-lg-3 ">
<div class="card p-3 pb-4 p-md-4 p-md-b-5 h-100" style="background: #D2EEE7">
<h4 class="title-four">consectetur adipisicing</h4>
<p class="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt exercitationem explicabo neque nobis possimus quaerat suscipit? Aliquid cum ea earum enim non quod reprehenderit voluptatem. A ad id maiores unde.
</p>
</div>
</div>
<div class="col-6 col-lg-4 d-flex flex-column my-lg-3 px-0 px-lg-3">
<div class="card p-3 pb-4 p-md-4 p-md-b-5 h-100" style="background: #F9f9f9;">
<h4 class="title-four">Lorem</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</div>
<div class="col-6 col-lg-4 d-flex flex-column my-lg-3 px-0 px-lg-3 ">
<div class="card p-3 pb-4 p-md-4 p-md-b-5 h-100" style="background: #EAD2F7;">
<h4 class="title-four">Ad asperiores</h4>
<p>
Ad asperiores delectus deleniti dolorem, esse et exercitationem expedita fuga ipsam, labore maxime natus porro quam quisquam, rerum sapiente temporibus vel vitae?
</p>
</div>
</div>
<div class="col-6 col-lg-4 d-flex flex-column my-lg-3 px-0 px-lg-3 ">
<div class="card p-3 pb-4 p-md-4 p-md-b-5 h-100" style="background: #D2EEE7">
<h4 class="title-four">consectetur adipisicing</h4>
<p class="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt exercitationem explicabo neque nobis possimus quaerat suscipit? Aliquid cum ea earum enim non quod reprehenderit voluptatem. A ad id maiores unde.
</p>
</div>
</div>
</div>
</div>
I expect it to looks like this.
I guess the pbroblem is with flex-column. If i do not use it, the layout's structure is fine, but th columns does not have anymore same-height. I do not understand why it is cause Safari 9 supports flex-direction: column ( caniuse).
How to fix this issue?
I want the elements that are on the left to be distributed across the container's height, taking up 100% of the height in total.
How can I do it?
Note: "item" is dynamic data
.item {
border: 1px solid gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-6" style="border:1px solid red;">
<div class="d-flex m-0">
<div class="item">
item
</div>
</div>
<div class="d-flex m-0">
<div class="item">
item
</div>
</div>
</div>
<div class="col-6" style="border:1px solid red;">
<div class="d-flex m-0">
<div class="flex-center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis libero incidunt rem nisi delectus aliquam maiores hic doloremque aliquid aut! Vitae ex architecto deserunt minima inventore ratione similique ipsa? Facere.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto enim officia itaque, quaerat quisquam deserunt, omnis quae, quas quod maxime at impedit ducimus vel aspernatur. Commodi unde amet itaque alias.
</div>
</div>
</div>
</div>
View on JSFiddle
You can use flex-direction: column, like so:
.left-column {
display: flex;
flex-direction: column;
}
.d-flex{
border: 1px solid gray;
flex: 1;
}
If you wish to align items vertically, you can add this:
.d-flex {
...
align-items: center;
}
See it on this fiddle
So firstly you need the no-gutters class on your row to elimitate gutters between the cols.
Then youll need h-50 on you flexbox elements inside the col (to get them 50% height each) and youll need w-100 on the flexbox childs (to make them fill the space). For the vertical centering inside the item just add d-flex align-items-center classes.
I created a updated version of your fiddle:
https://jsfiddle.net/4vep1gy0/
.item {
border: 1px solid gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="row no-gutters">
<div class="col-6" style="border:1px solid red;">
<div class="d-flex m-0 h-50">
<div class="item w-100 d-flex align-items-center">
item
</div>
</div>
<div class="d-flex m-0 h-50">
<div class="item w-100 d-flex align-items-center">
item
</div>
</div>
</div>
<div class="col-6" style="border:1px solid red;">
<div class="d-flex m-0">
<div class="flex-center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis libero incidunt rem nisi delectus aliquam maiores hic doloremque aliquid aut! Vitae ex architecto deserunt minima inventore ratione similique ipsa? Facere.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto enim officia itaque, quaerat quisquam deserunt, omnis quae, quas quod maxime at impedit ducimus vel aspernatur. Commodi unde amet itaque alias.
</div>
</div>
</div>
</div>
This question already has answers here:
Bootstrap full-width with 2 different backgrounds (and 2 columns)
(2 answers)
Extend bootstrap row outside the container
(7 answers)
Closed 6 years ago.
Not a duplicate of this.
I trying to create two columns on a webpage have different background colours that extend to the screen edges. But the content of the columns needs to stay within the bootstrap boxed width.
It should look like this:
I found this answer which almost worked but the inner content wasn't correctly aligned within the boxed width, especially on large screens over 1600px. It basically ended up looking like:
Below, is a code snippet of the closest I could get to it working, it may be the wrong approach entirely:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="background: bisque;">
<div class="row">
<div class="col-xs-12">
<h1>Normal Boxed Width</h1>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style="background-color: aquamarine; padding: 0">
<div>
<div class="col-sm-8 col-sm-offset-1">
<h1>Left Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
</div>
<div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff">
<h1>Right Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
</div>
</div>
</div><!-- .row -->
</div><!-- .container-fluid -->
Bootstrap 5 beta
The concept is still the same in Bootstrap 5. Use a absolute position pseudo element on the column(s) to create the appearance of a container inside a container-fluid...
Bootstrap 5 example
Or, use container-fluid and nest smaller grid columns inside the outer columns with background color...
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-info">
<div class="row justify-content-end">
<div class="col-9"> ... </div>
</div>
</div>
<div class="col-6 bg-danger">
<div class="row justify-content-start">
<div class="col-9"> ... </div>
</div>
</div>
</div>
</div>
Bootstrap 5 nesting example
Bootstrap 4
The concept is still the same in Bootstrap 4, but the -xs- infix no longer exists.
Bootstrap 4 example
Bootstrap 3 (original answer)
Use another wrapper DIV around a 2nd container...
<div class="container" style="background: bisque;">
<div class="row">
<div class="col-xs-12">
<h1>Normal Boxed Width</h1>
</div>
</div>
</div>
<div style="background-color: aquamarine; padding: 0">
<div class="container">
<div class="row">
<div>
<div class="col-sm-9">
<h1>Left Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
</div>
<div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff">
<h1>Right Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
</div>
</div>
</div>
<!-- .row -->
</div>
<!-- .container-fluid -->
</div>
EDIT
Use a psuedo element such as..
.right:before {
right: -999em;
background: rebeccapurple;
content: '';
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
Bootstrap 3 example
Similar question: Bootstrap container fill sides with colors