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>
Related
This is html:
<div class="container-fluid">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-xs-6 col-sm-3" style="background-color: red;">
<p>lskdflsjdlfsjdlf sdljsdsdfs dfsdfsdfsf</p>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: green;">
<p>lskdflsjdlfsjdlfsdljsdsdfsd sdfsdfsf</p>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: blue;">
<p>lsdflksjdfsldkfjlsd jflskjd</p>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: yellow;">
<p>lsdjflksjdfkmsld mflsd mlksdf</p>
</div>
</div>
</div>
effect picture when zooming out browser:
This is sample part,but I don't know what is happened?
I know the reason. My bootstrap version is 4.0.0 and its extra small is .col- rather than .col-xs-.
This question already has answers here:
Bootstrap 4.0 Grid System Layout not working
(1 answer)
bootstrap 3 to bootstrap 4 cols no longer horizontally aligned [duplicate]
(3 answers)
Closed 4 years ago.
I have two columns, col-4 and col-8 inside col-12 and row. But the two columns are not in the same row. I am not able to understand why this is happening even when I am not writing any CSS just the bootstrap grid.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid">
<div class="row" id="first_row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="img/nahid.jpg" class="img-fluid" alt="Responsive image" id="avater_main">
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Home</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">About</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Portfolio</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Contact</div>
</div>
</div>
</div>
The additional parent container of 12 grid is not needed.
The div which is required to remove
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
Also, attached working demo with snippet
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row" id="first_row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="img/nahid.jpg" class="img-fluid" alt="Responsive image" id="avater_main">
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Home</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">About</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Portfolio</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Contact</div>
</div>
</div>
</div>
Every column needs a row parent in Bootstrap.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row" id="first_row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<!-- Row added here. -->
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="//placehold.it/64x64" class="img-fluid" alt="Responsive image" id="avater_main">
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<!-- And a row here. -->
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Home</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">About</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Portfolio</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Contact</div>
</div>
</div>
</div>
</div>
</div>
</div>
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.
I would like to know if there's a better solution to solve the space problem between the two first columns in this code: https://jsfiddle.net/5vtc1Lhp/#&togetherjs=qkIyJnDkmf
I did try to place div inside div, but the width of the div decreased in the first example ( at the top). At the botton it works fine, but I had to define a padding value in px which I don't like since it's a fixed value and I don't know if this spacement should change automatically.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="col-md-12">
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-8">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
</div>
</div>
<hr>
Bellow is OK.
<hr>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-8" style="padding: 0 0px 0 30px;">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
</div>
</div>
Thank you!
Container gives gutter of 30px(15px on left and right)
If you remove the container and give it a row.It will give -15px padding on both sides. And that's what you are looking for, right?
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-8">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
In second column, I have a read more button, on click of that, text expands & the icons of 1st & 3rd column also comes down which I do not want... Somebody give me a demo template In which If I click the button, then only the icon below to the text div should come down and should not affect the position of other columns icons. I'm using this code...
<div class="grid">
<div class="row">
<div class="groups col-sm-4 col-xs-offset-4 career-description">
<h1>srv</h1>
<button class="btn-link favorite glyphicon glyphicon-bookmark CLbookmark"></button>
<h3 class="noData_Msg" style="text-align: center;">Sorry, Data is not available for this career.</h3>
<p class="brief_Desc_a">
</p>
<p class="det_DescF" ng-show="readMore">
</p>
<a class="link_b" ng-click="readMore = true" href="javascript:void(0)">Read More</a>
<a class="link_b" ng-click="readMore = false" href="javascript:void(0)">Read Less</a>
</div>
</div>
<div class="row career-cards">
<div class="groups col-sm-4">
<div class="future-trnds">
<img class="img-responsive" src="images/Future_trends_v02.png" alt="">
</div>
</div>
<div class="groups col-sm-4 col-xs-offset-8">
<div class="related-Careers">
<img class="img-responsive" src="images/Related_careers_v02.png" alt="">
</div>
</div>
</div>
<div class="row">
<div class="groups col-sm-4">
<div class="day-in-life">
<img id="no_Gray" class="img-responsive" src="images/Day_In_Life_v02.png" alt=""><img id="gray_Out" ng-Click="false" class="img-responsive gray_Icon hidden" src="images/Day_In_Life_v02.png" alt="">
</div>
</div>
<div class="groups col-sm-4">
<div class="introVideo">
<div class="vid_Dimension" style="height: 300px !important;" ng-hide="!video_Url" my-youtube code="video_Url">
</div>
<h3 class="no_Video" ng-show="!video_Url">Sorry, video is not available for this career.</h3>
</div>
</div>
<div class="groups col-sm-4">
<div class="cost-Salary">
<a href="javascript:void(0)" class="modal-cost modal-cont displayTooltip" title="Cost & Salary">
<img class="img-responsive " src="images/Cost_salary_v02.png" alt="Cost & Salary">
</a>
</div>
</div>
</div>
<div class="row">
<div class="groups col-sm-4">
<div class="honeycomb-wraper">
<div class="honeycomb" ng-include="'pages/traitTriangle.html'"></div>
</div>
</div>
<div class="groups col-sm-4">
<div class="courses_Colleges">
<img class="img-responsive " src="images/Courses_Colleges_v02.png" alt="">
</div>
</div>
<div class="groups col-sm-4">
<div class="honeycomb-wraper">
<!-- <div class="honeycomb" ng-include="'pages/iconicPeople_grid.html'"></div> -->
<div class="honeycomb" ng-include="'pages/workEnv_Hex.html'"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="content">
<div class="cont">
<div class="slide-text">
<span>Opportunity & Industries </span>
</div>
<div static-image ></div>
</div>
<div class="cont">
<div class="slide-text">
<span>Cost & salary</span>
</div>
<div class="slide-content">
<!-- <img class="img-responsive" alt="modal-image" title="modal-image" /> -->
<div ></div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<style>
.border{
border: 2px solid black;
}
.heightWidth{
height: 200px;
width: 200px;
}
</style>
<body>
<div class="col-lg-4 col-md-4 col-sm-12 border"> this is your first division
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
first image goes here
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
2nd image goes here
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
3rd image goes here
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 border"> this is your second divsion
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12">
your middle section the text part goess here
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 cl-sm-12 border"> this one is your third division
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
first image goes here
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
2nd image goes here
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
3rd image goes here
</div>
</div>
</div>
</body>
</html>
This will work.