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>
Related
I created a bootstrap grid that has 3 rows with the following layout.
All I'm trying to do is add a bit of margin between them but as you can see, the columns and rows are not longer properly aligned.
Is there a way to fix it or maybe there's a better way to achieve what I want?
#featured {
margin-bottom: 15px;
}
.featured-1 {
height: 200px;
}
.featured-2 {
height: 50%;
margin-left: 5px;
}
.featured-3 {
height: 50%;
margin-left: 5px;
margin-top: 5px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container">
<div class="row featured-1" id="featured">
<div class="col-md-7 col-sm-12 bg-warning">
Featured 1
</div>
<div class="col-md-5">
<div class="row featured-2">
<div class="col-md-12 col-sm-12 bg-danger">
Featured 2
</div>
</div>
<div class="row featured-3">
<div class="col-md-12 col-sm-12 bg-success">
Featured 3
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 bg-primary">For reference</div>
</div>
</div>
The official bootstrap document recommended the use of Gutter.
you can do this like below:
.featured-1 {
height: 200px;
}
.featured-2, .featured-3 {
height: 50%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row featured-1" id="featured">
<div class="col-md-7 col-sm-12 bg-warning">
Featured 1
</div>
<div class="col-md-5 px-4">
<div class="row featured-2">
<div class="col-md-12 col-sm-12 bg-danger">
Featured 2
</div>
</div>
<div class="row featured-3">
<div class="col-md-12 col-sm-12 bg-success gy-2">
Featured 3
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 bg-primary gy-2">For reference</div>
</div>
</div>
There's already padding on the columns, which acts as gutters. I'd put the background on your column content instead.
#featured {
margin-bottom: 15px;
}
.featured-1>div {
height: 200px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container">
<div class="row" id="featured">
<div class="col-7 featured-1">
<div class="bg-warning">Featured 1</div>
</div>
<div class="col-5 d-flex flex-column">
<div class="featured-2 flex-grow-1 bg-danger mb-1">Featured 2</div>
<div class="featured-3 flex-grow-1 bg-success mt-1">Featured 3</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="bg-primary">For reference</div>
</div>
</div>
</div>
I have some card with bootstrap and I would like to have left margin...I would like the cards to be evenly distributed across the width.
Basically, You can see that there is red on the right, and I wish there wasn't...
.azer {
background: red;
}
.card-annuaire {
background: green;
border: 0;
border-radius: 0;
margin-right: 1rem;
}
.card-annuaire .card-body {
text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-center my-5">
<div class="col-12">
<div class="qsdf">
<div class="azer">
<div class="col-md-12">
<div class="row g-0">
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div>
<!-- /.card-text -->
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3 grid-item-annuaire letter">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
</div>
<!-- /.card-text -->
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div>
<!-- /.card-text -->
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div>
<!-- /.card-text -->
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can see here: https://codepen.io/zazzou/pen/abYdZQL
EDIT
This is what I would like to do : (no margin left and right before and after the first card and last card)
Remove the margin-right: 1rem; from the .card-annuaire class, and replace g-0 on your row class to gx-3. This adds gutters in between your cards
Edit: Check this link out for more info on how gutters work in bootstrap: Bootstrap Gutters
Restore the column gutters
Make the cards full width
Place the red background on the row rather than a separate element
.azer {
background: red;
}
.card-annuaire {
width: 100%;
background: green;
border: 0;
border-radius: 0;
margin-right: 1rem;
}
.card-annuaire .card-body {
text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-center my-5">
<div class="col-12">
<div class="qsdf">
<div class="col-md-12">
<div class="row azer">
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div>
</div>
</div>
</div>
<div class="col-md-3 grid-item-annuaire letter">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
</div>
</div>
</div>
</div>
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div>
</div>
</div>
</div>
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to remove margin right from .card-annuaire Like this:
.card-annuaire {
background:green;
border:0;
border-radius: 0;
.card-body {
text-align: center;
}
Update
If you margin on both sides then you can do:
.card-annuaire {
background:green;
border:0;
border-radius: 0;
margin:0 1rem;
.card-body {
text-align: center;
}
.azer {
background: red;
}
.card-annuaire {
background:green;
border:0;
border-radius: 0;
margin:0 1rem;
.card-body {
text-align: center;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center my-5">
<div class="col-12">
<div class="qsdf" >
<div class="azer">
<div class="col-md-12">
<div class="row g-0">
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div><!-- /.card-text -->
</div><!-- /.card-body -->
</div><!-- /.card -->
</div><!-- /.col -->
<div class="col-md-3 grid-item-annuaire letter">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
</div><!-- /.card-text -->
</div><!-- /.card-body -->
</div><!-- /.card -->
</div><!-- /.col -->
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div><!-- /.card-text -->
</div><!-- /.card-body -->
</div><!-- /.card -->
</div><!-- /.col -->
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div><!-- /.card-text -->
</div><!-- /.card-body -->
</div><!-- /.card -->
</div><!-- /.col -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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>
I want to create a web page with html and bootstrap 4 and I'm having trouble arranging my page following this template.
<!doctype html>
<html lang="en">
<head>
<title>Hepatrote with Bootstrap v4</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<p class="h5 my-0 me-md-auto fw-normal">Hepatrote</p>
<nav class="my-2 my-md-0 me-md-3">
<a class="p-2 text-dark" href="#">Accueil</a>
<a class="p-2 text-dark" href="#">Blog</a>
<a class="p-2 text-dark" href="#">Symptoms</a>
<a class="p-2 text-dark" href="#">Contacts</a>
</nav>
</header>
<main class="container">
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<!-- How to arrange these elements: left side : Symptoms with text and button 'How to protect yourself ?'
; rgiht side : Image of disease -->
<!-- How to arrange these elements: Symptoms with text and 4 bootstrap cards With this arrangement-->
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
</footer>
</main>
</body>
</html>
In my code, you can see the based structure : head,body and I also added bootstrap link. My problem is to arrange the elements as shown in the picture.
Does anyone have an idea?
Here is basic stracture of your image using bootstrap 4, this is not responsive so you need to some work for responsive.
Code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Hepatrote with Bootstrap v4</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<header class="d-flex justify-content-between flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<p class="h5 my-0 me-md-auto fw-normal">Hepatrote</p>
<nav class="my-2 my-md-0 me-md-3">
<a class="p-2 text-dark" href="#">Accueil</a>
<a class="p-2 text-dark" href="#">Blog</a>
<a class="p-2 text-dark" href="#">Symptoms</a>
<a class="p-2 text-dark" href="#">Contacts</a>
</nav>
</header>
<main class="container">
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto">
<div class="row">
<div class="col">
<h1>Symptoms</h1>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</div>
<div class="col">
<h1>Image of dieses</h1>
</div>
</div>
<div class="row">
<div class="col-12">
<h1 class="text-center">Syptoms</h1>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
</div>
<div class="row">
<div class="col-6 ">
<div class="card">
<div class="card-body">
<div class="w-50 d-inline-block" >
<h5>Image1</h5>
</div>
<div class="w-50 d-inline-block">
<h5>Sympt1</h5>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="w-50 d-inline-block" >
<h5>Image1</h5>
</div>
<div class="w-50 d-inline-block">
<h5>Sympt1</h5>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="w-50 d-inline-block" >
<h5>Image1</h5>
</div>
<div class="w-50 d-inline-block">
<h5>Sympt1</h5>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="w-50 d-inline-block" >
<h5>Image1</h5>
</div>
<div class="w-50 d-inline-block">
<h5>Sympt1</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
</footer>
</main>
</body>
</html>
`
main {
width:90%;
}
#maincss {
position: relative;
height: 100%;
width:100%;
margin:auto;
}
#maincol {
position: relative;
padding: 1rem;
margin:auto;
}
#mainimg {
position:relative;
max-width:100%;
}
#3rdcss {
position: relative;
min-height: 100%;
}
img {
position:relative;
width:100%;
}
#3rdcol {
position: relative;
min-height: 100%;
margin: auto;
}
#cardzcol {
position:relative;
margin:auto;
padding:0.5rem;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Hepatrote with Bootstrap v4</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<header class="d-flex justify-content-between flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<p class="h5 my-0 me-md-auto fw-normal">Hepatrote</p>
<nav class="my-2 my-md-0 me-md-3">
<a class="p-2 text-dark" href="#">Accueil</a>
<a class="p-2 text-dark" href="#">Blog</a>
<a class="p-2 text-dark" href="#">Symptoms</a>
<a class="p-2 text-dark" href="#">Contacts</a>
</nav>
</header>
<main class="container">
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<div id="maincss" class="row">
<div id="maincol" class="col-6">
<h2>Title</h2>
<p>text relative</p>
<input type="button" class="btn btn-primary" value="button" />
</div>
<div id="maincol" class="col-6 ">
<div id="mainimg"><img src="https://tmladenov.tech/images/img-test.png" title="img" /></div></div>
<div id="maincol" class="col-12 ">
<div id="3rdcss" class="row ">
<div id="3rdttl" class="col-12 ">
<h2>Title</h2>
<p>some more text to be shown</p>
</div>
<div id="cardzcol" class="col-6 ">
<div id="cardz" class="card">
<div class="card-body">
<div id="cardrw" class="row">
<div id="crdimgcol" class="col-6"><img src="https://tmladenov.tech/images/img-test.png" title="img" /></div>
<div id="crdtxtcol" class="col-6">
<h5 class="card-title">[card-1]</h5>
<p class="card-text">some text here</p>
</div>
</div>
</div>
</div>
</div>
<div id="cardzcol" class="col-6 ">
<div id="cardz" class="card">
<div class="card-body">
<div id="cardrw" class="row">
<div id="crdimgcol" class="col-6"><img src="https://tmladenov.tech/images/img-test.png" title="img" /></div>
<div id="crdtxtcol" class="col-6">
<h5 class="card-title">[card-2]</h5>
<p class="card-text">some text here</p>
</div>
</div>
</div>
</div>
</div>
<div id="cardzcol" class="col-6 ">
<div id="cardz" class="card">
<div class="card-body">
<div id="cardrw" class="row">
<div id="crdimgcol" class="col-6"><img src="https://tmladenov.tech/images/img-test.png" title="img" /></div>
<div id="crdtxtcol" class="col-6">
<h5 class="card-title">[card-3]</h5>
<p class="card-text">some text here</p>
</div>
</div>
</div>
</div>
</div>
<div id="cardzcol" class="col-6 ">
<div id="cardz" class="card">
<div class="card-body">
<div id="cardrw" class="row">
<div id="crdimgcol" class="col-6"><img src="https://tmladenov.tech/images/img-test.png" title="img" /></div>
<div id="crdtxtcol" class="col-6">
<h5 class="card-title">[card-4]</h5>
<p class="card-text">some text here</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
[footer]
</footer>
</main>
</body>
</html>
so here is my html :
<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">
<div class="row">
<div class="col-lg-9 col-md-12">
<div class="container">
<div class="row bg-white">
<div class="col-lg-4 col-md-6 p-2">
<div class="card">
<div class="card-img">
<img src="#image" class="img-fluid">
</div>
<div class="card-img-overlay">
<div class="card-title">
<h5>Title</h5>
</div>
<div class="card-text">
some texts
<div class="dlbut p-2">
<center>
<h5>link</h5>
</center>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 p-2">
<div class="card">
<div class="card-img">
<img src="#image" class="img-fluid">
</div>
<div class="card-img-overlay">
<div class="card-title">
<h5>Title</h5>
</div>
<div class="card-text">
some texts
<div class="dlbut p-2">
<center>
<h5>link</h5>
</center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
as you can see i have a column which is set to col-lg-9 col-md-12 which i'm using it to have some sort of post loop in it. and each post gonna be the col-lg-4 col-md-6.
the problem is the first column works fine, it's full screen on medium sized devices but the second column doesn't act like it is expected on small devices. i set it col-md-6 so it will be half of the screen wide on tablets for example and be full screen on mobile phones. but it won't.it will be half of the screen wide on small screens as well.
i also tried to add col-sm-12 but same results again.
i looked diffrent topics,... most people didn't use .row which that isn't my case.
also i tried it without the second container and i got same results.
few days ago i bought a license ,also if you like to use it free you can use it some days and can assist you : pingendo.com
is nice bootstrap but ,sometimes to speed up the things you should get some improvements
..anyway the thinks can look good like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="theme.css" type="text/css">
</head>
<body>
<!--
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
<div class="row " draggable="true">
<div class="col-md-12">
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-12">
<div class="container">
<div class="row bg-white">
<div class="col-lg-4 col-md-6 p-2">
<div class="card">
<div class="card-img">
<img src="#image" class="img-fluid">
</div>
<div class="card-img-overlay">
<div class="card-title">
<h5>Title</h5>
</div>
<div class="card-text"> some texts <div class="dlbut p-2">
<center>
<h5>link</h5>
</center>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 p-2">
<div class="card">
<div class="card-img">
<img src="#image" class="img-fluid">
</div>
<div class="card-img-overlay">
<div class="card-title">
<h5>Title</h5>
</div>
<div class="card-text"> some texts <div class="dlbut p-2">
<center>
<h5>link</h5>
</center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>-->
<!-- i did this with my Pingendo.com licensed -->
<div class="row" draggable="true">
<div class="col-md-6 col-12 col-sm-12 col-lg-6" >
<div class="card" >
<img class="card-img-top" src="https://picsum.photos/600/600?image=1074" alt="Card image">
<div class="card-body text-center">
<h4 class="card-title">John Catel</h4>
<p class="card-text">Some example text.</p>
See Profile
</div>
</div>
</div>
<div class="col-md-6 col-12 col-sm-12 col-lg-6">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/600/600?image=1074" alt="Card image">
<div class="card-body text-center">
<h4 class="card-title">John Catel</h4>
<p class="card-text">Some example text.</p>
See Profile
</div>
</div>
</div>
</div>
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 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>
</body>
</html>
Have you tried bootstrap 4 with
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>