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>
Related
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'm trying to achieve the following two column layout using Bootstrap 4:
My problem is, when I add content to the right column, it "pushes" the left one below, like this:
Here's my code so far:
<div class="row">
<div class="col-md-6">A</div>
<div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</div>
</div>
<div class="row">
<div class="col-md-6">B</div>
</div>
I'm not sure how to proceed next...
Technically, you should take 'B' part of the tag inside the 'A' tag and wrap both 'A' and 'B' with their own 'row' and 'col' tags.
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col">A</div>
</div>
<div class="row">
<div class="col">B</div>
</div>
</div>
<div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec at orci porta, suscipit
felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis
aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat
orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim,
eget consequat sem dapibus nec.
</div>
</div>
You can achieve the structure you are asking for as below. You were just mistaking while placing row and columns.
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
A
</div>
<div class="col-md-12">
B
</div>
</div>
</div>
<div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</div>
</div>
When I click on an anchor link (which is linked to the article-header), it appears exactly on top of the page. But because of sticky page-header, article-header can't be seen.
I'd like to 'move it' down, to be seen just below page-header.
Here is codepen: link.
(On the sidebar you have to open link called "HERE HERE HERE" ;) )
html:
<body>
<div class="main-container">
<div class="box">
<header class="page-header">
<h1>
MAIN HEADER
</h1>
</header>
<main class="main-content">
<article class="single-article" id="warstwy">
<header class="article-title">
<h1>Warstwy modelu ISO/OSI</h1>
</header>
<div class="article-content">
<ul>
<li><strong>Warstwa fizyczna</strong></li>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.
</ul>
</ul>
</div>
</article>
<article class="single-article" id="tcp">
<header class="article-title">
<h1>TCP</h1>
</header>
<div class="article-content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.
</ul>
</div>
</article>
<article class="single-article" id="ip">
<header class="article-title">
<h1>IP</h1>
</header>
<div class="article-content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.
</ul>
</div>
</article>
<article class="single-article" id="tcp_ip">
<header class="article-title">
<h1>TCP/IP</h1>
</header>
<div class="article-content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.
</ul>
</div>
</article>
<article class="single-article" id="udp">
<header class="article-title">
<h1>UDP (User Datagram Protocol)</h1>
</header>
<div class="article-content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales. Cras lectus lorem, venenatis sed nisi vitae, egestas dignissim nulla. Maecenas quis ornare quam. Suspendisse blandit leo non felis feugiat, sed porttitor eros luctus. Aliquam in magna est. Suspendisse commodo elit et leo tincidunt accumsan. Fusce convallis lacus lacus, a laoreet arcu condimentum id. Etiam dictum tortor molestie eros lobortis faucibus. Cras aliquam eu sem ut dignissim. Morbi mollis sit amet augue sed euismod. Ut id varius lacus, nec sollicitudin neque. Integer lobortis sapien in consequat hendrerit. Duis a lectus id odio blandit ultrices vitae sed leo.</li>
</ul>
</div>
</article>
<article class="single-article" id="adresy">
<header class="article-title">
<h1>Adresy IP</h1>
</header>
<div class="article-content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.</li>
</ul>
</div>
</article>
<article class="single-article" id="dns">
<header class="article-title">
<h1>DNS (Domain Name Service)</h1>
</header>
<div class="article-content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.</li>
</ul>
</div>
</article>
<article class="single-article" id="vpn">
<header class="article-title">
<h1>VPN (Virtual Private Network - Wirtualna Sieć Prywatna)</h1>
</header>
<div class="article-content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.</li>
</ul>
</div>
</article>
<article class="single-article" id="metody">
<header class="article-title">
<h1>Metody szyfrowania i zabezpieczania transmisji</h1>
</header>
<div class="article-content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.</li>
</ul>
</div>
</article>
<article class="single-article" id="gniazda">
<header class="article-title">
<h1>Gniazda</h1>
</header>
<div class="article-content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.</li>
</ul>
</div>
</article>
<article class="single-article" id="architektura">
<header class="article-title">
<h1>Architektura klient-serwer</h1>
</header>
<div class="article-content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.</li>
</ul>
</div>
</article>
</main>
<footer class="footer">
<p>Copyright © 2017 Konrad Wolniak All Rights Reserved</p>
</footer>
<nav class="site-nav">
<header class="nav-header">
<h2>Spis treści</h2>
</header>
<section class="nav-menu">
<a class="accordion-head"><span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span>Interfejsy</a>
<div class="dropdown-content">
<ul>
<li>Kodowanie kanałowe</li>
<li>Zwielokrotnienie pasma</li>
<li>Koordynacja czasowa</li>
<li>Interfejsy szeregowe i równoległe</li>
<li>Interfejsy systemowe</li>
<li>Interfejsy zewnętrzne</li>
<li>Polling</li>
<li>Przerwania</li>
<li>Point-to-point</li>
</ul>
</div>
<hr>
<a class="accordion-head">Procesory<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<div class="dropdown-content">
<ul>
<li>CISC</li>
<li>RISC</li>
<li>Architektura procesora</li>
<li>Pozostałe o procesorze</li>
<li>Potokowość</li>
<li>Superskalarność</li>
<li>Wielordzeniowość</li>
</ul>
</div>
<hr>
<a class="accordion-head">Procesy i wątki<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<div class="dropdown-content">
<ul>
<li>PCB</li>
<li>Stan i kolejki procesów</li>
<li>Przełączanie kontekstów</li>
<li>Synchronizacja/związek procesów i wątków</li>
<li>Mutex, semafor i sekcja krytyczna</li>
</ul>
</div>
<hr>
<a class="accordion-head">Przechowywanie danych<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<div class="dropdown-content">
<ul>
<li>Budowa dysku</li>
<li>Najważniejsze parametry</li>
<li>Adresowanie</li>
<li>Technologie dysków SSD</li>
<li>Buforowanie zapisu</li>
<li>RAID</li>
<li>Struktura logiczna dysku</li>
<li>MBR</li>
<li>Systemy plików</li>
<li>FAT</li>
<li>NTFS</li>
<li>EXT2/EXT4</li>
<li>Użytkownicy i grupy</li>
<li>Uprawnienia oraz atrybuty plików i katalogów</li>
<li>Pliki ukryte i wykonywalne</li>
</ul>
</div>
<hr>
<a class="accordion-head">Grafika<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<div class="dropdown-content">
<ul>
<li>Pamięć obrazu/bufor ramki</li>
<li>Reprezentacja pikseli</li>
<li>GPU-pipeline</li>
<li>Shader</li>
<li>OpenGL</li>
<li>Prymitywy geometryczne</li>
<li>Reprezentacja obiektów</li>
</ul>
</div>
<hr>
<a class="accordion-head">Linux<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<div class="dropdown-content">
<ul>
<li>Dowiązania do plików</li>
<li>Systemy plików</li>
<li>Ważne katalogi</li>
</ul>
</div>
<hr>
<a class="accordion-head">HERE HERE HERE<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<div class="dropdown-content">
<ul>
<li>Warstwy modelu ISO/OSI</li>
<li>TCP</li>
<li>IP</li>
<li>TCP/IP</li>
<li>UDP</li>
<li>Adresy IP</li>
<li>DNS</li>
<li>Hub, switch, router</li>
<li>VPN</li>
<li>Metody szyfrowania i zabezpieczania transmisji</li>
<li>Gniazda</li>
<li>Architektura klient-serwer</li>
</ul>
</div>
</section>
<!-- <button class="hamburger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</button> -->
</nav>
</div>
</body>
I solved the same problem by adding id attribute somewhere on some hidden element, before your heading tag. In your case it would be something like:
<div id="tcp" style="margin-top: -100px; position: absolute;"></div>
<article class="single-article">
<header class="article-title">
<h1>TCP</h1>
</header>
<div class="article-content">
<ul>
...
I have had the same problem, you can't use anchors anymore. Try jquery animate scroll to top offset from top. Here is an example
var $stickyNav = $('#nav_main'),
stickyNavHeight = $stickyNav.innerHeight(),
topPaddingOffset = 20,
fullTopOffset = stickyNavHeight + topPaddingOffset
//on click of url
$('YOUR LINK').on('click', function(e) {
var targetDiv = $(this).attr('href');
$('html, body').animate({
scrollTop: $(targetDiv).offset().top - fullTopOffset
}, 500);
});
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!
I'm just stuck, heres my codepen, what am I doing wrong?
http://codepen.io/lastnoob/pen/zvKNmo
</head>
<body>
<div class="ui left inverted vertical menu sidebar">
<div class="item">
<button id="hide-sidebar" class="button">
<i class="sidebar icon"></i>
</button>
</div>
<a class="item">
Item 1
</a>
<a class="item">
Item 2
</a>
<a class="item">
Item 3
</a>
</div>
<div class="pusher">
<div id="show-sidebar" class="button toggler">
<i class="sidebar icon"></i>
Sidebar
</div>
<!-- Site content !-->
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</body>
</html>
JS:
$(function() {
$('#show-sidebar').click(function() {
$('#show-sidebar').hide();
$('.menu.sidebar').sidebar('toggle');
});
$('#hide-sidebar').click(function() {
$('#show-sidebar').show();
$('.menu.sidebar').sidebar('toggle');
});
});
It doesnt really do anything, my sidebar is not showing up, not doing anything.