This is my first time using Bootstrap and I have some problems trying to get my content central.
I want to contain the content width, but allow the background colours to flow the full width of the page. I have tried to offset columns, however this just results in uneven spacing either side of the content.
My current markup is here:
https://codepen.io/charlyanderson/pen/bKggyb?editors=1100
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col-lg-5">
<div class="row">
<div class="col-lg-8 offset-md-4">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col-lg-7">
<div class="row">
<div class="col-lg-8">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
</div>
</div>
Use ml-auto for the first inner column and mr-auto for the second inner column.
#example-col-1 {
background-color: beige;
}
#example-col-2 {
background-color: pink;
text-align: right;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col">
<div class="row">
<div class="col-lg-8 ml-auto">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col">
<div class="row">
<div class="col-lg-8 mr-auto">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
https://codepen.io/anon/pen/BVpWwo
Use a dummy col-lg-4 column before the first inner column and after the second inner column.
#example-col-1 {
background-color: beige;
}
#example-col-2 {
background-color: pink;
text-align: right;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-8">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col">
<div class="row">
<div class="col-lg-8">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</div>
</div>
</body>
</html>
https://codepen.io/anon/pen/jKyBwy
You may find this question also useful.
Offsetting columns is not working (Bootstrap v4.0.0-beta)
Update
if you want to have a smaller left column and larger right, use this code.
#example-col-1 {
background-color: beige;
}
#example-col-2 {
background-color: pink;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="example-col-1" class="col-5">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-8">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
</div>
</div>
<div id="example-col-2" class="col-7">
<div class="row">
<div class="col-lg-9 text-right">
<p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
</div>
<div class="col-lg-3"></div>
</div>
</div>
</div>
</div>
</body>
</html>
By the way, better to use text-right instead of text-align: right; style.
Related
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.
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 am using a bootstrap grid following images show a mobile view and desktop view.Mobile view[1] Desktop view [2]. Please guide me on how to achieve this. This is my code.
[1]: https://i.stack.imgur.com/OUYfU.png
[2]: https://i.stack.imgur.com/0yri7.png
<div class="card" style="background: rgba(255, 29, 0, 0.05);">
<div class="row">
<div class="row">
<div class="col-sm-5">
<h3 class="p-50 m-l-20">Lawns and Banquests</h3>
<div class="scrollmenu m-l-50">
<a class="">Aster Lawns</a>
<a class="#news">Iris Lawns</a>
<a class="#contact">Tulip Lawns</a>
<a class="#about">Marigold Hall</a>
</div>
<div class="lawn-tile p-50">
<h1>srfdfsdfds</h1>
</div>
</div>
<div class="col-sm-7">
<img class="" style="width: 742px; height: 589px;" >
</div>
</div>
<div class="row">
<div class="col-6">
<div class="lawn-text">
<p>sdfsdfsdfdsfsdfsdafsdkbsjsdjbsubuvwekuwrhfsgvbfuywherhfuefhirherihger</p>
</div>
</div>
</div>
</div>
</div>
</div>```
Try this
<!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-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="./assests/style.css">
<title>Hello, world!</title>
</head>
<body>
<h1>HELLO BOOTSTRAP</h1>
<div class="row flex-column-reverse flex-md-row">
<div class="col-sm-12 col-md-6">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at laoreet tortor,
vitae sodales magna. Curabitur vel feugiat magna, vitae vehicula nibh. Proin
eget lobortis mi. Sed dapibus urna quis risus fringilla ultrices. Praesent lacinia
fermentum velit, vitae ultricies nibh porttitor quis. Aenean nisi mi, elementum id
quam eu, tristique porta nunc. Vestibulum ac faucibus lorem. Donec sit amet metus
venenatis nisi tincidunt ultrices. In semper nibh nunc, at posuere purus rhoncus
ac. Mauris pulvinar sed mauris quis efficitur. Proin sollicitudin euismod purus,
a gravida neque cursus sed. Etiam faucibus aliquet metus, ut accumsan augue
suscipit nec. Donec laoreet nisi nibh, ac egestas nisl hendrerit sit amet.
Morbi scelerisque, velit quis suscipit viverra, sem velit varius nulla, vitae
tincidunt felis elit sit ametdolor. Nulla mi tellus, imperdiet nec nisi non,
suscipit suscipit lacus. Nunc porttitor nibh at purus dignissim mollis.
</p>
<p>
Phasellus sodales tempor turpis, a vehicula sem. Donec et leo in lorem venenatis
interdum at non risus. Maecenas aliquam, turpis at posuere tristique, nunc
nibh maximus nisl, a tristique lacus turpis a ligula. Proin gravida
id odio eget facilisis. Phasellus varius quis arcu in lobortis. Vivamus eu condimentum velit.
Praesent massa purus, iaculis eget consectetur sed, dictum in turpis.
Mauris quis tempus massa. Sed quam justo, viverra id
ligula sit amet, aliquet vehicula tortor.
</p>
</div>
<div class="col-sm-12 col-md-6">
<img src="https://picsum.photos/536/354" style="width: 100%; height: 100%;" alt="unsplash">
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
<!-- JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
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>
I'm using Bulma 0.4.0, though the answer may not be associated with Bulma itself.
How can I set column height equal to others? (see screenshots below)
Edit: codepen with more text that presents actual behavior: https://codepen.io/anon/pen/vmKVbx
Expected behavior:
Actual behavior:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<div class="columns">
<div class="column">
<p class="notification is-info">First column</p>
</div>
<div class="column">
<p class="notification is-success">Second column</p>
</div>
<div class="column">
<p class="notification is-warning">Third column</p>
</div>
<div class="column">
<p class="notification is-danger">Fourth</p>
</div>
</div>
Here is a simple solution, by adding this CSS rule, and make sure it load after the Bulma CSS
.column {
display: flex;
}
Updated codepen
Stack snippet
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<style>
.column {
display: flex;
}
</style>
</head>
<body>
<div class="columns">
<div class="column">
<p class="notification is-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu consectetur lorem, nec facilisis dolor. Morbi rhoncus, mi sit amet ornare tincidunt, augue sem aliquet mauris, non pretium orci nisl at est. Curabitur placerat pharetra augue. Etiam non eros nulla. Praesent aliquet sem dui, id varius enim convallis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis mauris felis, sit amet consectetur augue sollicitudin id.</p>
</div>
<div class="column">
<p class="notification is-success">Nulla a mauris vel erat elementum scelerisque. Cras mollis consequat neque, vitae sagittis nisl dapibus porttitor. Donec et rutrum ligula. Donec luctus iaculis orci, nec imperdiet felis semper quis. Nulla a convallis eros, facilisis hendrerit risus. Nulla sit amet porta quam. Nullam maximus tempus sem, dapibus dapibus purus sollicitudin vel. Phasellus at rhoncus odio. Quisque sit amet ornare dolor. Maecenas accumsan viverra tristique. Etiam vulputate nibh ipsum, at rutrum lacus hendrerit ut. Nunc sodales diam purus, in ultricies nulla consectetur sit amet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus ut tincidunt mauris.</p>
</div>
<div class="column">
<p class="notification is-warning">Pellentesque eros tortor, pharetra in lorem quis, maximus hendrerit ex. Praesent nunc ante, elementum at congue ut, ultricies quis lectus. Aenean vel elementum risus. Vestibulum aliquet justo in ligula dictum commodo. Nullam condimentum ante vitae nulla dignissim, vitae interdum neque dapibus. Aenean nec quam egestas, viverra ex vel, tempus lectus. Quisque eu euismod neque. Mauris aliquam neque a porta condimentum. Cras eget nisi turpis. Aenean lacus velit, dapibus eu aliquam eget, aliquet id quam. Integer ultricies est quis erat facilisis congue vel efficitur ipsum. Nunc id varius orci, consequat vehicula libero. Morbi maximus, orci in efficitur feugiat, quam lacus lobortis elit, in blandit mauris dolor sit amet mauris.
</p>
</div>
<div class="column">
<p class="notification is-danger">Morbi turpis nunc, porttitor ut bibendum et, tincidunt vel nisi. Ut magna massa, placerat id nunc at, venenatis sodales leo. Nunc dapibus, lacus ac molestie vestibulum, tortor mauris posuere turpis, at pretium orci orci in justo.</p>
</div>
</div>
</body>
</html>
In Bulma, you have got the class .is-flex to achieve the same.
I know it's a bit late, but maybe someone who looks for similar solution will find my answer helpful.
You can use Bulma's Tile system to get something that will behave like equal height columns.
<div class="tile is-ancestor">
<div class="tile is-horizontal">
<div class="tile is-parent">
<div class="tile is-child">
<!--Content here-->
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box">
<!--Content here-->
</div>
</div>
</div>
</div>
No additional css needed. You can also specify horizontal size of columns using is-1 - is-12 classes.
Check this pen to see this in action
This did the trick for me.
<div class="column">
<section class="section1">
...
</section>
</div>
.section1 {
height: 100%;
}
This works fine for me with this code:
<div class="columns">
<div class="column my-class">
one thing
</div>
<div class="column my-class">
many other <br><br><br> etc. things
</div>
</div>
<style>
.column.my-class {
display: inline-flex;
}
.column.my-class > div {
width: 100%; // only Edge needed this nonsense
}
</style>
Worked in Chrome 61.0.3163.100 (of course), Edge 40.15063.674.0, Firefox 57.0.
align-items: stretch http://cssreference.io/flexbox/
.columns {
flex-wrap: wrap;
align-items: stretch;
}
Ref: https://github.com/jgthms/bulma/issues/696
I noticed that making .column as flex broke the layout.
I solved with the following CSS rule, this way I can use the class .is-equal-height if I want aligned columns.
.columns.is-equal-height > .column > * {
height: 100% !important;
}