How to fit 2 containers and input box side by side - html

I'm very new to frontend - HTML, CSS and bootstrap. I basically want to do a comparison page, where users can enter search terms and the table below will display the information pulled from a database. Currently, when I tried to place the 2 tables and input containers side by side, they overlap and are way too close to each other.
So my question is - what is the best way to style these containers so that they look like the wireframe below?
Thank you!
This is what my page looks now:


Use bootstrap row and column approach
as it will make them responsive too
Example
<div class="row">
<div class="col-md-6"> Your First Box </div>
<div class="col-md-6"> Your Second Box </div>
</div>
What this will do is it will create a row in which two columns of 50% width will take place


HTML:
<div class="row">
<div class="column"></div>
<div class="column"></div>
</div>
CSS:
.row {
display: flex;
}
.column {
flex: 50%;
}


I create an example with bootstrap 5
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<div class="d-flex justify-content-center align-items-start">
<div style="width:500px" class="pt-3 px-3">
<input type="text" class="form-control" placeholder="search">
<div class="results rounded border mt-3">
<div class="item d-flex justify-content-center align-items-center border-bottom flex-column py-3">
<span class="text-secondary">filter1</span>
<h3 class="fw-bold">RESULT 1</h3>
</div>
<div class="item d-flex justify-content-center align-items-center border-bottom flex-column py-3">
<span class="text-secondary">filter1</span>
<h3 class="fw-bold">RESULT 1</h3>
</div>
<div class="item d-flex justify-content-center align-items-center flex-column py-3">
<span class="text-secondary">filter1</span>
<h3 class="fw-bold">RESULT 1</h3>
</div>
</div>
</div>
<div style="width:500px" class="pt-3 px-3">
<input type="text" class="form-control" placeholder="search">
<div class="results rounded border mt-3">
<div class="item d-flex justify-content-center align-items-center border-bottom flex-column py-3">
<span class="text-secondary">filter1</span>
<h3 class="fw-bold">RESULT 1</h3>
</div>
<div class="item d-flex justify-content-center align-items-center border-bottom flex-column py-3">
<span class="text-secondary">filter1</span>
<h3 class="fw-bold">RESULT 1</h3>
</div>
<div class="item d-flex justify-content-center align-items-center flex-column py-3">
<span class="text-secondary">filter1</span>
<h3 class="fw-bold">RESULT 1</h3>
</div>
</div>
</div>
</div>


I have made an simple example of your case here with Bootstrap row and col. Hope it was to any help.
If you want to read more how the grid works in Bootstrap: Boostrap grid
.box {
border: 2px solid gray;
width: 300px;
height: 300px;
margin: 30px;
border-radius: 25px;
}
.input-field{
margin: 30px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="row">
<input class="col input-field"/>
<input class="col input-field"/>
</div>
<div class="row">
<div class="col box"></div>
<div class="col box"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>

Related

I cannot centre elements using Bootstrap and there are problems with the radius of one div

So I am trying to do a login form using HTML and Bootstrap but I can't get to align all elements in centre. They seem to be in centre but the header which is centre aligned by Bootstrap is not in one line vertically with the other elements. I am using the Grid and I need the elements to be centre-aligned in medium and small screen. In medium screen I tried to follow the logic of 12 column of the grid so to fill spaces until I arrive in centre but still the elements are not aligned correctly.
Also I can't apply the desired radius to login form. I need it to be more rounded. Bootstrap doesn't seem to work. CSS does but it applies radius to all the divs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" >
<title>Social Network</title>
</head>
<body class="bg-primary">
<div class="row">
<div class="col-3 col-md-6"></div>
<header class="text-center fs-3 text-white my-5">
SOCIAL NETWORK
</header>
</div>
<div class="row">
<div class="col-2 col-md-4 m-1"></div>
<div class="rounded-3 text-center bg-light p-4 col-centered col-8 col-md-3 px-5">
<div>
<input type="email" class="form-control my-5" id="inputUsername" aria-describedby="emailHelp" placeholder="Username">
<input type="password" class="form-control my-5" id="inputPassword1" placeholder="Password">
</div>
<div class="text-center">
<button type="submit my-5" class="btn btn-primary">Log In</button>
</div>
<div class="text-center my-4 text-secondary">OR</div>
<div class="text-center">
<a class="text-decoration-none link-secondary" href="">Forgot Password?</a>
</div>
</div>
<div class="col-md-3"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
</div>
<div class="row">
<div class="col-1 col-md-3"></div>
<div class="col-1 col-md-1"></div>
<div class="text-center text-secondary rounded-pill col-8 col-md-3 bg-light my-4 py-3" id="signUp">
<div class="text-centered">Don't have an account? <a class="text-primary px-3" href="">Sign Up</a></div>
</div>
<div class="col-1 col-md-3"></div>
<div class="col-md-2"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

I've mocked up a simple example for you based on your Div boxes and layout. In short you can use.
There's a couple of things to not here. The centering is achieved by using Flex and justifying the content to the centre - d-flex justify-content-center
As for the border radius, I've added a rule called login-box, which sets the radius to 20px.
Hope that helps.
.login-box {
background-color: #fff;
border-radius: 20px;
}
.new-user-box {
border-radius: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" >
<title>Social Network</title>
</head>
<body class="bg-primary">
<div class="d-flex justify-content-center">
<header class="text-center fs-3 text-white my-5">
Social Network
</header>
</div>
<div class="row d-flex justify-content-center ">
<div class="col-6 login-box">
<div>
<input type="email" class="form-control my-5" id="inputUsername" aria-describedby="emailHelp" placeholder="Username">
<input type="password" class="form-control my-5" id="inputPassword1" placeholder="Password">
</div>
<div class="text-center">
<button type="submit my-5" class="btn btn-primary">Log In</button>
</div>
<div class="text-center my-4 text-secondary">OR</div>
<div class="text-center mb-4">
<a class="text-decoration-none link-secondary" href="">Forgot Password?</a>
</div>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="text-center text-secondary col-6 bg-light my-4 py-3 new-user-box" id="signUp">
<div class="text-centered">Don't have an account? <a class="text-primary px-3" href="">Sign Up</a></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

Centering a bootstrap grid on page

I have been trying to get a Bootstrap grid to center vertically on my page, but can't seem to get it to center. Horizontal center works fine.
HTML:
<div class="container-fluid">
<div class="board vh-100">
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">A</div>
<div class="col-4 tic-box">B</div>
<div class="col-4 tic-box">C</div>
</div>
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">D</div>
<div class="col-4 tic-box">E</div>
<div class="col-4 tic-box">F</div>
</div>
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">G</div>
<div class="col-4 tic-box">H</div>
<div class="col-4 tic-box">I</div>
</div>
</div>
</div>
CSS:
.tic-box {
border: solid black 1px;
font-size: 3vw;
text-align: center;
width: 90px;
height: 90px;
}
Thanks for any help!

Since your board element has a specific height v-100 the you can add the following css attributes to your board element to center its contents.
.board{
display:flex;
flex-direction: column;
justify-content:center;}

Hi I think this is the cleanest approach to do what you require!
.tic-box {
border: solid black 1px;
font-size: 3vw;
text-align: center;
width: 90px;
height: 90px;
}
<!doctype html>
<html lang="en">
<head>
<title>Center</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS v5.0.2 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid d-flex align-items-center min-vh-100">
<div class="board mx-auto">
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">A</div>
<div class="col-4 tic-box">B</div>
<div class="col-4 tic-box">C</div>
</div>
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">D</div>
<div class="col-4 tic-box">E</div>
<div class="col-4 tic-box">F</div>
</div>
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">G</div>
<div class="col-4 tic-box">H</div>
<div class="col-4 tic-box">I</div>
</div>
</div>
</div>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>

I Got it -
body{
justify-content: center;
align-items: center;
display: flex;
}
.tic-box {
border: solid black 1px;
font-size: 3vw;
text-align: center;
width: 90px;
height: 90px;
}
<div class="container-fluid">
<div class="board vh-100">
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">A</div>
<div class="col-4 tic-box">B</div>
<div class="col-4 tic-box">C</div>
</div>
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">D</div>
<div class="col-4 tic-box">E</div>
<div class="col-4 tic-box">F</div>
</div>
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">G</div>
<div class="col-4 tic-box">H</div>
<div class="col-4 tic-box">I</div>
</div>
</div>
</div>

Bootstrap 5 card tile position adding conflict

I'm tiring to using bootstrap 5 card to my attached image like card view, does any one know how to do that correctly on bootstrap 5 ?
here the my code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>My </title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body >
<!--Start main layout-->
<div class="wrapper">
<div class="d-flex justify-content-center mt-5">
<div class="">
<div class="container">
<div id="dynamic content" class="dynamic-content">
<div class="row align-items-center animated flipInY slow delay-2s">
<div class="col-md-2 col-xs-12">
<div class="content" id="tile1">
<i class="fa fa-home fa-5x"></i>
<p>My Book</p>
</div>
</div>
<div class="col-md-2">
<div class="content" id="tile2">
<i class="fa fa-user fa-5x"></i>
<p>About</p>
</div>
</div>
<div class="col-md-6">
<div class="content" id="tile3">
<i class="fa fa-cogs fa-5x"></i>
<p>Services</p>
</div>
</div>
<div class="col-md-2">
<div class="content" id="tile4">
<i class="fa fa-comment fa-5x"></i>
<p>Feedback</p>
</div>
</div>
<div class="col-md-4">
<div class="content" id="tile5">
<i class="fa fa-briefcase fa-5x"></i>
<p>Portfolio</p>
</div>
</div>
<div class="col-md-3">
<div class="content" id="tile6">
<i class="fa fa-envelope fa-5x"></i>
<p>Contact</p>
</div>
</div>
<div class="col-md-5">
<div class="content" id="tile7">
<i class="fa fa-quote-right fa-5x"></i>
<p>Free Quote</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End of main layout-->
</body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/popper.min.js" ></script>
<script src="js/bootstrap.min.js" ></script>
</html>
Thanks

Use Bootstrap 5 grid system
Use class .row to make rows and class .col to make columns.
As stated on Bootstrap 5 official website: There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g. col-4 spans four).
This is why I used .col-3 four times. These four .col-3 make four main "sections". All together they make up to maximal 12 columns per row (i.e. 3 * 4 = 12). Inside these four main "sections" there are bunch of .rows and .cols.
Which .col should you use?
Use .col-5 and .col-11 like this:
.col-5 two times inside the same .row if you want to have
two boxes in a row or
.col-11 one time inside the same .row if you want to have one box in a row.
Why these two (i.e., .col-5 and .col-11)?
Why not .col-6 and .col-12? Well, if you use .col-6 two times inside the same .row, there will not be any space left in between these boxes. Remember, there are maximal 12 columns per row! If you use .col-6 two times, you fill up the whole row (6 * 2 = 12). But if you use .col-5 two times, there is still some space left (5 * 2 = 10).
Using .col-5 two times inside the same .row:
Using .col-6 two times inside the same .row:
By default, if you use .col-5 two times in the same .row (see the first image), these two columns will position themselves so that there will be some space in between them.
Use .col-11 purely from aesthetical standpoint. If you use .col-11 below or above a row with two .col-5 these two rows will be the same width (if you use .col-12 this row will be wider than the row below or above with two .col-5). But in order to achieve both rows to be the same width, you also need to add .d-flex .justify-content-around to all rows where you want to have two boxes in a row to "push these two boxes apart from each other" and therefore make this row the same width as the one below or above. For more information, see this link.
Other stuff
Use class .d-flex .justify-content-center for the horizontal alignment and class .d-flex .align-items-center for the vertical alignment. With these two you can center your content (i.e. Font Awesome icons and titles) inside all of these boxes horizontally and vertically at the same time.
Be careful, you also need to wrap your Font Awesome icon and the title with <div class='text-center'>...</div> like this if you want to center the text (not the boxes but the text):
<div class='col-5 d-flex justify-content-center align-items-center one'>
<div class='text-center'>
<i class='fa fa-home fa-5x'></i>
<div id='white'>My book</div>
</div>
</div>
At the end of the HTML add an image. Add CSS like this:
position: absolute; and z-index: -100; to put it in the background (without position: absolute; the z-index will not work and consequently the image will not be put in the background),
width: 100vw; and height: 100vh; to make the image full screen width and height and
filter: blur(50px); to add the blur effect.
The snippet
body {
margin: 0;
padding: 0;
}
#wrapper {
width: 100vw;
height: 100vh;
}
#inner_wrapper {
margin-top: -15vh;
margin-left: 10%;
}
.row {
margin: 0;
width: 100%;
height: 15vh;
/* Set this value the same as the margin-top for the #inner_wrapper. */
}
.col-5,
.col-11 {
border-radius: 1vw;
}
.fa-home {
font-size: 2.5vw;
color: white;
}
#white {
font-size: 1vw;
color: white;
}
.one {
background-color: #2c78e2;
}
.two {
background-color: #15bb88;
}
.three {
background-color: #e27b2c;
}
.four {
background-color: #1a65ac;
}
.five {
background-color: #15bb88;
}
.six {
background-color: #8cc63e;
}
.seven {
background-color: #e27b2c;
}
.eight {
background-color: #e27b2c;
}
.nine {
background-color: #b44be8;
}
.ten {
background-color: #2c78e2;
}
.eleven {
background-color: #2c78e2;
}
.twelve {
background-color: #8cc63e;
}
#img {
position: absolute;
width: 100vw;
height: 100vh;
z-index: -100;
filter: blur(50px);
-moz-filter: blur(50px);
-webkit-filter: blur(50px);
-o-filter: blur(50px);
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link href='https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl' crossorigin='anonymous'>
<script src='https://use.fontawesome.com/releases/v5.15.3/js/all.js' data-auto-replace-svg='nest'></script>
</head>
<body>
<div id='wrapper' class='d-flex align-items-center'>
<div id='inner_wrapper' class='row'>
<div class='col-3'>
<div class='row m-2 d-flex justify-content-around'>
<div class='col-5 d-flex justify-content-center align-items-center one'>
<div class='text-center'>
<i class='fa fa-home fa-5x'></i>
<div id='white'>My book</div>
</div>
</div>
<div class='col-5 d-flex justify-content-center align-items-center two'></div>
</div>
<div class='row m-2 d-flex justify-content-around'>
<div class='col-5 d-flex justify-content-center align-items-center three'></div>
<div class='col-5 d-flex justify-content-center align-items-center four'></div>
</div>
</div>
<div class='col-3'>
<div class='row m-2 d-flex justify-content-center'>
<div class='col-11 d-flex justify-content-center align-items-center five'></div>
</div>
<div class='row m-2 d-flex justify-content-around'>
<div class='col-5 d-flex justify-content-center align-items-center six'></div>
<div class='col-5 d-flex justify-content-center align-items-center seven'></div>
</div>
</div>
<div class='col-3'>
<div class='row m-2 d-flex justify-content-around'>
<div class='col-5 d-flex justify-content-center align-items-center eight'></div>
<div class='col-5 d-flex justify-content-center align-items-center nine'></div>
</div>
<div class='row m-2 d-flex justify-content-center'>
<div class='col-11 d-flex justify-content-center align-items-center ten'></div>
</div>
</div>
<div class='col-3'>
<div class='row m-2 d-flex justify-content-start'>
<div class='col-5 d-flex justify-content-center align-items-center eleven'></div>
</div>
<div class='row m-2 d-flex justify-content-start'>
<div class='col-5 d-flex justify-content-center align-items-center twelve'></div>
</div>
</div>
</div>
<img id='img' src='https://animals.sandiegozoo.org/sites/default/files/2016-11/animals_hero_giraffe_1_0.jpg'>
</div>
</body>
</html>

Bootstrap Card Solution
with minimal css
The Layout
#groups {
min-width: 1140px;
}
body {
background-image: url(https://i.imgur.com/W3BxqV7.png);
}
.item {
height: 100px;
margin: 5px;
}
.group.col {
margin: 10px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sheffield haworth </title>
<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">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" id="groups">
<div class="group col">
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
</div>
<div class="group col">
<div class="row">
<div class="card col item">
</div>
</div>
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
</div>
<div class="group col">
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
<div class="row">
<div class="card col item">
</div>
</div>
</div>
<div class="group col">
<div class="row" style="width:138px">
<div class="card col item">
</div>
</div>
<div class="row" style="width:138px">
<div class="card col item">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
With Styling
Automated using JavaScript, but easy to implement with CSS nonetheless
const colors = ["#2C78E2", "#43BB88", "#E27B2D", "#1A65AC", "#43BB88", "#8CC53E", "#E27B2D", "#E27B2D", "#B44BE8", "#2C78E2", "#2C78E2", "#8CC53E"];;
document.querySelectorAll('.item').forEach(function(e, i) {
e.style.backgroundColor = colors[i];
})
#groups {
min-width: 1140px;
}
body {
background-image: url(https://i.imgur.com/W3BxqV7.png);
}
.item {
height: 100px;
margin: 5px;
}
.group.col {
margin: 10px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sheffield haworth </title>
<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">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" id="groups">
<div class="group col">
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
</div>
<div class="group col">
<div class="row">
<div class="card col item">
</div>
</div>
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
</div>
<div class="group col">
<div class="row">
<div class="card col item">
</div>
<div class="card col item">
</div>
</div>
<div class="row">
<div class="card col item">
</div>
</div>
</div>
<div class="group col">
<div class="row" style="width:138px">
<div class="card col item">
</div>
</div>
<div class="row" style="width:138px">
<div class="card col item">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
With Content
const colors = ["#2C78E2", "#43BB88", "#E27B2D", "#1A65AC", "#43BB88", "#8CC53E", "#E27B2D", "#E27B2D", "#B44BE8", "#2C78E2", "#2C78E2", "#8CC53E"];;
document.querySelectorAll('.item').forEach(function(e, i) {
e.style.backgroundColor = colors[i];
})
#groups {
min-width: 1140px;
}
body {
background-image: url(https://i.imgur.com/W3BxqV7.png);
}
.item {
height: 100px;
margin: 5px;
}
.group.col {
margin: 10px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sheffield haworth </title>
<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">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" id="groups">
<div class="group col">
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
</div>
<div class="group col">
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Large</p>
</div>
</div>
</div>
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
</div>
<div class="group col">
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Large</p>
</div>
</div>
</div>
</div>
<div class="group col">
<div class="row" style="width:138px">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
<div class="row" style="width:138px">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Responsive
const colors = ["#2C78E2", "#43BB88", "#E27B2D", "#1A65AC", "#43BB88", "#8CC53E", "#E27B2D", "#E27B2D", "#B44BE8", "#2C78E2", "#2C78E2", "#8CC53E"];;
document.querySelectorAll('.item').forEach(function(e, i) {
e.style.backgroundColor = colors[i];
})
body {
background-image: url(https://i.imgur.com/W3BxqV7.png);
}
.item {
height: 100px;
margin: 5px;
}
.group.col {
margin: 10px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sheffield haworth </title>
<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">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" id="groups">
<div class="group col-md">
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
</div>
<div class="group col-md">
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Large</p>
</div>
</div>
</div>
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
</div>
<div class="group col-md">
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
<div class="row">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Large</p>
</div>
</div>
</div>
</div>
<div class="group col-md">
<div class="row" style="width:138px">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
<div class="row" style="width:138px">
<div class="card col item">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Small</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Bootstrap 4 ordering columns on mobile/desktop

I'm making a responsive layout for a ecommerce productdetailpage. I would like to order the columns different on mobile without getting white spaces. This is what it looks like currently:
The problem is on desktop when for example there is not content for box 3. There will be a huge white gap above box 5. So box 5 has to move under box 2. Like this:
I don't know if this is even possible through using framework Bootstrap 4, if not I'm looking forward to see how you would doing this without. Hopefully someone can help me out.
For the structure i use the following bootstrap grid:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-lg-7">
1
</div>
<div class="col-lg-5">
<div>2</div>
<div>3</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
4
</div>
<div class="col-lg-5">
5
</div>
</div>

It is necessary to know what layout should be applied, e.g. though JavaScript. Then when we will know what layout should be used, we can apply our layout.
So we car create a div and divide this div into two parts. Then using flex-grow property, we can fill the remaining space:
html,body{height:100%;}
.bg-purple {
background: rgb(48,0,50);
}
.bg-gray {
background: rgb(74,74,74);
}
.bg-blue {
background: rgb(50,101,196);
}
.bg-red {
background: rgb(196,50,53);
}
<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">
<div class="container-fluid h-100">
<div class="row justify-content-center h-100">
<div class="col-6 bg-red">
<div class="h-100 d-flex flex-column">
<div class="row justify-content-center bg-purple flex-grow-1">
<div class="text-white">
<div>1</div>
</div>
</div>
<div class="row justify-content-center bg-blue flex-grow-1">
<div class="text-white">4</div>
</div>
</div>
</div>
<div class="col-6 bg-gray">
<div class="h-100 d-flex flex-column">
<div class="row justify-content-center bg-info" style="height: 30px;">
<div class="text-white">
<div>Column with fixed height 2</div>
</div>
</div>
<div class="row justify-content-center bg-success flex-grow-1">
<div class="text-white">Fille the remaining space 5</div>
</div>
</div>
</div>
</div>
</div>
An example at jsfiddle can be seen here

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">50%</div>
<div class="col-sm-6" style="background-color:orange;">50%</div>
</div>
<br>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">33.33%</div>
<div class="col-sm-4" style="background-color:orange;">33.33%</div>
<div class="col-sm-4" style="background-color:yellow;">33.33%</div>
</div>
<br>
<!-- Or let Bootstrap automatically handle the layout -->
</div>
</div>

Bootstrap 4 div height not expanding to fit content

I'm using bootstrap 4 in an angular app to try and create a grid with several nested boxes, the second column has 2 rows, the bottom one needs to always vertically align to the bottom, ideally it should look like this:
(I achieved this by adding a bunch of br tags)
However, inreality the contect overlaps it it is small and looks like this:
Here is the css I use to align the bottom div:
.bottom {
position: absolute;
bottom: 0;
left: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-12 mb-3 border border-secondary rounded">
<div class="row">
<div class="col-2 p-2">
ABC123<br> Text
<br> More Text
</div>
<div class="col-5 border-right border-left border-secondary">
<div class="col-12 p-2">
<a [routerLink]="['/tickets', ticket.id]">Lorem Ipsum</a><br> This is a fake text<br>This is a fake text<br>This is a fake text<br>This is a fake text<br>
</div>
<div class="col-12 border-top border-secondary bottom">
<div class="row">
<div class="col-4 p-2">bottom-align</div>
<div class="col-4 p-2 border-left border-right border-secondary">bottom-align</div>
<div class="col-4 p-2">bottom-align</div>
</div>
</div>
</div>
<div class="col-3 p-2 border-right border-secondary">Test</div>
<div class="col-2 p-2 text-center">Test</div>
</div>
</div>
</div>
So far everything I have tried has failed, please advise.
Thanks

No extra CSS is needed. Use the Bootstrap utilility classes to make the inner row 'h-100' and then 'mt-auto' to push the content to the bottom...
<div class="col-5 border-left border-right border-secondary">
<div class="row h-100">
<div class="col-12 p-2">
<a [routerlink]="['/tickets', ticket.id]">Lorem Ipsum</a>
<br> This is a fake text
<br>This is a fake text
<br>This is a fake text
<br>This is a fake text
</div>
<div class="col-12 border-top border-secondary mt-auto">
<div class="row">
<div class="col-4 p-2">bottom-align</div>
<div class="col-4 p-2 border-left border-right border-secondary">bottom-align</div>
<div class="col-4 p-2">bottom-align</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/rxzugvCk80

I tried to replicate it, using flex instead of <br> tag. Is this what you are looking to achieve ?
.text-container {
display: flex;
flex-direction: column;
}
<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"
/>
<div class="row">
<div class="col-12 mb-3 border border-secondary rounded">
<div class="row">
<div class="col-2 p-2">
ABC123<br />
Text<br />
More Text
</div>
<div class="col-5 border-right border-left border-secondary p-0">
<div class="col-12 p-2 text-container">
<a [routerLink]="['/tickets', ticket.id]">Lorem Ipsum</a><br />
<span>This is a fake text</span>
</div>
<div class="col-12 border-top border-secondary bottom">
<div class="row">
<div class="col-4 p-2">bottom-align</div>
<div
class="col-4 p-2 border-left border-right border-secondary"
>
bottom-align
</div>
<div class="col-4 p-2">bottom-align</div>
</div>
</div>
</div>
<div class="col-3 p-2 border-right border-secondary">Test</div>
<div class="col-2 p-2 text-center">Test</div>
</div>
</div>
</div>

you remove css :
.bottom {
position:absolute;
bottom:0;
left:0;
}
and replace with shown in example: add the display class. and also add the container-fluid class for look as result.
.display{
display:flex;
flex-direction: column;
}
<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">
<div class="row">
<div class="col-12 mb-3 border border-secondary rounded">
<div class="row">
<div class="col-2 p-2 ">
ABC123<br>
Text<br>
More Text
</div>
<div class="col-5 border-right border-left border-secondary bootom">
<div class="row">
<div class="col-12 p-2 display">
<a [routerLink]="['/tickets', ticket.id]">Lorem Ipsum</a>
<span>This is a fake text</span>
<span>This is a fake text</span>
<span>This is a fake text</span>
</div>
<div class="col-12 border-top border-secondary bottom">
<div class="row">
<div class="col-4 p-2">bottom-align</div>
<div class="col-4 p-2 border-left border-right border-secondary">bottom-align</div>
<div class="col-4 p-2">bottom-align</div>
</div>
</div>
</div>
</div>
<div class="col-3 p-2 border-right border-secondary">Test</div>
<div class="col-2 p-2 text-center">Test</div>
</div>
</div>
</div>
</div>