Get Bootstrap 5 grid row to span its entire content vertically - css

How can I get a Bootstrap 5 grid row to span its entire content vertically? In the example below, if I add a label element the content of the first row flows over the second row.
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.ql-container {
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
height: 100%;
margin: 0px;
position: relative;
}
.ql-snow {
box-sizing: border-box;
border: 1px solid #d1d5db;
}
.ql-editor {
box-sizing: border-box;
line-height: 1.42;
height: 100%;
outline: none;
overflow-y: auto;
padding: 12px 15px;
-o-tab-size: 4;
tab-size: 4;
-moz-tab-size: 4;
text-align: left;
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
<form class="my-3">
<div class="row py-2">
<div class="col-md-12">
<label for="txtBox" class="form-label">Title</label>
<div id="txtBox" class="ql-container ql-snow">
<div class="ql-editor">
<p>TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE</p>
</div>
</div>
</div>
</div>
<div class="row py-2">
<div class="col-md-12">
next row
</div>
</div>
</form>
</div>
</body>
</html>
Edit 1:
Smaller example
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.ql-container {
height: 100%;
position: relative;
border: 1px solid #d1d5db;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
Title
<div id="txtBox" class="ql-container">
<p>
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
next row
</div>
</div>
</div>
</body>
</html>


This overlap is being caused by your style rule:
<style>
.ql-container {
height: 100%;
...
}
</style>
Along with the html structure:
<div class="col"><!-- this is the parent element -->
Title <!-- the height of this text is same as overlap -->
<div id="txtBox" class="ql-container">
<!-- because this element's height is 100% of the parent -->
</div>
</div>
If you must have the style rule, for reasons not made apparent in your question, then the solution is to
Either: Make a whole new .row with .col for the text Title:
<div class="row">
<div class="col">
Title <!-- the height of this text no longer has affect -->
</div>
</div>
<div class="row">
<div class="col"><!-- this is the parent element -->
<div id="txtBox" class="ql-container">
<!-- this element's height is 100% of the parent -->
</div>
</div>
</div>
Or: Just put Title in its own .col-12 forcing subsequent .col(s) to wrap to the next line.
<div class="row">
<div class="col-12">
Title <!-- the height of this text no longer has affect -->
</div>
<div class="col"><!-- this is the parent element -->
<div id="txtBox" class="ql-container">
<!-- this element's height is 100% of the parent -->
</div>
</div>
</div>

Related

How to align vertically Skeleton button and h1?

I found that button inside h1 element in Skeleton isn't aligned vertically in the following snippet
https://jsfiddle.net/zzmaster/to8xcLdk/2/
<div class="row">
<div class="twelve columns">
<h2>
i am button
i am header
</h2>
</div>
</div>
</div>
I have a sneaking suspicion that line-height is the problem, but setting the equal values to h1 and to .button do not resolve this.

Make the h2 a flexbox with align-items:center and remove the margin-bottom from the a tag:
h2 {
display: flex;
align-items: center;
}
h2 a{
margin-bottom: 0 !important;
margin-right: 20px;
}
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="twelve columns">
<h2>
i am button i am header
</h2>
</div>
</div>
</div>

Bootstrap row with one column breaking out of the boxed container

I am building a layout with bootstrap. In the design most of the elements are boxed (so I use the "container" class).
Some rows have 1 column that is inside the container but 1 other column that needs to break out of the container and be full width.
Here is an image of what I want to achieve:
I really struggle to create that layout. Any ideas?
Here is a codepen of the code below: https://codepen.io/leonfrombeawwwer/pen/bXGvQb
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<div class="container">
<div class="row">
<div class="col-6">
<div class="green-box"></div>
</div>
<div class="col-6">
<div class="blue-box"></div>
</div>
</div>
</div>
.green-box {
background: green;
height: 200px;
}
.blue-box {
background: blue;
height: 200px;
}
I tried a container-fluid container with percentage width for the one column that needs to stay inside in boxed layout. But that pushes all the other elements f.e. header navigation too.
I also tried absolute positioning and played with flexbox. Nothing ended up in a result that is useful in all viewports.
Thanks for your help.

I found the solution now. Please find it in that codepen: [https://codepen.io/leonfrombeawwwer/pen/bXGvQb][1]
[https://codepen.io/leonfrombeawwwer/pen/bXGvQb]1
or here:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<div class="container-fluid relative-container">
<div class="row">
<div class="col-md-6 placeholder"></div>
<div class="col-6">
<div class="green-box absolute-full-width-image"></div>
</div>
</div> <!-- .row -->
</div> <!-- .container-fluid .relative-container -->
<div class="container">
<div class="row">
<div class="col-6">
<div class="blue-box"></div>
</div>
<div class="col-md-6 placeholder"></div>
</div> <!-- .row -->
</div> <!-- .container -->
.green-box {
background: green;
height: 200px;
}
.blue-box {
background: blue;
height: 200px;
width: 120%;
}
.relative-container {
position relative;
}
.absolute-full-width-image {
position: absolute;
right: 0;
width: 110%;
}

vertical and horizontal alignment at the same time does not work

I am using bootstrap to layout my website.
Everything is fine except the vertical alignment of the text "THIS IS TEST". I used different ways which I found in the web such as combination of vertical-align: middle and text-align: center and flex box. None of these generated the right vertical alignment. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<style>
.header{
font-weight: bold;
font-size: 30px;
background-color: #4070CB;
color: #EFF0F2;
height:60px;
}
.txt{
align-items :center;
display : flex;
text-align: center;
justify-content: center;
}
.rightImg{
margin-right:30px;
margin-left:12px;
}
.leftImg{
margin-right:12px;
margin-left:30px;
}
</style>
</head>
<body>
<div class="container col-sm-offset-1">
<div class="row">
<div class="col-sm-10 header">
<div class="row">
<div class="col-sm-1 leftImg"><img src="http://image.flaticon.com/sprites/authors/28-simpleicon.png" alt="Smiley face" height="36" width="36"></div>
<div class="col-sm-8 txt">THIS IS A TEST</div>
<div class="col-sm-1 rightImg"><img src="http://image.flaticon.com/sprites/authors/28-simpleicon.png" alt="Smiley face" height="36" width="36"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-4</div>
</div>
Also here is the jfiddle link to my code:
jfiddle
Can anyone help? How can I vertically align the text in the header?

Your text is centered vertically, but in relation to the row, not the header.
To vertically align everything in the header, you could replace the height with a padding.
.header {
padding: 15px 0;
}
Alternatively you can apply a margin to your text.
.txt {
margin-top: 10px;
}

Vertical alignment of an image in a Twitter Bootstrap cell (height is unknown) [duplicate]

This question already has answers here:
vertical-align with Bootstrap 3
(26 answers)
Closed 6 years ago.
I have a bootstrap grid and I am trying to center an image (200x100 per example provided) inside a cell.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row" style="border:1px solid red;">
<div class="col-xs-6">
some text<br />
some text<br />
some text<br />
some text<br />
</div>
<div class="col-xs-6">
some text<br />
some text<br />
some text<br />
some text<br />
</div>
</div>
<div class="row" style="border:1px solid red;">
<div class="col-xs-6">
<img src="http://placehold.it/350x150">
</div>
<div class="col-xs-6 container">
<img class="img" src="http://placehold.it/200x100">
</div>
</div>
</div>
</body>
</html>
I've tried a lot of techniques provided on internet without any luck. (BTW most of them explicitly define a height) As a proof I provide some of them here:
Example1: a trick with padding-top: 100% increases a row which I do not need.
Example2: table/table-cell just not working
Example 3: a trick with inline-block and vertical align is not working
<style>
.container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
display: inline-block;
vertical-align: middle;
}
</style>
Example 4: absolute position with top, left 50% and translate is working wrong
<style>
.img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>

My favorite vertical alignment hack:
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
It uses translateY and top to sandwich an item into a container with unknown height. This requires IE10+.

Try this
Check example at CODEPEN
CSS:
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
align-self: center;
}
.row > [class*='col-'] img {
align-self: center;
}

You also need to make sure that parent div of that image has height greater than image height.
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
align-self: center;
}
.row > [class*='col-'] img {
align-self: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row" style="border:1px solid red;">
<div class="col-xs-6">
some text<br />
some text<br />
some text<br />
some text<br />
</div>
<div class="col-xs-6">
some text<br />
some text<br />
some text<br />
some text<br />
</div>
</div>
<div class="row" style="border:1px solid red;">
<div class="col-xs-6 different-height-1" style="border:1px solid green;">
<img class="img-responsive" src="http://placehold.it/350x150">
</div>
<div class="col-xs-6 different-height-2" style="border:1px solid green;">
<img class="img-responsive" src="http://placehold.it/200x100">
</div>
</div>
</div>
</body>
</html>

You have to go against bootstrap styling but than it works
.img_container {
position: relative;
}
.reset_pos {
position: static !important;
}
.center {
position: absolute !important;
top: 50%;
transform: translateY(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row" style="border:1px solid red;">
<div class="col-xs-6">
some text
<br />some text
<br />some text
<br />some text
<br />
</div>
<div class="col-xs-6">
some text
<br />some text
<br />some text
<br />some text
<br />
</div>
</div>
<div class="row img_container" style="border:1px solid red;">
<div class="col-xs-6">
<img src="http://placehold.it/350x150">
</div>
<div class="col-xs-6 container reset_pos">
<img class="img center" src="http://placehold.it/200x100">
</div>
</div>
</div>
</body>
</html>

How do I align these boxes using bootstrap?

Here is the code:
<div class="row" >
<div id="box1" class="col-lg-4 box"style="">
<img src="images/1.png" style="" class="num-img">
box 1 content
</div>
<div id="box2" class="col-lg-4 box" style="">
<img src="images/2.png" style="" class="num-img">
box 2 content
</div>
<div id="box3" class="col-lg-4 box" style="">
<img src="images/3.png" style="" class="num-img">
box 3 content
</div>
</div>
CSS of the box:
.box
{
height: 130px;
width: 200px;
background-color: #000;
color: #FFF;
padding: 20px;
font-size: 30px;
text-align: center;
}
This is how I want it to look like:
This is how it looks right now :
And this is how it looks when I remove the box class and write:
<div id="box1" class="col-lg-4 "style="">
How do I fix this??
Update (after adding margin:0 auto):

You are possibly overriding the width of the col-lg-4 divs, depending on when your box css is loaded. Try
<div id="box1" class="col-lg-4">
<div class="box">
<img src="images/1.png" style="" class="num-img">
box 1 content
</div>
</div>
This will not force the col-lg-4 div to have a set px width, but instead a % with the inner div having a set width.
If you want to center the blocks within the bootstrap cols, add margin: 0 auto; to your box css.
.box
{
height: 130px;
width: 200px;
background-color: #000;
color: #FFF;
padding: 20px;
font-size: 30px;
text-align: center;
margin: 0 auto;
}
example using your fiddle

Add col-offset-2 with all col classes and you will see change. change col-offset-2 as per requirement.

Or you can wrap the box in a column like this..
<div class="row" >
<div id="box1" class="col-lg-4"style="">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 1 content
</div>
</div>
<div id="box2" class="col-lg-4" style="">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 2 content
</div>
</div>
<div id="box3" class="col-lg-4" style="">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 3 content
</div>
</div>
</div>

Please check this:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.box
{
height: 130px;
width: 200px;
background-color: #000;
color: #FFF;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="row" >
<div id="box1" class="col-lg-4 text-center">
<div class="box" style = "display:inline-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 1 content
</div>
</div>
<div id="box2" class="col-lg-4 text-center" style="">
<div class="box" style = "display:inline-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 2 content
</div>
</div>
<div id="box3" class="col-lg-4 text-center" style="">
<div class="box" style = "display:inline-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 3 content
</div>
</div>
</div>
</body>
</html>
CodePen:http://codepen.io/anon/pen/ZbOKKw

Resources