I try to do a sidebar that we can collapse (hide) or display, the goal is that the sidebar kind of push the content on the right.
I've done that, but when I display the sidebar the content is compressed/not pushed, we keep the responsivity.
If I add flex-shrink-0 to the main part, it works well for the sidebar push content behavior, but I totally loose responsivity.
I would like somthink like https://fontawesome.com/ when the view is minimised, I don't know how explain it.
#sidebar.collapsing.width {
height: auto;
width: 0;
overflow: hidden;
transition: width .35s ease;
}
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>The page title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.1/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"></script>
</head>
<body>
<div class="d-flex align-items-stretch vh-100">
<nav>
<div id="sidebar" class="h-100 collapse width show">
<div class="h-100 d-flex flex-column p-2 text-white bg-dark" style="width: 280px;">
<a class="m-2" href="#">
<img src="https://via.placeholder.com/110x50?text=Logo" alt="Aviron Tours Métropole">
</a>
<hr>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-light" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">Link 4</a>
</li>
</ul>
<hr class="mt-auto">
<ul class="nav flex-column small">
<li class="nav-item">
<a class="nav-link link-secondary" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link link-secondary" href="#">Link 2</a>
</li>
</ul>
<hr>
<div class="dropdown">
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle"
id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://robohash.org/JD.png?set=set4"
alt="mdo" width="32" height="32" class="rounded-circle me-2">
<strong>John Doe</strong>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" href="#">My profile</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Logout</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="flex-grow-1 overflow-auto bg-light">
<nav class="d-flex bg-white shadow-sm" style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<button id="toggle-sidebar" class="btn ms-2 me-3 py-3" type="button" data-bs-toggle="collapse"
data-bs-target="#sidebar" aria-expanded="true" aria-controls="sidebar">
<span class="bi bi-list"></span>
</button>
<ol class="breadcrumb mb-0 pt-3">
<li class="breadcrumb-item">
<a href="#">
<span class="bi bi-house-door-fill"></span> Home
</a>
</li>
</ol>
</nav>
<main class="my-3 px-3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae tellus suscipit, ultrices mauris a,
cursus nunc. Morbi odio enim, congue a dignissim et, rutrum ac nunc. Donec maximus ipsum nec diam
facilisis, quis aliquam justo pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia curae; Sed porta sollicitudin nisi, tempus luctus dui semper scelerisque. Vivamus quis
turpis arcu. Aenean efficitur tortor vel neque ultricies mattis. Quisque eu pretium metus, sed pulvinar
nisl. Proin scelerisque ex non lacus ornare egestas. Pellentesque vel rhoncus tellus. Nullam laoreet
sapien nec enim blandit, nec pretium dolor tempus. Aliquam erat volutpat. Ut sit amet felis vulputate,
auctor neque at, tempus ipsum. Quisque tempus bibendum ultricies. Praesent non lectus tortor.
</p>
<p>
Integer hendrerit lectus non quam efficitur dapibus. Vestibulum blandit nisi at neque tincidunt aliquet.
Aenean rutrum risus sed eros imperdiet, sit amet venenatis justo faucibus. Proin at vestibulum sapien.
Nunc mollis odio ultricies, vulputate lacus quis, auctor elit. Curabitur vitae sem sed ipsum pretium
ullamcorper. Nunc rutrum, purus blandit ullamcorper luctus, mauris neque ultricies orci, a aliquam risus
tellus et erat. Suspendisse id risus sodales, varius enim at, rutrum purus.
</p>
<p>
Donec porta urna porta nisl eleifend ultricies. Aenean iaculis congue neque vitae posuere. Donec vitae
pellentesque leo, sed convallis eros. Fusce auctor scelerisque justo, sit amet lobortis augue tempus sit
amet. Aliquam erat volutpat. Duis id est tortor. Suspendisse arcu turpis, lobortis non auctor vitae,
accumsan sit amet risus. Suspendisse finibus mi bibendum libero elementum, vel malesuada elit sagittis.
</p>
<p>
Aenean in ipsum neque. Quisque ligula erat, maximus sed porta a, mattis et massa. Morbi a sapien
molestie, interdum sapien sed, tristique lectus. Integer hendrerit, lacus quis volutpat sodales, eros
nisi bibendum urna, non pharetra enim velit eu lectus. Nam dignissim nibh nec nunc finibus eleifend.
Praesent consequat molestie odio et auctor. Sed faucibus urna vel pretium viverra. Proin non mi eu
mauris mollis mattis eu quis ante. Sed auctor porttitor tellus, non porta diam posuere et. Integer
aliquam mi nulla, ac porttitor lacus efficitur vitae. Fusce tortor arcu, mollis eu lectus at, fringilla
mollis nisl. Integer quis aliquam risus. Phasellus vitae rhoncus dolor. Aenean eu urna a velit convallis
auctor.
</p>
<p>
Nam nunc ante, feugiat nec commodo ac, blandit nec sapien. Maecenas eget tempor nunc. Vivamus eu
malesuada ante. Sed porta elementum nunc ut vestibulum. Quisque facilisis eros aliquam, tristique quam
eu, scelerisque metus. Nulla ultricies elit at diam posuere, eu lobortis mauris pellentesque.
Pellentesque pulvinar tortor sit amet neque suscipit consectetur.
</p>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam commodo
diam purus, nec dapibus neque aliquet eget. Aliquam in lobortis urna, nec bibendum sem. Praesent eget
ultricies neque. Morbi pharetra in velit id tristique. Mauris tristique sodales lacus accumsan gravida.
Integer sed lorem nec urna egestas mollis vitae id turpis. Sed non dolor odio. Etiam congue nunc pretium
nibh bibendum, vitae maximus dui dapibus. Donec euismod venenatis nisl, vel laoreet eros efficitur
molestie. Fusce pharetra, enim nec eleifend imperdiet, tellus quam bibendum tellus, vel blandit orci
sapien ut erat.
</p>
<p>
Nam bibendum nisi id scelerisque feugiat. Vestibulum cursus arcu sed elit blandit, ac hendrerit magna
iaculis. Mauris suscipit mauris a porttitor tempor. Vestibulum quis euismod risus, dictum blandit dui.
Praesent et sapien in dui blandit aliquam. Integer quis auctor augue. Ut efficitur aliquam condimentum.
Aenean dolor nibh, gravida non elit eget, euismod laoreet ipsum. Vestibulum iaculis diam sed felis
cursus pulvinar. Proin a purus varius, pulvinar quam nec, fringilla nisl. Morbi in nulla nisl. Sed in
ipsum quis lorem volutpat feugiat. Proin finibus consequat nisi varius ultrices. Donec ultricies finibus
tellus, aliquet viverra sapien tincidunt nec. Suspendisse mollis imperdiet vehicula. Sed commodo purus
vel mauris vulputate accumsan.
</p>
<p>
Proin ac massa quis orci dapibus interdum. Aenean semper ipsum ac urna pharetra ultrices. Nunc id
vehicula urna. Integer sollicitudin, enim sit amet fermentum dapibus, elit nisl convallis augue, eget
imperdiet velit ex vel nisl. Pellentesque feugiat libero sed felis pulvinar tempus. Suspendisse non
lacus ex. Quisque facilisis dolor augue, ac mollis est consequat non. Mauris sed libero vestibulum,
dignissim metus ut, bibendum leo. Praesent viverra sem eget imperdiet consequat. Vestibulum dapibus erat
eu elit ornare porta. Nunc tristique leo eget turpis luctus, sit amet lacinia odio elementum. Donec eget
dignissim quam, eleifend pharetra lorem. Sed aliquet molestie arcu mollis bibendum. Nullam efficitur
odio ut nibh euismod fermentum.
</p>
<p>
Vivamus laoreet ultrices orci, a cursus purus porttitor eget. Donec ut blandit turpis. Maecenas arcu
tellus, pretium et nibh sed, pulvinar tempor arcu. Cras tempor a risus a molestie. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam vitae massa neque. Integer vel
pretium tellus. Praesent in metus eget mauris porttitor faucibus. Donec aliquam, mi viverra rutrum
tempus, neque lorem luctus urna, a suscipit metus leo vitae quam. Integer vestibulum vulputate purus a
euismod.
</p>
<p>
Etiam vel magna felis. Donec sollicitudin condimentum ipsum, eu auctor dolor fermentum id. Pellentesque
tristique vitae lorem quis accumsan. Sed laoreet arcu sit amet varius fringilla. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed pellentesque rhoncus dolor,
vel molestie augue sollicitudin ut. Vestibulum in felis vitae nibh condimentum euismod. Suspendisse id
purus sapien. Vivamus sapien diam, iaculis vel massa sed, ultricies dignissim ligula. Fusce interdum non
massa ut lacinia. Mauris facilisis sodales faucibus. Sed hendrerit facilisis mi lobortis aliquam. Proin
ullamcorper erat pulvinar neque imperdiet, et tempor odio finibus. Vestibulum tortor nisl, venenatis
placerat odio at, commodo tincidunt diam.
</p>
</main>
</div>
</div>
</body>
</html>
I think what you're looking for is this. Just use w-100 on the main content so that it's forced to 100% width.
<div class="d-flex align-items-stretch vh-100 overflow-hidden ">
<nav>
<div id="sidebar" class="h-100 collapse width show">
<div class="h-100 d-flex flex-column p-2 text-white bg-dark" style="width: 280px;">
....
</div>
</div>
</nav>
<div class="flex-shrink-0 overflow-auto bg-light w-100">
<nav class="d-flex bg-white shadow-sm" style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<button id="toggle-sidebar" class="btn ms-2 me-3 py-3" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar" aria-expanded="true" aria-controls="sidebar">
<span class="bi bi-list"></span>
</button>
<ol class="breadcrumb mb-0 pt-3">
<li class="breadcrumb-item">
<a href="#">
<span class="bi bi-house-door-fill"></span> Home </a>
</li>
</ol>
</nav>
<main class="my-3 px-3">
<p> .... </p>
</main>
</div>
</div>
Demo
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>
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 am working on my portfolio page and as I was writing my html and my css, the site wasn't scrolling. I can't see the code only the first section.
Here is the html:
<navbar id="navbar">
<img id="logo" src="imagini/portfolio.png" alt="my portfolio" title="Bogdan's portfolio" />
<ul type="none" id="list">
<li>works</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<section id="welcome-section">
<h1>HI, I'M<br /> Pavel Bogdan Mihail</h1>
<p>I make people get amazed by my works because I'm AWSOME!</p>
<button type="button">GET IN TOUCH</button>
</section>
<section id="about">
<h3>A little bit about me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis neque sed massa sollicitudin interdum. Pellentesque vel libero sollicitudin lectus sollicitudin consectetur. In dictum eu nisi id porta. Ut molestie luctus hendrerit. Nulla ac nisl sit amet urna molestie dictum. Phasellus et turpis aliquet dolor iaculis congue. Nulla eget ligula nibh. Maecenas vel aliquam quam, sit amet semper nibh. Sed consectetur malesuada mauris a posuere. Suspendisse semper, magna ac convallis faucibus, orci eros ultrices diam, ac porttitor enim sem eget lorem. Proin laoreet commodo arcu, nec lobortis felis dapibus quis. Aenean ut arcu mauris. Nunc tempus erat eu felis faucibus facilisis. Donec gravida ullamcorper dolor ac dapibus. Sed pellentesque dapibus neque, quis ornare purus tincidunt ac.</p>
</section>
here is a codepen edit: https://codepen.io/bogdan-pavel/pen/pobgWjg
Your navbar is missing a closing tag. If you ad </navbar> after the navbar is done the rest will scroll.
Try this:
<navbar id="navbar">
<img id="logo" src="imagini/portfolio.png" alt="my portfolio" title="Bogdan's portfolio" />
<ul type="none" id="list">
<li>works</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<section id="welcome-section">
<h1>HI, I'M<br /> Pavel Bogdan Mihail</h1>
<p>I make people get amazed by my works because I'm AWSOME!</p>
<button type="button">GET IN TOUCH</button>
</section>
<section id="about">
<h3>A little bit about me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis neque sed massa sollicitudin interdum. Pellentesque vel libero sollicitudin lectus sollicitudin consectetur. In dictum eu nisi id porta. Ut molestie luctus hendrerit. Nulla ac nisl sit amet urna molestie dictum. Phasellus et turpis aliquet dolor iaculis congue. Nulla eget ligula nibh. Maecenas vel aliquam quam, sit amet semper nibh. Sed consectetur malesuada mauris a posuere. Suspendisse semper, magna ac convallis faucibus, orci eros ultrices diam, ac porttitor enim sem eget lorem. Proin laoreet commodo arcu, nec lobortis felis dapibus quis. Aenean ut arcu mauris. Nunc tempus erat eu felis faucibus facilisis. Donec gravida ullamcorper dolor ac dapibus. Sed pellentesque dapibus neque, quis ornare purus tincidunt ac.</p>
</section>
<navbar>
I want to display a list via "collapsible bootstrap panels" but I notice when I open certain panels they do not align properly.
E.g. when I open the first panel in the code all other panels move under each other under the second panel.
I want panel 3 and 4 to stay on their place in their grid when I open panel 1.
What am I doing wrong?
<div class="container">
<div class="row">
<div class="col-xs-6">
<div>
<a
href="#panel1"
class="btn btn-info"
data-toggle="collapse">Panel 1</a>
</div>
<div
id="panel1"
class="collapse">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent scelerisque, neque sit amet aliquam pulvinar, metus
arcu commodo sem, id volutpat erat nulla imperdiet enim. Proin
imperdiet dolor vitae lorem efficitur, non tincidunt nisi
accumsan. Nam condimentum mi ac auctor tincidunt. Fusce eget
tempus velit, in porta velit. Mauris vel ultrices ipsum. Nunc
rutrum vitae quam ut porta. Suspendisse diam sem, molestie sed
nisl id, imperdiet ornare libero. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam sagittis augue vitae iaculis
lacinia. Ut id eros egestas turpis vehicula feugiat ut eu
lectus. Ut eu consequat arcu, a porttitor magna.
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div>
<a
href="#panel2"
class="btn btn-info"
data-toggle="collapse">Panel 2</a>
</div>
<div
id="panel2"
class="collapse">
<div>
<p>Nunc vel lectus sit amet ante imperdiet aliquet non sit amet
felis. Vestibulum rhoncus rutrum ante nec sodales. Aliquam
vitae suscipit orci. Nam dignissim a purus vitae efficitur.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Nam libero augue,
scelerisque ut rhoncus eu, scelerisque a enim. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Ut luctus molestie lectus, ac dictum sem tempor
id.
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div>
<a
href="#panel3"
class="btn btn-info"
data-toggle="collapse">Panel 3</a>
</div>
<div
id="panel3"
class="collapse">
<div>
<p>Aliquam sit amet convallis nulla, quis dapibus elit. Aliquam
nisl justo, mollis et pulvinar ut, laoreet eu enim. Quisque
maximus scelerisque dui, aliquam posuere dolor consequat ut.
Nullam semper dictum urna et auctor. Donec lacus risus,
sagittis at vestibulum ac, dictum vitae mauris. Duis non velit
congue diam vulputate auctor a et libero. Duis a tortor
lobortis, suscipit orci eu, facilisis eros. Proin et faucibus
tortor, in finibus elit. Morbi suscipit porttitor justo
interdum euismod. In posuere leo velit, non egestas tortor
malesuada sit amet. Phasellus malesuada ultricies massa eget
volutpat.
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div>
<a
href="#panel4"
class="btn btn-info"
data-toggle="collapse">Panel 4</a>
</div>
<div
id="panel4"
class="collapse">
<div>
<p>Cras interdum dui sit amet nisi porttitor, iaculis cursus
tellus tincidunt. Praesent iaculis eget ipsum sed condimentum.
Fusce aliquam ipsum mauris. Donec laoreet dapibus efficitur.
Quisque in rhoncus dolor. Aliquam erat volutpat. Quisque eget
quam sed velit ultrices pellentesque. Vivamus neque arcu,
vestibulum in neque a, tincidunt sagittis lectus. Nullam nisi
nulla, semper non maximus sed, rutrum vel velit.
</p>
</div>
</div>
</div>
</div>
</div>
**Tyr With this**
<div class="container">
<div class="row">
<div class="col-xs-6">
panel1 Code
</div>
<div class="col-xs-6">
panel2 Code
</div>
</div>
<div class="row">
<div class="col-xs-6">
panel3 Code
</div>
<div class="col-xs-6">
panel4 Code
</div>
</div>
</div>