Good afternoon,
I work on responsive web and I need to do 1 col on small displays and 2 on bigger. I used col-12 and col-lg-6 but when I needed change it but combination col-12 and col-md-6 didnt work.
Strange thing is that it works on jsfiddle but not on my web.
Here is code on my web and jsfiddle link.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<style>
#blue {
background:blue;
}
#red{
background: red;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-md visible-lg"></div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
</div>
<div class="row">
<div id="blue" class="col-12 col-md-6">
class="col-12 col-md-6"
</div>
<div id="red" class="col-12 col-md-6 ">
class="col-12 col-md-6"
</div>
</div>
<div class="row">
<div id="blue" class="col-12 col-lg-6">
class="col-12 col-lg-6"
</div>
<div id="red" class="col-12 col-lg-6 ">
class="col-12 col-lg-6"
</div>
</div>
</div>
</body>
</html>
https://jsfiddle.net/5yjtn1u5/
The discrepancy between JSFiddle and running on a browser appears to be the device size. The JSFiddle example is running as a Medium device, while your web example is probably big enough to be Large device like mine was. Your code failed because on a Large device, "col-12" will be selected instead of "col-md-6", if that was your problem.
Related
I got the ownership of a web app which is a mix of bootstrap(5) and html code.
The problem is if I try to push a column using col-md-offset-4 it does not work at all.
it's not just col-md-offset-4, any col-md-offset-* is not working.
<div class="container">
<h1>Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-3 ">.col</div>
<div class="col-sm-3 ">.col</div>
<div class="col-sm-3 ">.col</div>
<div class="col-sm-3 ">.col</div>
</div>
</div>
The syntax is slightly different: See here the syntax is class="col-md-4 offset-md-4"
[class*=col-] {
background: yellow;
margin: 2px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<div class="container">
<h1>Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-3 ">.col</div>
<div class="col-sm-3 ">.col</div>
<div class="col-sm-3 ">.col</div>
<div class="col-sm-3 ">.col</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
I am playing with offset and margins on bootstrap 4, i want to achieve
something like this picture everything is working except white spaces between boxes, when you go to medium size there is blue and yellow box next to each other but when i put mr-md-2 then blue box goes down, why ? i want white spaces between all boxes and sizes like in picture
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
</style>
</head>
<body>
<div class="container-fluid">
<div class="row grid " >
<div class="col-xs-12 col-sm-6 col-md-4 mr-md-2 col-lg-3 offset-lg-3 " style="background-color:burlywood; height:200px;"></div>
<div class="col-xs-12 col-sm-6 col-md-4 ml-md-2 col-lg-3 " style="background-color:orange; height:200px;"></div>
</div>
<div class="row grid">
<div class="col-xs-12 col-sm-6 mt-md-2 mt-md-3 col-md-4 col-lg-6 " style="background-color:black;height:200px; "></div>
<div class="col-xs-12 col-sm-6 col-md-4 mt-md-2 offset-md-4 col-lg-3 offset-lg-3 " style="height:200px;background-color:red; "></div>
</div>
<div class="row grid">
<div class="col-xs-12 col-sm-6 col-md-4 mt-md-2 offset-md-4 col-lg-3 offset-lg-0 " style="background-color:yellow;height:200px; "></div>
<div class="col-xs-12 col-sm-6 col-md-4 mt-md-2 mr- col-lg-3 mr-lg-0 offset-lg-6 " style="background-color:blue; height:200px;"></div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
Consider that in the BS Grid system there are no margins between columns (or between rows for that matter) but there are gutters:
Run this snippet in a full screen and resize your window:
.row > div {
/* background-color: lightsteelblue; */
margin-top:20px;
}
.content {
background-color: burlywood;
height: 200px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 offset-lg-3">
<div class="content">r1c1</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="content">r1c2</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-6">
<div class="content">r2c1</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 offset-md-4 col-lg-3 offset-lg-3 ">
<div class="content">r2c2</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 offset-md-4 col-lg-3 offset-lg-0 ">
<div class="content">r3c1</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 offset-lg-6">
<div class="content">r3c2</div>
</div>
</div>
</div>
I have trouble aligning my divs with bootstrap. The big div in the middle is pushing down the boxes at the sides. How can I achieve this layout?
The layout of divs I want to achieve:
I've been working with this code, tell me if it's what you need:
HTML:
<div class="row">
<div class="col-md-3">
<div class="row ">
<div class="col-md-12 medium">
</div>
</div>
<div class="row">
<div class="col-md-12 medium">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row ">
<div class="col-md-12 large">
</div>
</div>
</div>
<div class="col-md-3">
<div class="row ">
<div class="col-md-12 small">
</div>
</div>
<div class="row">
<div class="col-md-12 small">
</div>
</div>
<div class="row">
<div class="col-md-12 small">
</div>
</div>
</div>
</div>
CSS:
.small{
height:100px;
border: 1px solid;
}
.medium{
height:200px;
border: 1px solid;
}
.large{
height:400px;
border: 1px solid;
}
Hope it helps!
Based on the image you have provided i have created below sample design please check it. In order to achieve your design i have written some inline css please check it as well
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-3 col-xs-3" >
<div class="row" style="min-height:200px;border:1px solid;margin-bottom:60px">
This is testing data
</div>
<div class="row" style="min-height:360px;border:1px solid;margin-bottom:10px">
This is testing data
</div>
</div>
<div class="col-lg-5 col-sm-5 col-xs-5" style="min-height:620px;border:1px solid;margin-left:10px;margin-right:10px" >
This is center content
</div>
<div class="col-lg-3 col-sm-3 col-xs-3" >
<div class="row" style="min-height:200px;border:1px solid;margin-bottom:10px">
This is testing data
</div>
<div class="row" style="min-height:200px;border:1px solid;margin-bottom:10px">
This is testing data
</div>
<div class="row" style="min-height:200px;border:1px solid;margin-bottom:10px">
This is testing data
</div>
</div>
</div>
</div>
</body>
</html>
Declare three main divs and place children divs in it. Check below image. In responsive status parent 100% children side by side
https://i.stack.imgur.com/1qTPG.png
.border_black{
border: thin black solid
}
.margin_top_10px{
margin-top: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">
<div class="row border_black">
<p>Left Side Contents 1</p>
</div>
<div class="row border_black margin_top_10px">
<p>Left Side Contents 2</p>
<p>Left Side Contents 2</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 center_div text-center">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 border_black">
<p>Center Contents</p>
<p>Center Contents</p>
<p>Center Contents</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">
<div class="row border_black">Right Side Contents 1</div>
<div class="row border_black margin_top_10px">Right Side Contents 2</div>
<div class="row border_black margin_top_10px">Right Side Contents 3</div>
</div>
</div>
</div>
Here is JSFiddle
Hope this helps.
Hello im trying to add offset only on medium device and hide this offset on others devices. I I looked through some others similar questions but any of them could solved my problem.
Here's code:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3" style="background-color: red"> 111 </div>
<div class="col-lg-4 col-md-4 col-sm-5 col-sm-offset-1" style="background-color: blue"> 222 </div>
<div class="col-lg-3 col-md-4 col-sm-1" style="background-color: black"> 333 </div>
<div class="col-lg-2 col-md-1 col-sm-2" style="background-color: orange"> 444 </div>
</div>
</div>
So the problem is that it add offset on every device not only on medium how it should be.
Screen on large: https://zapodaj.net/f4b34ebc771fb.png.html
I think offset needs to be "reset" on larger screens, otherwise it inherits the previous value. Using col-sm-offset-1 col-md-offset-0 seems to fix the issue.
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3" style="background-color: red"> 111 </div>
<div class="col-lg-4 col-md-4 col-sm-5 col-sm-offset-1 col-md-offset-0" style="background-color: blue"> 222 </div>
<div class="col-lg-3 col-md-4 col-sm-1" style="background-color: black"> 333 </div>
<div class="col-lg-2 col-md-1 col-sm-2" style="background-color: orange"> 444 </div>
</div>
</div>
If you want your offset on medium devices use col-md-offset-1 and not col-sm-offset-1.
You also need to reset the offset for large devices with col-lg-offset-0.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3" style="background-color: red">111</div>
<div class="col-lg-4 col-md-4 col-sm-5 col-md-offset-1 col-lg-offset-0" style="background-color: blue">222</div>
<div class="col-lg-3 col-md-4 col-sm-1" style="background-color: black">333</div>
<div class="col-lg-2 col-md-1 col-sm-2" style="background-color: orange">444</div>
</div>
</div>
I have this site:
link
I want to left align this div. I attached bellow a pic to understand what i want to do.
CODE HTML:
<div class="alt-service-grid">
<div class="row">
<div class="col-sm-6 col-md-3 col-lg-3">//SOME CODE HTML</div>
<div class="col-md-6 col-lg-6 hidden-xs hidden-sm">//SOME CODE HTML</div>
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="alt-service-wrap">
//SOME CODE HTML
</div>
<div class="alt-service-wrap">
//SOME CODE HTML
</div>
<div class="alt-service-wrap">
//This is myDiv,align-left
</div>
</div>
</div>
</div>
This site is made with Wordpess and I use a paid template.
I have tried at last div to add the fallow html code float:left;
Can you help me to solve this problem please?
Thanks in advance!
You need to place it after row class div
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="alt-service-grid">
<div class="row">
<div class="col-sm-6 col-md-3 col-lg-3">//SOME CODE HTML</div>
<div class="col-md-6 col-lg-6 hidden-xs hidden-sm">//SOME CODE HTML</div>
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="alt-service-wrap">
//SOME CODE HTML
</div>
<div class="alt-service-wrap">
//SOME CODE HTML
</div>
</div>
</div>
<div class="alt-service-wrap">
//This is myDiv,align-left
</div>
</div>
You can change the place of your div and make it in the first col-sm-6 col-md-3 col-lg-3 div:
<div class="alt-service-grid">
<div class="row">
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="alt-service-wrap">
//SOME CODE HTML
</div>
<div class="alt-service-wrap">
//This is Your Div
</div>
</div>
<div class="col-md-6 col-lg-6 hidden-xs hidden-sm">//SOME CODE HTML</div>
<div class="col-sm-6 col-md-3 col-lg-3">//SOME CODE HTML</div>
</div>
</div>