How to arrange bootstrap4 cards - css

What is the best way to arrange 3 bootstrap cards in the following orders:
Card1 on the left side
Card2 and Card3 are on the right side
Card2 has a fixed height
Card3 is flexible depending on the size of Card2
Card3 has a custom scroll bar
Cards are responsive and placed one after another on mobile screens.
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-6 border">
<div class="card shadow m-5">
<div class="card-body" style="height:300px;">
<h3>Card 1</h3>
</div>
</div>
</div>
<div class="col-md-6 border">
<div class="d-flex flex-column">
<div class="d-flex align-items-start">
<div class="card shadow m-5">
<div class="card-body">
<h3>Card 2</h3>
</div>
</div>
</div>
<div class="d-flex align-items-stretch">
<div class="card shadow m-5">
<div class="card-body">
<h3>Card 3</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean finibus massa nec nisl placerat sollicitudin. Phasellus mi massa, sollicitudin eu facilisis sit amet, consequat sit amet urna. Suspendisse laoreet ipsum et varius lobortis. Duis facilisis dui vel finibus dignissim. Nulla facilisi. Donec porttitor nec justo sit amet dapibus. Nam in iaculis purus.
Aliquam at blandit sem. Aenean auctor varius iaculis. In pellentesque orci quis ipsum dapibus, eu mattis nisi feugiat. Cras sollicitudin, magna eget semper placerat, leo dui convallis leo, eget vehicula massa lorem ut orci. Curabitur faucibus nec quam vel vestibulum. Morbi ipsum justo, imperdiet ut laoreet non, feugiat consectetur neque. Pellentesque rutrum bibendum risus, in gravida nisi tristique condimentum. Integer quis varius nulla, sit amet consectetur dui. In rutrum accumsan justo. Maecenas id elementum nisl, nec vulputate justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum facilisis varius. Suspendisse potenti. Maecenas lobortis, justo sed facilisis venenatis, lacus dolor semper ex, in interdum risus metus ac velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer eget porta magna.
Vestibulum cursus vitae nulla in aliquam. Vivamus tincidunt ultricies vehicula. Proin nec nunc velit. Nulla sit amet accumsan lacus. Donec nunc purus, egestas ut lorem eget, pretium molestie lectus. Donec pellentesque tempor libero, id sollicitudin tortor finibus at. Donec sagittis nisl eget leo molestie commodo. Nullam posuere felis sed mi euismod, at mattis sapien pellentesque. Morbi sed dui molestie, feugiat sem in, accumsan nisl. Vivamus luctus blandit lacus nec imperdiet. Pellentesque non dapibus risus. Suspendisse vestibulum odio purus, nec placerat eros ultricies nec. Curabitur aliquam sollicitudin ligula, vitae semper ante ornare ac.
Proin gravida bibendum urna id dictum. Morbi nec venenatis odio, nec pulvinar nisi. Sed vehicula nunc augue, eu fringilla magna ornare sed. Curabitur ut eleifend magna. Sed elementum odio dignissim turpis scelerisque, in pulvinar mauris vehicula. Donec dignissim ante velit, vitae imperdiet ipsum placerat at. Etiam id rutrum eros, maximus consectetur ex. Praesent egestas tellus et aliquam rutrum. Praesent eget faucibus odio. Proin quis libero eget risus faucibus faucibus. Curabitur feugiat nibh nec dignissim tempor. Nam ac eros nulla.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>


You don't need extra CSS. Use the Bootstrap utility classes. In order to make the right columns the height of the left column (the shorter column), you must use position: absolute as explained here.
There are Bootstrap classes for this:
h-100 position-absolute overflow-hidden on right col inner div
overflow-hidden on the Card 3
<div class="container">
<div class="row">
<div class="col-md-6 border">
<div class="card shadow m-5">
<div class="card-body" style="height:300px;">
<h3>Card 1</h3>
</div>
</div>
</div>
<div class="col-md-6 border">
<div class="d-flex flex-column h-100 position-absolute overflow-hidden">
<div class="d-flex align-items-start">
<div class="card shadow m-5">
<div class="card-body">
<h3>Card 2</h3>
</div>
</div>
</div>
<div class="d-flex align-items-stretch overflow-hidden">
<div class="card shadow m-5 overflow-auto">
<div class="card-body">
<h3>Card 3</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean finibus massa nec nisl placerat sollicitudin. Phasellus mi massa, sollicitudin eu facilisis sit amet, consequat sit amet urna. Suspendisse laoreet ipsum et varius lobortis. Duis facilisis dui vel finibus dignissim. Nulla facilisi. Donec porttitor nec justo sit amet dapibus. Nam in iaculis purus. Aliquam at blandit sem. Aenean auctor varius iaculis. In pellentesque orci quis ipsum dapibus, eu mattis nisi feugiat. Cras sollicitudin, magna eget semper placerat, leo dui convallis leo, eget vehicula massa lorem ut orci. Curabitur faucibus nec quam vel vestibulum. Morbi ipsum justo, imperdiet ut laoreet non, feugiat consectetur neque. Pellentesque rutrum bibendum risus, in gravida nisi tristique condimentum. Integer quis varius nulla, sit amet consectetur dui. In rutrum accumsan justo. Maecenas id elementum nisl, nec vulputate justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum facilisis varius. Suspendisse potenti. Maecenas lobortis, justo sed facilisis venenatis, lacus dolor semper ex, in interdum risus metus ac velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer eget porta magna. Vestibulum cursus vitae nulla in aliquam. Vivamus tincidunt ultricies vehicula. Proin nec nunc velit. Nulla sit amet accumsan lacus. Donec nunc purus, egestas ut lorem eget, pretium molestie lectus. Donec pellentesque tempor libero, id sollicitudin tortor finibus at. Donec sagittis nisl eget leo molestie commodo. Nullam posuere felis sed mi euismod, at mattis sapien pellentesque. Morbi sed dui molestie, feugiat sem in, accumsan nisl. Vivamus luctus blandit lacus nec imperdiet. Pellentesque non dapibus risus. Suspendisse vestibulum odio purus, nec placerat eros ultricies nec. Curabitur aliquam sollicitudin ligula, vitae semper ante ornare ac. Proin gravida bibendum urna id dictum. Morbi nec venenatis odio, nec pulvinar nisi. Sed vehicula nunc augue, eu fringilla magna ornare sed. Curabitur ut eleifend magna. Sed elementum odio dignissim turpis scelerisque, in pulvinar mauris vehicula. Donec dignissim ante velit, vitae imperdiet ipsum placerat at. Etiam id rutrum eros, maximus consectetur ex. Praesent egestas tellus et aliquam rutrum. Praesent eget faucibus odio. Proin quis libero eget risus faucibus faucibus. Curabitur feugiat nibh nec dignissim tempor. Nam ac eros nulla.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Demo


Some media-queries and custom CSS to get desire output.
🔗 Codepen Example
Code Snippet:
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.card-one .card-body {
height: 200px;
}
.align-items-start .card-body {
height: 200px;
}
.align-items-stretch .card-body {
max-height: 200px;
overflow-x: auto;
}
#media screen and (min-width: 450px) {
.card-container {
display: inline-flex;
}
.card-one .card-body {
height: 450px;
max-height: 450px;
}
}
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 card-container">
<div class="col-md-6 border card-one">
<div class="card shadow m-4">
<div class="card-body">
<h3>Card 1</h3>
</div>
</div>
</div>
<div class="col-md-6 border">
<div class="d-flex flex-column">
<div class="d-flex align-items-start">
<div class="card shadow m-4 container-fluid">
<div class="card-body">
<h3>Card 2</h3>
</div>
</div>
</div>
<div class="d-flex align-items-stretch">
<div class="card shadow m-4">
<div class="card-body" >
<h3>Card 3</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean finibus massa nec nisl placerat sollicitudin. Phasellus mi massa, sollicitudin eu facilisis sit amet, consequat sit amet urna. Suspendisse laoreet ipsum et varius lobortis. Duis facilisis dui vel finibus dignissim. Nulla facilisi. Donec porttitor nec justo sit amet dapibus. Nam in iaculis purus.
Aliquam at blandit sem. Aenean auctor varius iaculis. In pellentesque orci quis ipsum dapibus, eu mattis nisi feugiat. Cras sollicitudin, magna eget semper placerat, leo dui convallis leo, eget vehicula massa lorem ut orci. Curabitur faucibus nec quam vel vestibulum. Morbi ipsum justo, imperdiet ut laoreet non, feugiat consectetur neque. Pellentesque rutrum bibendum risus, in gravida nisi tristique condimentum. Integer quis varius nulla, sit amet consectetur dui. In rutrum accumsan justo. Maecenas id elementum nisl, nec vulputate justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum facilisis varius. Suspendisse potenti. Maecenas lobortis, justo sed facilisis venenatis, lacus dolor semper ex, in interdum risus metus ac velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer eget porta magna.
Vestibulum cursus vitae nulla in aliquam. Vivamus tincidunt ultricies vehicula. Proin nec nunc velit. Nulla sit amet accumsan lacus. Donec nunc purus, egestas ut lorem eget, pretium molestie lectus. Donec pellentesque tempor libero, id sollicitudin tortor finibus at. Donec sagittis nisl eget leo molestie commodo. Nullam posuere felis sed mi euismod, at mattis sapien pellentesque. Morbi sed dui molestie, feugiat sem in, accumsan nisl. Vivamus luctus blandit lacus nec imperdiet. Pellentesque non dapibus risus. Suspendisse vestibulum odio purus, nec placerat eros ultricies nec. Curabitur aliquam sollicitudin ligula, vitae semper ante ornare ac.
Proin gravida bibendum urna id dictum. Morbi nec venenatis odio, nec pulvinar nisi. Sed vehicula nunc augue, eu fringilla magna ornare sed. Curabitur ut eleifend magna. Sed elementum odio dignissim turpis scelerisque, in pulvinar mauris vehicula. Donec dignissim ante velit, vitae imperdiet ipsum placerat at. Etiam id rutrum eros, maximus consectetur ex. Praesent egestas tellus et aliquam rutrum. Praesent eget faucibus odio. Proin quis libero eget risus faucibus faucibus. Curabitur feugiat nibh nec dignissim tempor. Nam ac eros nulla.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>

Related

2 Bulma questions - text absolute center and columns min-width

am new to Bulma and flex to be honest.
So i have the following code:
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any nav burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target;
var $target = document.getElementById(target);
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
#font-face {
font-family: Pacifico;
src: url(fonts/pacifico/Pacifico-Regular.ttf);
}
.pacifico {
font-family: Pacifico;
font-size:1.5em;
color:red;
}
.top_bg {background-image: url("https://png.pngtree.com/thumb_back/fw800/background/20200113/pngtree-ornate-cross-rhombus-repeating-symmetric-dark-blue-blue-and-white-tile-image_327096.jpg"); background-repeat:repeat-x;}
.top_bg div {height:125px;}
.bottom_bg {background-image: url("images/bg_bottom_repeat.jpeg"); background-repeat:repeat-x;}
// .bird { background-image: url("images/bird.png"); background-position: 50% 30%; background-attachment: inherit;}
.under {text-decoration:underline;}
.navbar-item.is-mega {
position: static;
.is-mega-menu-title {
margin-bottom: 0;
padding: .375rem 1rem;
}
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>222</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css">
</head>
<body>
<div class="columns is-mobile is-centered is-vcentered top_bg mt-0 mb-0">
<div class="column is-mobile pt-0 is-narrow"><img src="https://www.aiesec.in/wp-content/uploads/2018/08/Captain-america-1.jpg" style="height:125px"></div>
<div class="column has-text-centered"><span class="pacifico"><nobr>God save the Queen</nobr></span></div>
</div>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">1</a>
<a class="navbar-item">2</a>
<a class="navbar-item">3</a>
</div>
</div>
</nav>
<div class="columns mt-0 pt-0 mb-5">
<div class="column"></div>
<div class="column is-three-quarters"><img src="https://static.educalingo.com/img/en/800/african-elephant.jpg" class="box mr-5 is-pulled-left" style="width:20%;">
<p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum ullamcorper felis, nec maximus est suscipit nec. Proin vulputate rutrum metus id mattis. Proin eget sapien lacus. Phasellus a elit ante. Donec accumsan vel elit id malesuada. Sed et cursus massa. Nullam feugiat iaculis laoreet.</p>
<p class="mb-3">Curabitur tristique interdum luctus. Proin rutrum augue ac porta aliquet. Suspendisse quis iaculis dolor. Sed nec arcu sapien. Phasellus vitae convallis risus. Donec vel consectetur nulla, aliquet lacinia leo. Nullam vitae mauris dolor. Etiam ac malesuada tellus, id lacinia felis. Fusce ut turpis metus. Maecenas in interdum nulla. Quisque faucibus vitae est ut euismod. Nullam eu lorem elementum, tempor felis quis, maximus sem. Sed at ipsum fringilla, cursus nunc sed, ullamcorper elit. Aenean eget tortor quam.</p>
<p class="mb-3">Aliquam id ex efficitur quam faucibus bibendum a quis augue. Suspendisse potenti. Maecenas neque lectus, sagittis vitae porta quis, consequat vel lorem. Aliquam vitae gravida justo. Aliquam at orci eget magna scelerisque lacinia. Mauris ornare tincidunt suscipit. Fusce scelerisque erat sit amet dui mattis facilisis. Etiam nec lectus rutrum, viverra purus ultricies, ullamcorper eros.</p>
<p class="mb-3">Suspendisse elementum justo ut enim imperdiet ultricies. Sed non dolor tincidunt, cursus nunc sed, fringilla ligula. Duis a commodo nulla. Fusce vulputate molestie porta. Pellentesque at ligula orci. Proin hendrerit commodo finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eleifend gravida libero, sed bibendum sem pulvinar vitae.</p>
<p class="mb-3">Fusce sapien nulla, hendrerit et congue quis, hendrerit sit amet risus. Ut dignissim sodales nunc, sit amet viverra libero sagittis quis. Ut porta porta dolor, non aliquet massa faucibus id. Sed faucibus mollis mollis. Curabitur scelerisque lorem dolor, vitae aliquet magna aliquam vitae. Suspendisse est lorem, feugiat sit amet leo nec, vestibulum convallis quam. Praesent vitae arcu dapibus, euismod augue quis, bibendum ligula. Vestibulum quis eros dui. Donec pharetra sapien ligula, vel egestas est ornare ut. Suspendisse hendrerit, velit ut fringilla bibendum, velit elit congue neque, id rhoncus risus sapien vel ligula. Donec laoreet faucibus nulla, sed varius erat tincidunt sed. Donec vitae mi magna. Maecenas mollis facilisis tellus id convallis. Quisque sit amet egestas erat, tincidunt pretium metus. In hac habitasse platea dictumst. Nulla non laoreet lacus.</p>
</div>
<div class="column"></div>
</div>
</body>
The first question is how to center vertical text "God save the queen"? I've tried native Bulma classes as is-vcentered but no suсcess.
Second one - if my page is resized to a small mobile- size 2 columns that makes spaces at left / right in main section total disappear with no space left at all . Is there any build in classes for min-width or so?
We'll be appreciate for any kind of help.

Vertically center a flex item whos parent is flex-column

I can't make my flex item be vertically aligned in the remaining space it has.
This is what I currently have:
<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="parent d-flex flex-column py-2">
<div class="container p-0 flex-grow-1">
<div class="mb-1 d-flex justify-content-center">
<img src="https://dummyimage.com/300x200/000/fff"></img>
<!-- need to vertically center this image -->
</div>
</div>
<div class="container p-0 flex-grow-1">
<div class="mb-1 d-flex justify-content-center">
Suspendisse non nisl sit amet velit hendrerit rutrum. Vestibulum fringilla pede sit amet augue. Praesent nec nisl a purus blandit viverra. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Proin viverra, ligula sit amet ultrices semper, ligula
arcu tristique sapien, a accumsan nisi mauris ac eros. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Aenean imperdiet. Maecenas nec odio et ante tincidunt tempus. Praesent nonummy mi in odio. Nulla consequat massa quis
enim. Morbi mollis tellus ac sapien. In turpis. Curabitur suscipit suscipit tellus. Cras id dui. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Curabitur suscipit suscipit tellus. Nullam nulla eros, ultricies sit amet, nonummy
id, imperdiet feugiat, pede. Aenean viverra rhoncus pede. Maecenas nec odio et ante tincidunt tempus. Vivamus consectetuer hendrerit lacus.
</div>
</div>
</div>
I'm trying to vertically center the image within its container, but it doesn't work.
I tried using align-items-center, align-self-center and even justify-content-center maybe because it's a column direction, in multiple places, but non works. The image always shows at the top of the container.

UPDATED:
I didn't notice you mentioned your code in example it's just a part of content and used as right side of page.
Regarding that, I've simulated height of .parent block to stretch it.
The point is, BS5 .container not flex by itself. You have to add .d-flex class of display: flex; property to handle it in flex-way, see code comments for more details.
/* simulate parent height */
.parent {
min-height: 1000px;
}
/* show containers' area */
.container {
border: 1px solid;
}
/* code for Option-2 */
/* :first-of-type - will be applied only for first .container */
.parent.parent--tmp > .container:first-of-type {
display: flex;
align-items: center;
justify-content: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Option-1: changing markup -->
<div class="parent d-flex flex-column py-2">
<!--
update container class list
add "d-flex align-items-center justify-content-center"
-->
<div class="container p-0 flex-grow-1 d-flex align-items-center justify-content-center">
<div class="mb-1 d-flex justify-content-center">
<!-- adjust closing tag for image -->
<img src="https://dummyimage.com/300x200/000/fff" />
<!-- need to vertically center this image -->
</div>
</div>
<div class="container p-0 flex-grow-1">
<div class="mb-1 d-flex justify-content-center">
<p>
Suspendisse non nisl sit amet velit hendrerit rutrum. Vestibulum fringilla pede sit amet augue. Praesent nec nisl a purus blandit viverra. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Proin viverra, ligula sit amet ultrices semper, ligula
arcu tristique sapien, a accumsan nisi mauris ac eros. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Aenean imperdiet. Maecenas nec odio et ante tincidunt tempus. Praesent nonummy mi in odio. Nulla consequat massa
quis enim. Morbi mollis tellus ac sapien. In turpis. Curabitur suscipit suscipit tellus. Cras id dui. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Curabitur suscipit suscipit tellus. Nullam nulla eros, ultricies sit amet,
nonummy id, imperdiet feugiat, pede. Aenean viverra rhoncus pede. Maecenas nec odio et ante tincidunt tempus. Vivamus consectetuer hendrerit lacus.
</p>
</div>
</div>
</div>
<!-- Option-2: update only by CSS rule -->
<!-- added "parent--tmp" just for example purposes -->
<div class="parent parent--tmp d-flex flex-column py-2">
<div class="container p-0 flex-grow-1">
<div class="mb-1 d-flex justify-content-center">
<!-- adjust closing tag for image -->
<img src="https://dummyimage.com/300x200/000/fff" />
<!-- need to vertically center this image -->
</div>
</div>
<div class="container p-0 flex-grow-1">
<div class="mb-1 d-flex justify-content-center">
<p>
Suspendisse non nisl sit amet velit hendrerit rutrum. Vestibulum fringilla pede sit amet augue. Praesent nec nisl a purus blandit viverra. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Proin viverra, ligula sit amet ultrices semper, ligula
arcu tristique sapien, a accumsan nisi mauris ac eros. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Aenean imperdiet. Maecenas nec odio et ante tincidunt tempus. Praesent nonummy mi in odio. Nulla consequat massa
quis enim. Morbi mollis tellus ac sapien. In turpis. Curabitur suscipit suscipit tellus. Cras id dui. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Curabitur suscipit suscipit tellus. Nullam nulla eros, ultricies sit amet,
nonummy id, imperdiet feugiat, pede. Aenean viverra rhoncus pede. Maecenas nec odio et ante tincidunt tempus. Vivamus consectetuer hendrerit lacus.
</p>
</div>
</div>
</div>
Outdated answer:
Check BS grid system and alignment how to make it two rows.
Here is code example:
.parent.d-flex {
flex-direction: row !important;
align-items: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<p class="display-6">Without markup changes</p>
<div class="parent d-flex flex-column py-2">
<div class="container p-0 flex-grow-1">
<div class="mb-1 d-flex justify-content-center">
<img src="https://i.picsum.photos/id/237/300/200.jpg?hmac=WSdbBEXvCVSqNN1HnCzm7ohp6DhAJfl9t3TcqBNDn_Q" />
</div>
</div>
<div class="container p-0 flex-grow-1">
<div class="mb-1 d-flex justify-content-center">
<p>Vivamus euismod mauris. In ac felis quis tortor malesuada pretium. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Phasellus viverra nulla ut metus varius laoreet. Curabitur ullamcorper ultricies nisi. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Sed hendrerit. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Praesent
vestibulum dapibus nibh. Cras varius. Praesent ac massa at ligula laoreet iaculis. Sed cursus turpis vitae tortor. Curabitur at lacus ac velit ornare lobortis. Maecenas vestibulum mollis diam. Fusce risus nisl, viverra et, tempor et, pretium in,
sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas
libero turpis vel mi. Quisque id mi. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Proin viverra, ligula
sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Phasellus blandit leo ut odio. Curabitur vestibulum aliquam leo.</p>
</div>
</div>
</div>
<hr />
<p class="display-6">BS 5 example</p>
<div class="container">
<div class="row align-items-center">
<div class="col">
<img class="img-fluid" src="https://i.picsum.photos/id/237/300/200.jpg?hmac=WSdbBEXvCVSqNN1HnCzm7ohp6DhAJfl9t3TcqBNDn_Q" />
</div>
<div class="col">
<p>Vivamus euismod mauris. In ac felis quis tortor malesuada pretium. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Phasellus viverra nulla ut metus varius laoreet. Curabitur ullamcorper ultricies nisi. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Sed hendrerit. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Praesent
vestibulum dapibus nibh. Cras varius. Praesent ac massa at ligula laoreet iaculis. Sed cursus turpis vitae tortor. Curabitur at lacus ac velit ornare lobortis. Maecenas vestibulum mollis diam. Fusce risus nisl, viverra et, tempor et, pretium in,
sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas
libero turpis vel mi. Quisque id mi. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Proin viverra, ligula
sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Phasellus blandit leo ut odio. Curabitur vestibulum aliquam leo.</p>
</div>
</div>
</div>

CSS - Allow image to overflow container but not show a horizontal scrollbar?

I am using the Bootstrap framework and I am absolutely positioning an image in the right column. The idea is to have the image be cut off on the right side on smaller screen sizes and on larger screen sizes the entire image would be visible. This is working correctly except for that on smaller screen sizes there is a horizontal scrollbar due to the overflow. Is it possible to accomplish this without having a horizontal scrollbar while at the same time not cutting the image off where it overflows?
div {
position:relative;
}
.image-container {
position:absolute;
top:50%;
right:-200px;
transform:translateY(-50%);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu venenatis dolor. Duis ornare orci id nulla faucibus, vitae tristique lectus fringilla. Phasellus malesuada sem sit amet nisl maximus, sed accumsan ante suscipit. In aliquam tempor lorem eu aliquam. Donec auctor ut felis tincidunt malesuada. Mauris ut velit a quam tempus ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur malesuada velit libero, at venenatis metus ultricies a. Cras sit amet blandit ante. Nullam malesuada dignissim mauris, pretium lobortis tellus pellentesque sed.</p>
<p>Proin tristique non mauris eu varius. Etiam dictum mattis eros, sed euismod nisl pulvinar vitae. Suspendisse potenti. Aenean at dui lorem. Donec faucibus arcu sit amet turpis commodo accumsan eget vel arcu. Nulla maximus, lectus eu lobortis laoreet, turpis arcu auctor turpis, a aliquet magna ante at ipsum. Vestibulum eu aliquet augue. Curabitur feugiat metus vel euismod bibendum. Duis non cursus sapien. Suspendisse eget tortor ac velit tristique iaculis at eu lectus. Etiam dapibus justo sed placerat eleifend. Curabitur tincidunt, dui non suscipit tincidunt, est libero faucibus lacus, et fringilla diam urna sit amet dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus porttitor erat vel facilisis interdum.</p>
</div>
<div class="d-none d-md-block col-md-6">
<div class="image-container">
<img src="https://via.placeholder.com/600x300" />
</div>
</div>
</div>
</div>

add class img-fluid to your image. That means width: 100% & height: auto. This class is given to the tags like image and video to be responsive.
div {
position: relative;
}
.image-container {
position: absolute;
top: 50%;
right: -200px;
transform: translateY(-50%);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu venenatis dolor. Duis ornare orci id nulla faucibus, vitae tristique lectus fringilla. Phasellus malesuada sem sit amet nisl maximus, sed accumsan ante suscipit. In aliquam tempor lorem
eu aliquam. Donec auctor ut felis tincidunt malesuada. Mauris ut velit a quam tempus ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur malesuada velit libero, at venenatis metus
ultricies a. Cras sit amet blandit ante. Nullam malesuada dignissim mauris, pretium lobortis tellus pellentesque sed.</p>
<p>Proin tristique non mauris eu varius. Etiam dictum mattis eros, sed euismod nisl pulvinar vitae. Suspendisse potenti. Aenean at dui lorem. Donec faucibus arcu sit amet turpis commodo accumsan eget vel arcu. Nulla maximus, lectus eu lobortis laoreet,
turpis arcu auctor turpis, a aliquet magna ante at ipsum. Vestibulum eu aliquet augue. Curabitur feugiat metus vel euismod bibendum. Duis non cursus sapien. Suspendisse eget tortor ac velit tristique iaculis at eu lectus. Etiam dapibus justo sed
placerat eleifend. Curabitur tincidunt, dui non suscipit tincidunt, est libero faucibus lacus, et fringilla diam urna sit amet dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus porttitor erat
vel facilisis interdum.</p>
</div>
<div class="d-none d-md-block col-md-6">
<div class="image-container">
<img src="https://via.placeholder.com/600x300" class="img-fluid" />
</div>
</div>
</div>
</div>

Wordpress how to hide a checkbox using CSS

I would like to hide the default checkbox from my light/darkmode toggle featured on my Wordpress blog. (Using single.php)
I inspected the code using the console and adjusted the CSS using the code below in the preview which worked.
However, when I saved and ran it properly, I didn't get the same outcome.
input[type=checkbox], input[type=radio] {
box-sizing: border-box;
padding: 0;
display: none !important;
}
<section id="blog-post">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-10">
<div class="checkbox mt-3 text-right">
<input type="checkbox" id="darkSwitch">
<label for="darkSwitch"><i class="far fa-lightbulb fa-lg"><i>Light switch</i></i></label>
</div>
<div class="row my-5 justify-content-center">
<div class="col-sm-12 col-md-10 col-lg-8 mt-3">
<h2 class="subheader mt-3">Lorem Ipsum Dolor Amet.</h2>
<div class="dropcap">
<pre></pre>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em>This is italic text</em>, <strong>this is bold text</strong>, <em><strong>this is bold italic</strong></em> text. Donec justo massa, imperdiet ac efficitur sit amet, pretium a nunc. Aliquam sem nisi, sagittis a lacus ut, pulvinar molestie magna. Nam aliquam tincidunt erat nec pulvinar. Nullam urna nunc, cursus nec pharetra eu, euismod id dolor. Duis imperdiet, ante iaculis suscipit pharetra, mauris neque ultricies lacus, tincidunt posuere lectus ipsum ac est. Donec odio nunc, feugiat nec mi eget, faucibus euismod urna. Donec pretium sit amet leo eget auctor. Nulla consequat metus at ullamcorper faucibus. Donec ultricies tristique velit sit amet commodo. Morbi bibendum, nulla ut aliquam bibendum, ex lacus lacinia dui, quis sagittis justo neque vel mauris. Phasellus varius dapibus sapien, et euismod turpis. Praesent elit metus, posuere nec ipsum eget, ultricies lobortis massa.</p>
<p>Quisque ornare libero id nibh imperdiet ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc fringilla urna in mauris consequat, eget lobortis elit sodales. Curabitur ipsum ligula, tincidunt eu venenatis quis, ullamcorper et nunc. Sed in hendrerit felis, eu fermentum mauris. In varius non urna at ullamcorper. Duis at arcu nibh. Vivamus et elementum purus. Nulla a tellus dapibus, tristique libero ut, porta odio. Nulla luctus aliquet tempus. Pellentesque ultrices finibus turpis, non vestibulum metus.</p>

Try the following css rules instead:
input[type='checkbox'], input[type='radio'] {
display: none !important;
visibility: hidden !important;
}

Vertically align elements between bootstrap rows

This is a JSFiddle that shows my attempt at positioning 3 buttons at the bottom of 3 columns. I have used flexbox to make sure that all 3 columns have the same height, but in order to make the buttons positioned at the bottom of each column, I had to make them absolutely positioned. As a result, the size of the buttons, is not taken in account for the column's size. Is there any proper way to avoid that (without using placeholder elements/margins/etc)?
HTML:
<div class="container">
<div class="row row-same-height">
<div class="col-md-4">
<h2>Responsive</h2>
<!--<h4> εξαρτημένη από το ένα άκρο </h4>-->
<p style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id varius leo. Aliquam erat volutpat. Proin tempor lorem et dolor sollicitudin, in dignissim arcu blandit. Nullam consectetur rutrum pretium. Vivamus imperdiet elementum neque,
vel volutpat leo mattis in. Nam luctus pellentesque dui sed vulputate. Curabitur faucibus fringilla lectus, ut aliquet mauris dictum facilisis.</p>
<p class="stick-to-bottom"><a class="btn btn-primary" href="per1.html" role="button">View
details »</a></p>
</div>
<div class="col-md-4">
<h2>But</h2>
<p style="text-align: justify">Aliquam id congue libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ullamcorper sapien nulla, eget fermentum est mattis non. Morbi tortor tellus, sollicitudin quis nisi at, hendrerit faucibus nisl. Aenean consequat felis
urna, ut eleifend sapien tempus a. Phasellus porta mi non venenatis condimentum. Aliquam ut dolor eleifend, maximus quam vitae, scelerisque leo. Praesent metus est, lobortis eget urna a, luctus condimentum eros. Curabitur gravida maximus augue
molestie ultricies. Mauris ac urna ac lorem sagittis auctor. Etiam facilisis rhoncus sapien, at aliquam ligula euismod ac. Vestibulum quis condimentum neque. Morbi ornare aliquam consectetur. Mauris ipsum ligula, vulputate sed tristique hendrerit,
pellentesque fringilla nisl.</p>
<p class="stick-to-bottom"><a class="btn btn-primary" href="per2.html" role="button">View
details »</a></p>
</div>
<div class="col-md-4">
<h2>Wrong</h2>
<p style="text-align: justify">Duis eu nibh viverra, pretium risus id, egestas odio. Suspendisse potenti. Praesent aliquet massa sit amet nunc bibendum pellentesque. Mauris consectetur auctor magna vel consequat. Aliquam sit amet nunc quam. Vivamus eu nisi ac est viverra vehicula
lobortis sit amet lorem. Cras ut pellentesque nisi. Curabitur ornare imperdiet quam sit amet efficitur. Vivamus viverra felis at bibendum aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec
vestibulum, quam id efficitur consequat, ipsum dolor sollicitudin augue, id mollis erat risus quis urna. Integer aliquet suscipit orci, vehicula cursus lectus malesuada in. </p>
<p class="stick-to-bottom"><a class="btn btn-primary" href="per3.html" role="button">View
details »</a></p>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row row-same-height">
<div class="col-md-4">
<h2>Looks as intended</h2>
<!--<h4> εξαρτημένη από το ένα άκρο </h4>-->
<p style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id varius leo. Aliquam erat volutpat. Proin tempor lorem et dolor sollicitudin, in dignissim arcu blandit. Nullam consectetur rutrum pretium. Vivamus imperdiet elementum neque,
vel volutpat leo mattis in. Nam luctus pellentesque dui sed vulputate. Curabitur faucibus fringilla lectus, ut aliquet mauris dictum facilisis.</p>
</div>
<div class="col-md-4">
<h2>But</h2>
<p style="text-align: justify">Aliquam id congue libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ullamcorper sapien nulla, eget fermentum est mattis non. Morbi tortor tellus, sollicitudin quis nisi at, hendrerit faucibus nisl. Aenean consequat felis
urna, ut eleifend sapien tempus a. Phasellus porta mi non venenatis condimentum. Aliquam ut dolor eleifend, maximus quam vitae, scelerisque leo. Praesent metus est, lobortis eget urna a, luctus condimentum eros. Curabitur gravida maximus augue
molestie ultricies. Mauris ac urna ac lorem sagittis auctor. Etiam facilisis rhoncus sapien, at aliquam ligula euismod ac. Vestibulum quis condimentum neque. Morbi ornare aliquam consectetur. Mauris ipsum ligula, vulputate sed tristique hendrerit,
pellentesque fringilla nisl.</p>
</div>
<div class="col-md-4">
<h2>Not Responsive</h2>
<p style="text-align: justify">Duis eu nibh viverra, pretium risus id, egestas odio. Suspendisse potenti. Praesent aliquet massa sit amet nunc bibendum pellentesque. Mauris consectetur auctor magna vel consequat. Aliquam sit amet nunc quam. Vivamus eu nisi ac est viverra vehicula
lobortis sit amet lorem. Cras ut pellentesque nisi. Curabitur ornare imperdiet quam sit amet efficitur. Vivamus viverra felis at bibendum aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec
vestibulum, quam id efficitur consequat, ipsum dolor sollicitudin augue, id mollis erat risus quis urna. Integer aliquet suscipit orci, vehicula cursus lectus malesuada in. </p>
</div>
</div>
<div class="row">
<p class="col-md-4"><a class="btn btn-primary" href="per1.html" role="button">Viewdetails »</a></p>
<p class="col-md-4"><a class="btn btn-primary" href="per2.html" role="button">View details »</a></p>
<p class="col-md-4"><a class="btn btn-primary" href="per3.html" role="button">View details »</a></p>
</div>
</div>
CSS:
.row-same-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.stick-to-bottom {
position: absolute;
bottom: 0;
}

You're already using flexbox, so use flexbox. Why on earth would you absolutely position?
All you'll need is to flex the columns vertically (use flex-direction: column) and use justify-content: space-between. You'll also probably want to put: flex: 1 on the <p> tags that have the text content in them (since the content varies in length):
.row-same-height .col-md-4 {
display: flex;
flex-flow: column nowrap; /* a shorthand for `flex-direction` and `flex-wrap` */
justify-content: space-between;
}
.row-same-height p:first-of-type {
flex: 1;
}
And add whatever vendor prefixes you like. Here's your updated Fiddle. Cheers!

Resources