Im trying to extend my sidebar to the end of content but without success.
This is my fiddle https://jsfiddle.net/DTcHh/18459/ . Any suggestion ?
<section class="tabs">
<div class="col-md-4 col-sm-4 col-xs-12 no-padding-right no-padding-left">
<div class="left-sidebar">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="left_sidebar_menu" role="tab" id="category">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Tourism <i class="indicator arrow-down-icon mt5 fa fa-angle-down pull-right"></i>
</a>
</h4>
</div>
<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="toursim">
<div class="panel-body">
<!-- Nav tabs -->
<ul class="info-menu" role="tablist">
<li role="presentation" class="active">ACCOMMODATION IN ZURICH <i class="fa fa-angle-right"></i></li>
<li role="presentation">MEETINGS AND CONGGRESSES <i class="fa fa-angle-right"></i></li>
<li role="presentation">ZURICH AS A TOURIST DESTINATION <i class="fa fa-angle-right"></i></li>
<li role="presentation">TRAVEL INFROMATION AND SERVICE <i class="fa fa-angle-right"></i></li>
<li role="presentation">LINKS <i class="fa fa-angle-right"></i></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="left_sidebar_menu" role="tab" id="living">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
Living <i class="indicator arrow-down-icon mt5 fa fa-angle-down pull-right"></i>
</a>
</h4>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="category">
<div class="panel-body">
<!-- Nav tabs -->
<ul class="info-menu" role="tablist">
<li role="presentation" class="active">ULTIMATE QUALITY OF LIFE <i class="fa fa-angle-right"></i></li>
<li role="presentation">LEISURE, SPORT AND CULTURE <i class="fa fa-angle-right"></i></li>
<li role="presentation">FINDING ACCOMODATION <i class="fa fa-angle-right"></i></li>
<li role="presentation">ENTRY, REGISTRATION AND RESIDE <i class="fa fa-angle-right"></i></li>
<li role="presentation">SCHOOLS & EMPLYMENT <i class="fa fa-angle-right"></i></li>
<li role="presentation">NEW IN ZURICH <i class="fa fa-angle-right"></i></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="left_sidebar_menu" role="tab" id="living">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseTwo">
Economy <i class="indicator arrow-down-icon mt5 fa fa-angle-down pull-right"></i>
</a>
</h4>
</div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="economy">
<div class="panel-body">
<!-- Nav tabs -->
<ul class="info-menu" role="tablist">
<li role="presentation" class="active">LABOUR MARKET & JOB-HUNTING <i class="fa fa-angle-right"></i></li>
<li role="presentation">SETTING UP A COMPANY <i class="fa fa-angle-right"></i></li>
<li role="presentation">ZURICH AS A BUSINESS LOCATION <i class="fa fa-angle-right"></i></li>
<li role="presentation">TAXES <i class="fa fa-angle-right"></i></li>
<li role="presentation">PERMITS <i class="fa fa-angle-right"></i></li>
<li role="presentation">FINDING SOMEWHERE TO LIVE <i class="fa fa-angle-right"></i></li>
<li role="presentation">SME <i class="fa fa-angle-right"></i></li>
<li role="presentation">ECONOMIC STRUCTURE: STATISTICS <i class="fa fa-angle-right"></i></li>
<li role="presentation">LINKS <i class="fa fa-angle-right"></i></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="left_sidebar_menu" role="tab" id="living">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
Education <i class="indicator arrow-down-icon mt5 fa fa-angle-down pull-right"></i>
</a>
</h4>
</div>
<div id="collapseFour" class="collapse" role="tabpanel" aria-labelledby="education">
<div class="panel-body">
<!-- Nav tabs -->
<ul class="info-menu" role="tablist">
<li role="presentation" class="active">RANGE OF EDUCATION ON OFFER <i class="fa fa-angle-right"></i></li>
<li role="presentation">STUDENT ACCOMMODATION <i class="fa fa-angle-right"></i></li>
<li role="presentation">FINANCE & SCHOLERSHIPS <i class="fa fa-angle-right"></i></li>
<li role="presentation">ENTRY, VISAS, HEALTH INSURANCE <i class="fa fa-angle-right"></i></li>
<li role="presentation">GOING OUT <i class="fa fa-angle-right"></i></li>
<li role="presentation">JOB PORTALS <i class="fa fa-angle-right"></i></li>
<li role="presentation">PROFESIONAL APPRENTICESHIP SY <i class="fa fa-angle-right"></i></li>
<li role="presentation">LINKS<i class="fa fa-angle-right"></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="right-content">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="1">
<span class="right_content_title">Tourism in Zurich</span>
<p class="start">
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem.
</p>
<div class="small_image">
<img src="img/tourism.png" />
</div>
<span class="right_content_subtitle">ACCOMMODATION IN ZURICH</span>
<p class="story">
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus</p>
<span class="right_content_subtitle">ACCOMMODATION IN ZURICH</span>
<p class="story">
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus</p>
<span class="right_content_subtitle">ACCOMMODATION IN ZURICH</span>
<p class="story">
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus</p>
</div>
</div>
</div>
</div>
</section>
My suggestion is to use flex
I've created a JSFiddle for you:
enter link description here
HTML:
<div class="flex" >
<div class="flex-1 margin-r-15 bg-gray">
<div class="height-300 border-1px" >
</div>
</div>
<div class="flex-1 border-1px">
</div>
</div>
CSS:
.flex{
display:flex;
}
.flex-1{
flex:1;
}
.height-300{
height:300px;
}
.margin-r-15{
margin-right:15px;
}
.bg-gray{
background-color:gray;
}
.border-1px{
border:1px solid black;
}
Related
I have some Bootstrap card boxes that have various sizes of text that will be stored within each. I want to ensure that the box will retain the same height regardless of the amount. In that case, maybe only x amount of lines should be displayed which is fine, just want to make sure that the boxes themselves are a consistent height because this will mess up the whole page if they are not. These are bootstrap 3 boxes.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<div class="container">
<div class="col-sm-4" v-for="(card, index) in cards">
<div v-if="canDisplay(index)" class="thumbnail">
<div class="caption text-center" onclick="">
<div class="position-relative">
<div v-html="getImage(card)">
</div>
</div>
<h4 id="thumbnail-label" v-html="getTextLinkUrl(card)">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> Testing
</h4>
<div class="thumbnail-description smaller" v-html="card.description"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="caption card-footer text-center">
<ul class="list-inline">
<li>
<button #click="edit(index)"><i
class="glyphicon glyphicon-pencil lighter"></i> Edit</button>
</li>
<li>
<button #click="remove(index)"><i
class="glyphicon glyphicon-trash lighter"></i> Remove</button>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-4" v-for="(card, index) in cards">
<div v-if="canDisplay(index)" class="thumbnail">
<div class="caption text-center" onclick="">
<div class="position-relative">
<div v-html="getImage(card)">
</div>
</div>
<h4 id="thumbnail-label" v-html="getTextLinkUrl(card)">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> Testing
</h4>
<div class="thumbnail-description smaller" v-html="card.description"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum non consectetur a erat nam. Massa vitae tortor condimentum lacinia quis vel. Elementum eu facilisis sed odio
morbi. Tellus at urna condimentum mattis pellentesque id nibh. Et malesuada fames ac turpis egestas. Senectus et netus et malesuada. Massa enim nec dui nunc. Scelerisque in dictum non consectetur a. Vel quam elementum pulvinar etiam non quam lacus
suspendisse faucibus. Risus feugiat in ante metus dictum at tempor. Convallis convallis tellus id interdum velit. Id diam maecenas ultricies mi eget. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Dignissim diam quis enim lobortis
scelerisque fermentum dui faucibus in. Metus aliquam eleifend mi in nulla. Accumsan lacus vel facilisis volutpat est velit egestas dui id. Nibh sit amet commodo nulla facilisi nullam vehicula. Sed id semper risus in hendrerit gravida rutrum quisque.
Eget felis eget nunc lobortis. Adipiscing enim eu turpis egestas pretium. Volutpat sed cras ornare arcu. Ac tortor dignissim convallis aenean. Risus nec feugiat in fermentum posuere. Turpis tincidunt id aliquet risus feugiat in ante metus. Vitae
nunc sed velit dignissim sodales ut. Tellus elementum sagittis vitae et leo duis ut diam. Nibh praesent tristique magna sit amet purus gravida quis blandit. Ornare suspendisse sed nisi lacus sed. Eu non diam phasellus vestibulum lorem. Amet nisl
suscipit adipiscing bibendum est ultricies integer quis auctor. Porta lorem mollis aliquam ut. Condimentum mattis pellentesque id nibh. Ipsum suspendisse ultrices gravida dictum. Consequat semper viverra nam libero justo laoreet sit. Nunc non
blandit massa enim nec dui nunc mattis enim. Ut porttitor leo a diam sollicitudin tempor id. Eget mauris pharetra et ultrices neque ornare aenean. Eu sem integer vitae justo eget magna. Vitae tempus quam pellentesque nec nam aliquam sem et. Aliquet
enim tortor at auctor. Nisl nisi scelerisque eu ultrices vitae auctor eu. Fames ac turpis egestas integer eget. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Dictum varius duis at consectetur lorem. Scelerisque felis imperdiet
proin fermentum leo. Id aliquet lectus proin nibh. Diam maecenas ultricies mi eget mauris pharetra. Vulputate enim nulla aliquet porttitor. Dictum sit amet justo donec.
</div>
<div class="caption card-footer text-center">
<ul class="list-inline">
<li>
<button #click="edit(index)"><i
class="glyphicon glyphicon-pencil lighter"></i> Edit</button>
</li>
<li>
<button #click="remove(index)"><i
class="glyphicon glyphicon-trash lighter"></i> Remove</button>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-4" v-for="(card, index) in cards">
<div v-if="canDisplay(index)" class="thumbnail">
<div class="caption text-center" onclick="">
<div class="position-relative">
<div v-html="getImage(card)">
</div>
</div>
<h4 id="thumbnail-label" v-html="getTextLinkUrl(card)">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> Testing
</h4>
<div class="thumbnail-description smaller" v-html="card.description"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="caption card-footer text-center">
<ul class="list-inline">
<li>
<button #click="edit(index)"><i
class="glyphicon glyphicon-pencil lighter"></i> Edit</button>
</li>
<li>
<button #click="remove(index)"><i
class="glyphicon glyphicon-trash lighter"></i> Remove</button>
</li>
</ul>
</div>
</div>
</div>
</div>
i remove your closing div and move your content inside the thumbnail-description. added a specific height and hide the overflow. hope this helps you.
.thumbnail {
height: 450px;
overflow: hidden;
}
.thumbnail-description {
max-height:300px;
overflow:hidden;
}
#media only screen and (max-width: 768px){
.thumbnail {
height:auto;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<div class="container">
<div class="col-sm-4" v-for="(card, index) in cards">
<div v-if="canDisplay(index)" class="thumbnail">
<div class="caption text-center" onclick="">
<div class="position-relative">
<div v-html="getImage(card)">
</div>
</div>
<h4 id="thumbnail-label" v-html="getTextLinkUrl(card)">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> Testing
</h4>
<div class="thumbnail-description smaller" v-html="card.description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="caption card-footer text-center">
<ul class="list-inline">
<li>
<button #click="edit(index)"><i
class="glyphicon glyphicon-pencil lighter"></i> Edit</button>
</li>
<li>
<button #click="remove(index)"><i
class="glyphicon glyphicon-trash lighter"></i> Remove</button>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-4" v-for="(card, index) in cards">
<div v-if="canDisplay(index)" class="thumbnail">
<div class="caption text-center" onclick="">
<div class="position-relative">
<div v-html="getImage(card)">
</div>
</div>
<h4 id="thumbnail-label" v-html="getTextLinkUrl(card)">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> Testing
</h4>
<div class="thumbnail-description smaller" v-html="card.description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum non consectetur a erat nam. Massa vitae tortor condimentum lacinia quis vel. Elementum eu facilisis sed odio morbi. Tellus at urna condimentum mattis pellentesque id nibh. Et malesuada fames ac turpis egestas. Senectus et netus et malesuada. Massa enim nec dui nunc. Scelerisque in dictum non consectetur a. Vel quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Risus feugiat in ante metus dictum at tempor. Convallis convallis tellus id interdum velit. Id diam maecenas ultricies mi eget. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in. Metus aliquam eleifend mi in nulla.
Accumsan lacus vel facilisis volutpat est velit egestas dui id. Nibh sit amet commodo nulla facilisi nullam vehicula. Sed id semper risus in hendrerit gravida rutrum quisque. Eget felis eget nunc lobortis. Adipiscing enim eu turpis egestas pretium. Volutpat sed cras ornare arcu. Ac tortor dignissim convallis aenean. Risus nec feugiat in fermentum posuere. Turpis tincidunt id aliquet risus feugiat in ante metus. Vitae nunc sed velit dignissim sodales ut. Tellus elementum sagittis vitae et leo duis ut diam. Nibh praesent tristique magna sit amet purus gravida quis blandit. Ornare suspendisse sed nisi lacus sed. Eu non diam phasellus vestibulum lorem. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Porta lorem mollis aliquam ut. Condimentum mattis pellentesque id nibh. Ipsum suspendisse ultrices gravida dictum. Consequat semper viverra nam libero justo laoreet sit.
Nunc non blandit massa enim nec dui nunc mattis enim. Ut porttitor leo a diam sollicitudin tempor id. Eget mauris pharetra et ultrices neque ornare aenean. Eu sem integer vitae justo eget magna. Vitae tempus quam pellentesque nec nam aliquam sem et. Aliquet enim tortor at auctor. Nisl nisi scelerisque eu ultrices vitae auctor eu. Fames ac turpis egestas integer eget. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Dictum varius duis at consectetur lorem. Scelerisque felis imperdiet proin fermentum leo. Id aliquet lectus proin nibh. Diam maecenas ultricies mi eget mauris pharetra. Vulputate enim nulla aliquet porttitor. Dictum sit amet justo donec.
</div></div>
<div class="caption card-footer text-center">
<ul class="list-inline">
<li>
<button #click="edit(index)"><i
class="glyphicon glyphicon-pencil lighter"></i> Edit</button>
</li>
<li>
<button #click="remove(index)"><i
class="glyphicon glyphicon-trash lighter"></i> Remove</button>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-4" v-for="(card, index) in cards">
<div v-if="canDisplay(index)" class="thumbnail">
<div class="caption text-center" onclick="">
<div class="position-relative">
<div v-html="getImage(card)">
</div>
</div>
<h4 id="thumbnail-label" v-html="getTextLinkUrl(card)">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> Testing
</h4>
<div class="thumbnail-description smaller" v-html="card.description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="caption card-footer text-center">
<ul class="list-inline">
<li>
<button #click="edit(index)"><i
class="glyphicon glyphicon-pencil lighter"></i> Edit</button>
</li>
<li>
<button #click="remove(index)"><i
class="glyphicon glyphicon-trash lighter"></i> Remove</button>
</li>
</ul>
</div>
</div>
</div>
</div>
I tried to set the $enable-responsive-font-sizes variable in Bootstrap 4.3.1 to true, but nothing changed.
Here is my template.html code:
<div class="m-2" id="role">
<em class="fas fa-user-tie fa-fw mr-2"></em
><span class="font-weight-bold">Role: </span>{{ member?.role }}
</div>
<div class="m-2" id="email">
<em class="fas fa-at fa-fw mr-2"></em
><span class="font-weight-bold">Email: </span>{{ member?.email }}
</div>
<div class="m-2" id="username">
<em class="fas fa-file-signature fa-fw mr-2"></em
><span class="font-weight-bold">Username: </span>{{ member?.username }}
</div>
<div class="m-2" id="last-update">
<em class="fas fa-clock fa-fw mr-2"></em
><span class="font-weight-bold">Last update: </span
>{{ member?.lastUpdate | date: "short" }}
</div>
<div class="m-2" id="comments">
<em class="fas fa-comments fa-fw mr-2"></em
><span class="font-weight-bold">Comments: </span> {{ member?.surcomments }}
xzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadas
</div>
My scss file:
$enable-responsive-font-sizes: true;
#import "../../../../../assets/bootstrap-4.3.1/dist/css/bootstrap.css";
Desktop version:
Mobile version, the text is not responsive:
add word-wrap: anywhere; to your div will fix the issue.
Snippet:
<div class="m-2" style="word-wrap: anywhere;" id="comments">
<em class="fas fa-comments fa-fw mr-2"></em
><span class="font-weight-bold">Comments: </span>
xzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadas
</div>
The reason your text is not moving to the following line is because you have a long unbroken string of text. If you use words of normal length, the text will wrap correctly, even without bootstrap. See below:
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus augue, pulvinar sed lacinia eu, fringilla et ex. Fusce sit amet velit eget dui dignissim ornare. Nunc hendrerit velit id ante maximus, ut sollicitudin massa scelerisque. Duis eget elementum justo. Aenean non nisi in odio feugiat faucibus at et sapien. Pellentesque ac elit vestibulum mauris consectetur tempor. Etiam sagittis tellus ut neque blandit mollis. Quisque et sagittis ex, rhoncus egestas ante. Mauris imperdiet velit erat, lacinia imperdiet nunc ultricies eget. Ut posuere rhoncus finibus. Sed vestibulum dolor id efficitur tincidunt. Etiam ac elit at diam finibus cursus. Aenean augue mi, tempor vestibulum mi at, egestas bibendum massa. Nullam ornare, nunc in volutpat tincidunt, erat enim consectetur nunc, vel sodales est lectus id mi.
</div>
If your app really needs a long uninterrupted line of text, you need to use CSS to "wrap" the word (move it to the next line), you can use the property overflow-wrap for this:
<span style="overflow-wrap: break-word">
xzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadasxzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadasxzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadasxzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadasxzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadasxzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadasxzcxzcxzcxzcxzxzczxcxzczxcxzcxzcxzcxzcxzczxczxcxzcholaadsadsadzxczsdsdsaasdsadsadsadsadasdsadsadas
</span>
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
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>
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.