I would like to have a collapsible sidebar in bootstrap.
For this I' d like to have a slim element between the content and the sidebar toggles the visibility of the sidebar (display property). See the example below:
https://jsfiddle.net/zaao8Lqb/1/
Instead of the border (as in the fiddle), I' d like to have an element. How would I do that?
The solution is a simple div with full height. The total solution of a collapsible sidebar:
https://jsfiddle.net/c2bgkbzL/1/
html,
body {
height: 100%;
}
.fill {
height: 100%;
min-height: 100%;
}
#content {
background-color: AliceBlue;
height: 100%;
padding-left: 0;
}
#sidebar {
background-color: DarkGray;
height: 100%;
padding: 3px;
}
#collapseme{
background-color: black;
width: 10px;
height: 100%;
float: left;
}
Here is the code to do it. Can find fiddle at https://jsfiddle.net/qaisarnadeem/zzs94oc1/
<body>
<div class="container-fluid fill">
<div class="row fill">
<div class="col-lg-2 col-md-4 col-xs-4" id="sidebar">
<h4>
Sidebar
</h4>
</div>
<div class="pull-left vertical-elem"></div>
<div class="col-lg-10 col-md-6 col-xs-6 text-center" id="content">
<h3>
Content
</h3>
</div>
</div>
</div>
</body>
here is css for class vertical-elem
.vertical-elem{
height:100%;
width:6px;
background-color:blue;
}
Related
I want to make a responsive table that will show 2 sections a time, the labels and the values.
The labels would be fixed and the data would be a slider.
So far I have this:
[class^=col] {
float: left;
}
.row {
width: 100%;
overflow: hidden;
}
.frame {
overflow: scroll;
}
.col-6 {
width: 50%;
}
.col-12 {
width: 100%;
}
.sub-row {
border: 1px solid;
height: 30px;
}
.sub-row:first-child {
font-weight: bold;
}
<div class="row">
<div class="col-6">
<div class="sub-row"></div>
<div class="sub-row">Test1</div>
<div class="sub-row">Test2</div>
</div>
<div class="col-6">
<div class="col-12">
<div class="sub-row">Col1</div>
<div class="sub-row">bla</div>
<div class="sub-row">bla</div>
</div>
<div class="col-12">
<div class="sub-row">Col2</div>
<div class="sub-row">bla</div>
<div class="sub-row">bla</div>
</div>
</div>
</div>
But notice that the data is being displayed one below each other. I want it to be displayed side by side, hidden in the panel so I can slide it. How can I do this?
Here you can see a working example:
This is acheived using flexbox
thead, th{
display:flex;
}
http://codepen.io/dbushell/pen/wGaamR
Please check this two photos
I don't know how to get ".myDivInTheGrid" in boxed bootstrap div. Any suggestions?
I have something like this...
<div class="fluid-container">
<div class="col-md-6"></div><!-- Div with image -->
<div class="col-md-6">
<div class="myDivInTheGrid"></div>
</div><!-- div with content -->
</div>
I have created a working example with a picture in the div you showed in the picture. I made it for col-md-* but you can do the same for larger grid system. If your screen is small, stretch the browser. Check it out HERE
The code is like this:
HTML:
body
<div class="container-fluid">
.fluid-container
<div class="row">
<div class="col-md-6">
.col-md-6
</div>
<div class="col-md-6">
<div class="row">
.col-md-6
</div>
<img class="row" src="http://s22.postimg.org/8z6hs0mch/Chrysanthemum.jpg"/>
</div>
</div>
</div>
CSS:
body{
background:#8EC34D;
color: white;
}
.container-fluid {
background: #81AD4B;
position: relative;
top: 40px;
padding-bottom: 40px;
}
.col-md-6 {
background:#769C47;
height: 300px;
}
img {
width: 256px;
height: 192px;
}
I am trying my first Responsive design and have implemented Twitter Boostrap 3. I have got a side where I want to show an article with images and information.
I have created a Panel and inside the Panel I have on the left side a Main Image and Thumbnails below it with a Mouse Over Effect to replace the Main Image and on the right side an information box. Below 768 the two boxes will move below each other. Images can be uploaded, which means they can have different sizes.
I want a fixed height for the Main Image Box (#main-image-container), otherwise I would have a constant jumping, when I use the Mouse Over effect. Of course I also want to keep the ratio of width to height. And the maximum width of the Main Image Box should be the max column width of the left columns and not overlap the Info Box on the right and the Thumbnail Box (#thumb-container) max-width should be the same as the #main-image-container.
It looks like that I have pretty much managed to get it working for <1200 and up around 530 on a landscape image. Above 1199, my picture width overlaps the Info Box and below the 530, the image width is not getting smaller anymore. I am trying to fix this now for a week, but can not find the solution. What do I do wrong here? I hope everybody understands my question and that my Sourcecode below helps.
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">title</h3>
</div>
<div class="panel-body">
<!-- Left Column of Advert -->
<div class="col-md-7 col-sm-7 item_gallery" id="gallery">
<div id="main-image-container" class="text-center">
<div class="main-img-box">
<img src="/uploads/tmp/mainimage.jpg" class="img-responsive" id="main-img" width="400">
</div>
</div>
<div id="thumb-container">
<div class="col-md-3 col-sm-3 col-xs-3 thumb-img-box">
<img src="/uploads/tmp/thumb/thumbimage1.jpg" class="thumbnails">
</div>
<div class="col-md-3 col-sm-3 col-xs-3 thumb-img-box">
<img src="/uploads/tmp/thumb/thumbimage2.jpg" class="thumbnails">
</div>
<div class="col-md-3 col-sm-3 col-xs-3 thumb-img-box">
<img src="/uploads/tmp/thumb/thumbimage3.jpg" class="thumbnails">
</div>
<div class="col-md-3 col-sm-3 col-xs-3 thumb-img-box">
<img src="/uploads/tmp/thumb/thumbimage4.jpg" class="thumbnails">
</div>
</div>
</div>
<!-- Right Column -->
<div class="col-md-5 col-sm-5">
Here is a Bookmark Link
<div class="panel panel-info">
<div class="panel-heading"><strong><span style="font-size:16px;"">
Some Information
</div>
<div class="panel-body">
<ul class="list-group">
<li>lots of infos</li>
<li>more infos</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4>Description</h4>
</div>
</div>
</div>
</div>
CSS
#main-image-container{
border: 1px solid #ccc;
width: 90%;
max-width: 90%;
height: 452px;
margin-bottom: 35px;
margin-top: 40px;
display: table;
}
.main-img-box{
display: table-cell;
vertical-align: middle;
float: none;
width: 90%;
max-width: 90%;
height: 452px;
}
// below is new
#main-img{
max-height: 450px;
}
#thumb-container{
max-width: 100%;
border: 1px solid #ccc;
margin-bottom: 30px;
display: table;
}
.thumb-img-box{
display: table-cell;
vertical-align: middle;
float: none;
padding: 0 10px 0 10px;
}
#media (max-width: 1199px) {
#main-image-container{
width: 100%;
height: 452px;
}
.main-img-box{
max-width: 100%;
height: 452px;
}
#main-img{
max-height: 452px;
max-width: 100%;
}
#thumb-container{
height:100px;
}
.thumbnails {
margin:0;
padding:0;
}
img {
width: 100%;
}
}
#media (max-width: 767px) {
#main-image-container{
width: 100%;
height: 352px;
}
.main-img-box{
width: auto;
max-width: 100%;
height: 352px;
}
#main-img{
max-height: 352px;
width: auto;
max-width: 100%;
}
#thumb-container{
max-height:100px;
width: 100%;
}
img{
width: 100%;
}
Hi in bootstrap you need to give display as inline-block then only images will be responsive.
img
{
display:inline-block;
width:100%;
}
I am currently building a wordpress site, where I need a 100% width background (css color, no image) for a div. My div is inside a container and I can't modify the html. So, I was wondering if there was any way with css to do this. I have already tried the padding+margin hack, but it didn't work.
HTML:
<div class="container">
<div class="row-fluid">
<div class="main span12">
<div class="row-fluid blue"> <!--this is the div that needs the background-->
<div class="span4">some content</div>
<div class="span4">some content</div>
<div class="span4">some content</div>
</div>
<div class="row-fluid">
<div class="span12"> some other content, doesn't need the background</div>
</div>
</div>
</div>
</div>
Any help is much appreciated. I tried this one : http://www.sitepoint.com/css-extend-full-width-bars/ but it didn't work.
Based on this article from CSS Tricks (Full Width Browser Bars ).
HTML
<div class="container">
<div class="level"></div>
<div class="level purple"></div>
<div class="level"></div>
</div>
CSS
html, body {
overflow-x: hidden;
}
.container {
width:960px;
margin: 0 auto;
border:1px solid black;
}
.level {
height:100px;
background: #bada55;
}
.purple {
position: relative;
background: #663399;
}
.purple:before,
.purple:after {
content: "";
position: absolute;
background: #663399; /* Match the background */
top: 0;
bottom: 0;
width: 9999px; /* some huge width */
}
.purple:before {
right: 100%;
}
.purple:after {
left: 100%;
}
Codepen Demo
Support should be IE8 & up
Using Bootstrap for a responsively designed web-app, I am looking to replicate the typical mobile-app layout:
Fixed Navbar + Overflowing Body + Fixed Footer
Check out the Smartphone preview (right-side icon) of: http://www.bootply.com/124373
I have the following CSS, which is close, but the fixed footer cuts-off the body - instead of the body scrolling:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: -60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
body > .container {
padding: 60px 15px 0;
}
.boxes {
margin-bottom: 22px;
}
.middle {
margin-top: 4%;
overflow: auto;
}
And here's the HTML:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mobile App Format Replication</a>
</div>
</div>
</div>
<!-- Begin page content -->
<div class="container middle">
<div class="row boxes">
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
</div>
...
<div class="row boxes">
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
</div>
</div>
<!-- Fixed Footer -->
<div id="footer">
<div class="container">
<p class="text-muted">Fixed Footer Content</p>
</div>
</div>
What about using position: fixed on the footer element, and removing the negative margin on the body (instead, use 60px bottom padding instead):
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
body > .container {
padding: 60px 15px;
}
See fork here: Bootply
If you are trying to replicate the mobile app layout, you should try Ratchet:
http://goratchet.com/
And here are some of the examples: http://goratchet.com/examples/
You can use "Tab bar" to have a fixed footer on there. Hope this helps
Just add .bar-nav~.content{padding-top: 44px;padding-bottom: 44px;} in your styles.
It's completely done!