How can I achive this behaviour on different screens. (Grey rectangles are divs with some content). Assuming, picture 1 (left) is normal, wide screen; picture 2 (middle) is small (netbook or tablet) screen; picture 3 (right) is mobile screen. I use bootstrap 3.
You could use the offset column and column ordering classes. Making sure to apply each at the appropriate screen/grid size.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
div[class^="col-"] > div {
margin: 1rem 0;
min-height: 100px;
background-color: yellow;
}
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0 col-md-push-4">
<div>2</div>
</div>
<div class="col-sm-6 col-md-4 col-md-pull-4">
<div>1</div>
</div>
<div class="col-sm-6 col-md-4">
<div>3</div>
</div>
</div>
</div>
Note: The extra DIV in the column DIVs is for illustrative purposes. Do whatever you need to do.
You just need to use pull push classes of bootstrap.also learn about col-*-offset-* classes.
To learn more check this site:
Twitter bootstrap official docs
This is an example how you can do it
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-4 col-lg-push-4" style="height: 100px; background-color: red;">
2
</div>
<div class="col-xs-12 col-md-6 col-lg-4 col-lg-pull-4" style="height: 100px; background-color: blue;">
1
</div>
<div class="col-xs-12 col-md-6 col-lg-4" style="height: 100px; background-color: green;">
3
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0 col-md-push-4">2</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-md-pull-4">1</div>
<div class="col-xs-12 col-sm-6 col-md-4">3</div>
</div>
Related
I'm trying to achieve the result detailed in the images attached in the best way possible but for some reason I can't find any solution that ticks all the boxes.
Desktop version - The images' height is fixed to 600px, but the width must always keep the same aspect ratio on resize. Also, the left column with the heading, paragraphs and buttons is the one to be fluid first, but when it reaches its min-width, then the images column must start to resize.
On mobile, the order needs to change so that the buttons go underneath the images, but they still keep their aspect ratio between their width and height to fill the container.
I've tried using flex, grid, but the closest results I'd found was by using good-old display:inline-block, but that presents an issue when switching the order of blocks which can easily be fixed by using flex or grid. The images part is particularly tricky.
I think it can be achieved via bootstrap classes.
I have created a demo in the code snippet below using inbuilt bootstrap classes.
Hope it helps
.heading,.paragraph,.buttons{
border: 1px solid #000;
padding: 15px;
background: #ccc;
}
.img-div img{
height: 600px;
width: 100%;
}
#media (max-width:767px){
.img-div img{
height: 300px;
width: 100%;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-12 col-12">
<div class="heading">
<h1>Heading</h1>
</div>
<div class="paragraph">
<h1>Paragraphs</h1>
<p>Paragraph Content</p>
</div>
<div class="buttons d-none d-sm-block">
<h1>Buttons</h1>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-6">
<button class = "btn btn-primary">Button 1</button>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-6">
<button class = "btn btn-primary">Button 2</button>
</div>
</div>
</div>
</div>
<div class="col-lg-7 col-md-7 col-sm-12 col-12">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-8">
<div class="img-div">
<img src="https://picsum.photos/500/600" height = "600" class = "img-responsive">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="img-div">
<img src="https://picsum.photos/500/600" height = "600" class = "img-responsive">
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-12 d-sm-none">
<div class="buttons ">
<h1>Buttons</h1>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-6">
<button class = "btn btn-primary">Button 1</button>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-6">
<button class = "btn btn-primary">Button 2</button>
</div>
</div>
</div>
</div>
</div>
I'm fairly inexperienced in CSS, HTML and bootstrap.
Basically I would like to know how to split a single column on a large screen, into two columns on smaller screen so that the columns two div's sit side by side instead of on top of each other when the window is resized.
<div class= "container-fluid">
<div class ="row">
<div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12">
<canvas width="800" height="450">
</canvas>
</div>
<div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
<div id="Pseudo">
</div>
<div id="Element">
</div>
</div>
</div>
</div>
I want the Pseudo and element divs to sit next to each other on smaller devices and on top of each other on larger. Its working fine on a large screen.
I'm not sure if I can do that using bootstrap, I have been trying for a long time but having no luck.
You need to define single columns for your element, because defining the external column for both of them is not going to give you the result you are looking for. So, I think that something like this could do the trick:
#Pseudo {
background-color: red;
}
#Element {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class= "container-fluid">
<div class ="row">
<div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-9 ">
<canvas width="800" height="450">
</canvas>
</div>
<div class="col-xl-9 col-lg-3 col-md-12 col-sm-12 col-3">
<div class="row">
<div class="col-6 col-sm-6 col-md-6 col-lg-12 col-xl-12" id="Pseudo">
x
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-12 col-xl-12" id="Element">
y
</div>
</div>
</div>
</div>
</div>
From your code you are not doing anything to make the Pseudo and element divs dynamic.
It's funny because what you are trying to achieve is correct from the perspective of:
<canvas width="800" height="450">
</canvas>
and
<div id="Pseudo">
</div>
<div id="Element">
</div>
These two parts are dynamic. So the same way you implemented this for them you should implement for these divs.
Something like this:
<div class ="row">
<div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
<div id="Pseudo">
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
<div id="Element">
</div>
</div>
</div>
And you don't have to worry about the others. Bootstrap accepts nested rows.
This question already has answers here:
Equal height rows in a flex container
(13 answers)
Closed 6 years ago.
Please read my question before marking duplicate
I have bootstrap container in which i have few columns. I want to fix same height for all div.
What i got is this, however it will break the structure while resizing means not use full with responsiveness.
I know there are 2 main solution for them :
1. Flex
2. Table/table-cell
But both are not useful for me. I have also used overflow:hidden and margin-bottom: -99999px;padding-bottom: 99999px; solution but not useful for me.
Solution i have tried : This, this, and this but none of them is useful for me.
I have simply created fiddle(by some answer) but when i try to use the same way in my fiddle then its not giving the same output, don't know why.
I have read this tutorial and went through this too to know more about flex but none of them is useful for me.
So my final fiddle is this. Please check this one and let me know how can i make it responsive while keeping same height.
css
.bg-gray {
color: #666;
background: #efefef;
}
.mrg10T {
margin-top: 10px !important;
}
.mrg10A {
margin: 10px !important;
}
.csT
{
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.csT div div{height:100%;}
Html
<div class="row mrg10T csT">
<div class="text-left col-md-4 thisclass">
<div class="row bg-gray pad5A mrg10A">
<div class="col-md-6 col-sm-6 col-xs-6 font-bold">Current subscription</div><div class="col-md-6 col-sm-6 col-xs-6">: Student Demo</div>
</div>
</div>
<div class="text-left col-md-4 thisclass">
<div class="row bg-gray pad5A mrg10A">
<div class="col-md-6 col-sm-6 col-xs-6 font-bold">Start date</div><div class="col-md-6 col-sm-6 col-xs-6">: 1st-Jan-2016</div>
</div>
</div>
<div class="text-left col-md-4 thisclass">
<div class="row bg-gray pad5A mrg10A">
<div class="col-md-6 col-sm-6 col-xs-6 font-bold">Expiry date</div><div class="col-md-6 col-sm-6 col-xs-6">: 31st-Dec-2016</div>
</div>
</div>
<div style="clear:both;">
</div>
</div>
<div class="row mrg10T csT">
<div class="text-left col-md-4 thisclass">
<div class="row bg-gray pad5A mrg10A">
<div class="col-md-6 col-sm-6 col-xs-6 font-bold">Renewal pricing</div><div class="col-md-6 col-sm-6 col-xs-6">: $100</div>
</div>
</div>
<div class="text-left col-md-4 thisclass">
<div class="row bg-gray pad5A mrg10A">
<div class="col-md-6 col-sm-6 col-xs-6 font-bold">Offers 1</div><div class="col-md-6 col-sm-6 col-xs-6">: 20% cash incentive (will be credited to your account)</div>
</div>
</div>
<div class="text-left col-md-4 thisclass">
<div class="row bg-gray pad5A mrg10A">
<div class="col-md-6 col-sm-6 col-xs-6 font-bold">Renewal pricing</div><div class="col-md-6 col-sm-6 col-xs-6">: $100</div>
</div>
</div>
<div style="clear:both;">
</div>
</div>
Does this work for you..
.csT
{
display: inline;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.csT div div{height:100%;}
.thisclass{height:100px;}
DEMO https://jsfiddle.net/norcaljohnny/jeaxycv8/2/
I need to realize a pretty weird layout and i'm actually using bootstrap.
I have 3 boxes: A, B and C where A.height = B.height + C.height.
On mobile, they should render in the following order:
|B|
|A|
|C|
While on desktop i need the following layout:
|A||B|
| ||C|
(Basically A is the left column while B and C are on the right)
I can't figure out how C should be positioned.
Actually i have this code, it is perfect on mobile but on desktop produces the following layout:
|A||B|
| |
|C|
Code:
<div class="container">
<div class="col-sm-12 col-md-6 col-md-push-6">B</div>
<div class="col-sm-12 col-md-6 col-md-push-6">A</div>
<div class="col-sm-12 col-md-6">C</div>
</div>
Otherwise, putting B and C in the same box works great in desktop but produces
|B|
|C|
|A|
on mobile.
Do you have any suggestion?
Following structure will fix your problem:
<div class="container">
<div class="col-xs-12 col-md-6 pull-right">B</div>
<div class="col-xs-12 col-md-6">A</div>
<div class="col-xs-12 col-md-6 pull-right">C</div>
</div>
.box-B,
.box-C {
background: green;
height: 200px;
}
.box-A {
background: blue;
height: 400px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-xs-12 col-md-6 pull-right box-B">B</div>
<div class="col-xs-12 col-md-6 box-A">A</div>
<div class="col-xs-12 col-md-6 box-C pull-right">C</div>
</div>
Try the C like this:
<div class="container">
<div class="col-sm-12 col-md-6 col-md-push-6">B</div>
<div class="col-sm-12 col-md-6 col-md-push-6">A</div>
<div class="col-sm-12 col-md-6 coll-md-offset-6">C</div>
</div>
OR:
<div class="container">
<div class="col-sm-12 col-md-6 col-md-push-6">B</div>
<div class="col-sm-12 col-md-6 col-md-push-6">A</div>
<div class="col-sm-12 col-md-6 pull-right">C</div>
</div>
To change their view in phones or tablets you can use the implemented classes for it for example:
<div class="col-lg-12 col-xs-6">
<p></p>
</div>
<div class="col-lg-12 col-xs-6">
<p></p>
</div>
Like this in laptops, desktop you will see full width and in phone you will see both divs aligned in one row.
You can allso use col-xs-offset-* to move the div positions but you gotta make shure that you have space.
For Example:
--- THIS IS WRONG --- Because you have only 12 cols and you are setting 2 + 2 offsets so that means you need total of 16 cols.
<div class="col-lg-12 col-xs-6 col-xs-offset-2">
<p></p>
</div>
<div class="col-lg-12 col-xs-6 col-xs-offset-2">
<p></p>
</div>
--- THE RIGHT WAY ---
<div class="col-lg-12 col-xs-4 col-xs-offset-2">
<p></p>
</div>
<div class="col-lg-12 col-xs-4 col-xs-offset-2">
<p></p>
</div>
The classes in bootstrap are:
lg - desktop
md - laptop
sm - small devices (tablets)
xs - extra small devices (phones)
together with them you can use col-**-offset-** or col-**-hidden or col-**- visible
But once again if you are going to use offset make sure you are not going above 12 cols
Hope this will help you!
using rows and pull-right you can get the effect you're looking for:
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 col-md-push-6 pull-right">B</div>
<div class="col-sm-12 col-md-6 col-md-push-6 pull-right">A</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6 pull-right">C</div>
</div>
</div>
that should do the trick.
Somehow I can not get out how to finish my code which I formatted as a list and need to format it as grid too which is switched by javascript.
My HTML Code below is used to list a content:
<div class="list">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Right is next DIV</div>
<div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">Right is next DIV</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">I am the last DIV</div>
</div>
</div>
The CSS Code for the list. All other CSS is taken by bootstrap:
.styled_view div.list {
padding: 0;
width: 100%;
}
The same code should be used to show grid:
<div class="grid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Under me should be a DIV</div>
<div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">Under me should be a DIV</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">I am the last DIV</div>
</div>
</div>
The CSS for the grid:
.styled_view div.grid {
display: inline-block;
overflow: hidden;
vertical-align: top;
width: 19.4%;
}
The 19.4% for each part of gallery keeps the DIVs next to next. It will not push it to a new line. How could I solve it?
Do a row div.
Like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="grid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 bg-success">Under me should be a DIV</div>
<div class="col-lg-6 col-md-6 col-sm-5 col-xs-12 bg-danger">Under me should be a DIV</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 bg-warning">I am the last DIV</div>
</div>
</div>
If your your list is dynamically generated with unknown number and your target is to always have last div in a new line set last div class to "col-xl-12" and remove other classes so it will always take a full row.
This is a copy of your code corrected so that last div always occupy a full row (I although removed unnecessary classes).
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="grid">
<div class="row">
<div class="col-sm-3">Under me should be a DIV</div>
<div class="col-md-6 col-sm-5">Under me should be a DIV</div>
<div class="col-xl-12">I am the last DIV and I always take a full row for my self!!</div>
</div>
</div>