Please consider the following layout for a page. There are three columns inside a container.
<div class = "container">
<div class="row">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
</div>
The problem i want to solve is that for mobile screen sizes i want to hide the middle column. For screen sizes greater than mobile i.e tablet, laptops and desktops i want to show the middle column. How can i achieve this. All three columns should be of equal width.
I appreciate any help! Thanks!
Bootstrap includes responsive utility classes to hide or show elements are specific breakpoints. The visible classes are visible-xs-*, visible-sm-*, visible-md-*, and visible-lg-*. The hidden classes are hidden-xs, hidden-sm, hidden-md, and hidden-lg.
If you want to hide an element for small and extra small resolutions, you can do something like <div class="col hidden-xs hidden-sm">
Bootply example
By using css, you can hide anything. See below:
<div class = "container">
<div class="row">
<div class="col">
</div>
<div class="col column-to-hide">
</div>
<div class="col">
</div>
</div>
</div>
<style>
#media screen and (max-width: 500px){
.column-to-hide{
display:none;
}
}
</style>
Related
I have this design:
Desktop or large screens.
Notes* Red or green boxes are not the same height.
Mobile or lower screens.
How to create this layout type on bootstrap 4 grid or custom CSS grid, what is better?
Thanks, have a nice day.
First of all, if you would like to build a masonry-like columns, a regular Bootstrap grid system won't give you what you want. Instead, you will have to use the card columns or JavaScript masonry plugins.
Layout with Card Columns
<div class="container">
<div id="example" class="card-columns">
<div id="card1" class="card border-success">
<div class="card-body">
<p class="card-text">Card #1 - height: 20rem;</p>
</div>
</div>
<div id="card2" class="card border-success">
<div class="card-body">
<p class="card-text">Card #2 - height: 12rem;</p>
</div>
</div>
<div id="card3" class="card border-danger">
<div class="card-body">
<p class="card-text">Card #3 - height: 18rem;</p>
</div>
</div>
<div id="card4" class="card border-danger">
<div class="card-body">
<p class="card-text">Card #4 - height: 14rem;</p>
</div>
</div>
</div>
</div>
With little bit of styling to setup 1 column for mobile view and 2 for others:
#example.card-columns {
column-count: 1;
}
#media(min-width: 576px) {
#example.card-columns {
column-count: 2;
}
}
You can get something closed to what you would like to achieve:
demo: https://jsfiddle.net/davidliang2008/n3fhyp8c/60/
Problems on Mobile View
Now there is a problem on the mobile view. Since the order of the CSS columns is top to bottom, left to right, and there is no way to change it, the only way to get what you want on the mobile view is to duplicate contents and hide/show them based on the breakpoints...
Again, your second screenshot is missing a red box so I don't know which one you want to put in the middle. Here I am assuming you want to put both red boxes there:
<div id="card1" />
<div id="card2" class="card border-success d-none d-sm-block">
...
</div>
<div id="card3" />
<div id="card4" />
<div id="card2" class="card border-success d-block d-sm-none">
...
</div>
Then you can get something you want to achieve on mobile view:
demo: https://jsfiddle.net/davidliang2008/n3fhyp8c/63/
Hello I am trying to do what the title says, but in a small screen (like my phone) the 12 columns don't fit on the row.
I have also tried this on Foundation but the results are the same.
Example:
<div class="container">
<div class="row">
<div class="col-xs-1">1</div>
<div class="col-xs-1">2</div>
<div class="col-xs-1">3</div>
<div class="col-xs-1">4</div>
<div class="col-xs-1">5</div>
<div class="col-xs-1">6</div>
<div class="col-xs-1">7</div>
<div class="col-xs-1">8</div>
<div class="col-xs-1">9</div>
<div class="col-xs-1">10</div>
<div class="col-xs-1">11</div>
<div class="col-xs-1">12</div>
</div>
</div>
Or here on the file I am working on:
Edit: no loger true since I fixed it.
Is this the expected behavior? Can this be fixed, and if so what would be the best way?
That's because the space between divs. Add this CSS to your "row" div:
.no-gutter > [class*='col-xs-']{padding-right: 0; padding-left: 0}
In html:
<div class="row no-gutter">
...
I am trying to make a simple layout using Bootstrap 3, and it looks fine on laptop, but when I try to emulate in Chrome for small screen such as Iphone 5, one of my image is going to the next row, though I was expecting it to be at the same row as the heading. Visually, there seems to be enough space, and I tried pulling, pushing, applying offser but could not get it working yet.
Can anybody help point out please what am I doing wrong here?
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<div class="col-md-4 column"></div>
<div class="col-md-4 column"></div>
<div class="col-md-4 column">
<div class="row clearfix">
<div class="col-md-6 column">
<img alt="300x200" src="images/loc.png" style="padding-top:15pt;height:auto;max-width:35px" />
</div>
<div class="col-md-6 column">
<h2>Venue 2015</h2>
</div>
</div>
</div>
</div>
</body>
</html>
the col-md-* classes are only for screensizes from 992px to 1200px - if you want a 2-column-layout on small displays, add the col-xs-* classes.
In your case:
<div class="row clearfix">
<div class="col-md-6 col-xs-6 column">
<img alt="300x200" src="images/loc.png" style="padding-top:15pt;height:auto;max-width:35px" />
</div>
<div class="col-md-6 col-xs-6 column">
<h2>Venue 2015</h2>
</div>
</div>
You could write a function in Javascript that specifies the (smaller) sizes of specific elements if screen size is under a certain size. The full size image would still load, but the script would tell it to load width smaller width and height for smaller screen size.
Here is a example of code that i need advice for:
<div class="container hidden-xs">
<div class="row hidden-xs">
<div class="container hidden-sm hidden-md hidden-lg">
<div class="row xtrastyle hidden-sm hidden-md hidden-lg">
<div class="col-md-12">
Test
</div>
</div>
</div>
</div>
Assume i want one type of container and row for xs devices and one container and row for other devices. It doesnt work like this code. I need tips to use to get it work.
If you want to have the same contents with diffrent styling use css media queries.
HTML:
<div class="container">
<div class="row xtrastyle">
<div class="col-md-12">
Test
</div>
</div>
</div>
CSS:
#media (max-width: 768px) {
.xtrastyle {
// apply your xtra style here
color: red;
}
}
Hint: If you use LESS instead of CSS you could use bootstrap #screen-sm variable instead of 768px: http://getbootstrap.com/css/#less
Just put both containers on the same level in HTML like so:
HTML
<div class="container hidden-xs">
<div class="row">
Hidden XS
</div>
</div>
<div class="container visible-xs">
<div class="row">
Visible XS
</div>
</div>
See this working Bootply. Also, as you can see and #ganders pointed out in the comments, its easyly achievable using the .visible-?? and .hidden-??-classes. (And much more readable btw.)
The corresponding bootstrap-classes are explained well in the bootstrap-docs.
Bootstrap doesn't have this built in as that's a fairly niche use case. You'll have to write either some custom mixins (assuming you run into this issue often) or by modifying their behavior at various breakpoints.
I'm trying to create a custom row which has 8 logos sat in even columns at the bottom of a page when sat at full size desktop (lg) I need them to work responsively.
I've tried a few options - 2 cols with 4 cols nested and 4 cols with 2 cols nested... the problem I have is the gutter creates extra spacing between columns which means the logos won't space evenly. Any experts have a better idea how I could place 8 logos spaced evenly in a row? perhaps creating a new 8 col custom grid?
Any help would be great.
Thanks
N
Bootstrap 3
How about using a list-inline with 4 columns of 2 like this..
<ul class="list-inline row">
<li class="col-sm-3"><div class="col-sm-6"></div><div class="col-sm-6"></div></li>
<li class="col-sm-3"><div class="col-sm-6"></div><div class="col-sm-6"></div></li>
<li class="col-sm-3"><div class="col-sm-6"></div><div class="col-sm-6"></div></li>
<li class="col-sm-3"><div class="col-sm-6"></div><div class="col-sm-6"></div></li>
</ul>
Demo: http://bootply.com/90906
Bootstrap 4
Since Bootstrap 4 is flexbox, any number of equal width columns is now possible using the auto-layout grid..
<div class="container-fluid">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
</div>
</div>
Demo: http://www.codeply.com/go/AOVGoJncei
2 columns 6 with each 4 colums 3 inside row-fluid
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
</div>
Extending on my answer here: https://stackoverflow.com/a/25023129/2266157
Here is a demonstration of an eight-wide Bootstrap row structure, with
Equal padding (i.e. column gutters)...
<div class="container">
<h2>No padding (.no-pad) on outermost columns (.col-md-6)<br></h2>
<h3>Then nested columns can have padding...</h3>
<div class="row no-pad">
<div class="col-md-6">
<div class="row">
<div class="col-md-3"><i>col1</i></div>
<div class="col-md-3"><i>col2</i></div>
<div class="col-md-3"><i>col3</i></div>
<div class="col-md-3"><i>col4</i></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3"><i>col1</i></div>
<div class="col-md-3"><i>col2</i></div>
<div class="col-md-3"><i>col3</i></div>
<div class="col-md-3"><i>col4</i></div>
</div>
</div>
</div>
</div>
...or indeed no column gutters.
<div class="container">
<h3>...or not</h3>
<div class="row no-pad">
<div class="col-md-6">
<div class="row no-pad">
<div class="col-md-3"><i>col1</i></div>
<div class="col-md-3"><i>col2</i></div>
<div class="col-md-3"><i>col3</i></div>
<div class="col-md-3"><i>col4</i></div>
</div>
</div>
<div class="col-md-6">
<div class="row no-pad">
<div class="col-md-3"><i>col1</i></div>
<div class="col-md-3"><i>col2</i></div>
<div class="col-md-3"><i>col3</i></div>
<div class="col-md-3"><i>col4</i></div>
</div>
</div>
</div>
</div>
This CSS is required in addition to Bootstrap
.row.no-pad {
margin-right:0;
margin-left:0;
}
.row.no-pad > [class*='col-'] {
padding-right:0;
padding-left:0;
}
Here is a working demo:http://www.bootply.com/eWWpj3G9tL
And the logo centring
To position the logos, I'd either use an <img class="img-responsive"> or if they're smaller than the column width then you could CSS center them with text-align:center (or the bootstrap class text-center placed on the .col-*) or using the following CSS:
#logos img {
display:block;
margin:0 auto;
}
Sounds like this is for a specific module so I would just create a simple new grid for this...
.eightLogos .logo {
float: left;
width: 12.5%;
margin: 0;
padding: 0;
}
Its Simple... Just add another column to your css.
Its best not to edit bootstrap CSS (and use a cdn).
So... We need to create the column css for all screen types.
I usually address 3 screen sizes which means creating 3 css sets for this column
big screens & normal screens
medium screens (ipad ext.)
small screens (mobile phones ext.)
Decision time:
Since we are talking about 8 columns which is a lot
its best to go with these css rules (in my opinion)
i almost always use a .container class for my designs which
makes big screen mode suitable in tablet unless in portrait mode.
In short, Here are a good set of css rules
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
eight-col {width: 50%; padding: 0 15px;}
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
eight-col {width: 20%; padding: 0 15px;}
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
eight-col {float: left; width: 12.5%; margin: 0; padding: 0 5px;}
}
Please note:
i play around with padding as i see fit. Its best to leave some extra padding when in mobile mode but you can play around with it ;)