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.
Related
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>
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;
}
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>
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!
It's not easy to explain very well what I'm having problem with so I have attached an image:
http://test.richardknop.com/test.gif
Here is my simplified XHTML markup so far:
<div id="page">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>
How to style it?
I'm getting a little bit desperate and I'm not even sure it's possible.
Like this:
#page {
position:relative;
overflow:hidden;
}
#page .images {
position:absolute; bottom:0; left: 0; width: $width-of-sidebar;
}
#sidebar {
padding-bottom: $height-of-the-image;
float:left;
}
To get background in the sidebar you'll need faux columns technique.
Richard, I think your thinking about the problem is wrong. You are thinking about these 2 items as one thing. You need to separate them.
Make footer/border a separate div and make sure it's always at the bottom. I think that's pretty straight forward.
Also make sure that your sidebar is the same size as your content. Put your images in the sidebar - and make them stick to the bottom like your footer. I usually use some sort of framework to make this easier - try out blueprint or elasticss
HTML:
<html>
<head>
<link rel="stylesheet" href="1732288.css" type="text/css" media="screen, projection">
</head>
<body>
<div id="page">
<div id="sidebar">
<div id="sidebar-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue iaculis ultrices. Nam vitae odio ut nisl dignissim pretium. Donec pulvinar gravida felis, sed pretium risus aliquet ornare. Praesent accumsan libero rhoncus tortor semper bibendum. Nunc eleifend ante turpis. Aliquam sit amet ipsum orci, sit amet convallis erat. Morbi arcu dui, ultrices vel dapibus ac, viverra in odio. Proin imperdiet sollicitudin felis vestibulum porta. Aenean ac nisi nunc, et auctor sem. Praesent vitae erat augue. Suspendisse malesuada interdum consequat. Aenean laoreet molestie elit ut placerat.
</div>
<div id="sidebar-bottom">
<div id = "image-1">
image 1
</div>
<div id = "image-2">
image 2
</div>
</div>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue iaculis ultrices. Nam vitae odio ut nisl dignissim pretium. Donec pulvinar gravida felis, sed pretium risus aliquet ornare. Praesent accumsan libero rhoncus tortor semper bibendum. Nunc eleifend ante turpis. Aliquam sit amet ipsum orci, sit amet convallis erat. Morbi arcu dui, ultrices vel dapibus ac, viverra in odio. Proin imperdiet sollicitudin felis vestibulum porta. Aenean ac nisi nunc, et auctor sem. Praesent vitae erat augue. Suspendisse malesuada interdum consequat. Aenean laoreet molestie elit ut placerat.
</p>
<p>
Maecenas pellentesque elementum sapien, eu imperdiet turpis scelerisque pulvinar. Proin elit elit, condimentum non lacinia quis, congue vel justo. Sed rutrum magna quis neque sollicitudin vestibulum. Morbi ut eros vitae metus rhoncus sodales. Donec vel velit sed orci imperdiet tristique vel sed odio. Duis eget tellus purus. Sed blandit, tortor nec luctus tempor, tellus elit rutrum nibh, vel egestas libero velit eu libero. Nullam rhoncus, sem in ornare aliquet, dui purus consectetur felis, vitae porta elit leo et eros. Integer pharetra, mauris in lobortis aliquam, est eros commodo ante, sit amet facilisis mauris ipsum pharetra risus. Etiam vel nulla justo. Curabitur pretium facilisis consectetur. Aenean et mauris eros, nec pulvinar diam. Integer ut diam non leo ullamcorper vehicula a in mi. Curabitur adipiscing, enim feugiat porttitor pretium, lacus justo sodales odio, et congue mi sem sed ligula. Etiam accumsan accumsan tortor id pretium.
</p>
<p>
Curabitur quis nunc turpis, vitae vestibulum magna. Aliquam ultrices mi eget arcu convallis feugiat. Integer lacinia ipsum suscipit justo dapibus ultrices. Ut quis arcu vel nibh tincidunt tempus. Quisque imperdiet fermentum leo a ultrices. Donec arcu odio, congue eget elementum a, dignissim at felis. Donec in nibh dui. Curabitur adipiscing consequat urna, sed vehicula neque molestie at. Sed consequat metus velit. Nunc justo neque, tincidunt et faucibus et, mattis sit amet nulla. Integer elementum, purus in malesuada mollis, orci nisi ullamcorper nisl, quis tempor nunc augue et arcu. Integer massa metus, faucibus et vestibulum at, egestas vel enim. Integer condimentum sollicitudin sollicitudin. Nulla volutpat ultricies mauris, eget hendrerit eros accumsan ac. Suspendisse aliquam, lacus ut fringilla auctor, sem sapien elementum nulla, a hendrerit enim turpis vitae dolor. Pellentesque ac mi quis ipsum commodo venenatis.
</p>
</div>
</div>
<div id = "footer">
footer
</div>
</body>
</html>
CSS:
body{
background: #eee;
}
#page{
background: #cccccc;
width: 800px;
}
#sidebar{
background: #999;
width: 200px;
height: 100%;
margin-right: 10px;
float: left;
}
#sidebar-content{
height: 90%;
}
#sidebar-bottom {
height: 50px;
vertical-align: bottom;
}
#image-1{
width: 100px;
float: left;
}
#content{
height: 100%;
left: 200px;
background: #333;
}
#footer{
background: #3ee;
}
You can play around and make it centered and such - but this is the gist of it without using any frameworks.
Here is the solution online :
http://www.gorbikoff.com/stuff/1732288.htm
Css is at:
http://www.gorbikoff.com/stuff/1732288.css