Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have multiple rows of a grid where there is text in one column and an image in the other. For every row the order is reversed so that i looks nice on desktop-mode. The HTML is rendered from a CMS, so the order is set by the user and is dynamic.
For mobile mode I would however always want to have the image on top, and then the text below. How can I rearrange my grid to do this on a media query?
I have a fiddle here on how it works on desktop, but no Idea how to do the media query to always get the image on top, and text below. Im guessing flexbox might be able to solve this somehow? All help greatly appreciated!
https://jsfiddle.net/3opref6L/
This code gets rendered by the CMS and might be longer or shorter.
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="block htmlblock">
<p style="text-align: left;">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="block image-block">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="block image-block">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="block htmlblock">
<p style="text-align: left;">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="block htmlblock">
<p style="text-align: left;">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="block image-block">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
</div>
</div>
</div>
This is a DYNAMIC SOLUTION with flexbox on top of the Bootstrap and This will work on any number of rows dynamically. Since Bootstrap is based on Flexbox itself, This solution worked for us.
UPDATE: Some fixes performed to override bootstrap specific CSS:
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
#media (max-width: 768px) {
.container .row {
display: flex;
flex-direction: column;
}
.container .row:nth-child(2n-1) .col:first-child {
order: 2;
}
.container .row:nth-child(2n-1) .col:last-child {
order: 1;
}
}
#media (min-width: 769px) {
.container .row {
display: flex;
flex-direction: row !important;
}
.container .row .col:first-child {
order: 1;
}
.container .row .col:last-child {
order: 2;
}
}
/* Bug Fix */
#media (min-width: 576px) {
.col-sm-12 {
flex: 0 0 50% !important;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>JS Bin</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./OrderIssue.css" />
</head>
<body>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col md-6 col-sm-12">
<div class="block htmlblock">
<p style="text-align: left">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
<div class="col md-6 col-sm-12">
<div class="block image-block">
<img src="https://dummyimage.com/200x200/000/fff" />
</div>
</div>
</div>
<div class="row">
<div class="col md-6 col-sm-12">
<div class="block image-block">
<img src="https://dummyimage.com/200x200/000/fff" />
</div>
</div>
<div class="col md-6 col-sm-12">
<div class="block htmlblock">
<p style="text-align: left">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
</div>
<div class="row">
<div class="col md-6 col-sm-12">
<div class="block htmlblock">
<p style="text-align: left">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
<div class="col md-6 col-sm-12">
<div class="block image-block">
<img src="https://dummyimage.com/200x200/000/fff" />
</div>
</div>
</div>
</div>
</body>
</html>
Working correctly now.
if you use bootstrap 4 in this version of bootstrap used flex box to grid systems .
There are good features in Flexbox, one of which is the possibility of flex-direction . in this feature you can set row-reverse and resolve this problem.
Using a class is usually easier:
flex-sm-column-reverse flex-md-row
Example here: https://codepen.io/yasgo/pen/NWRgejr
I need to introduce a new class for make the same structure you want use class flex-row-reverse class with row. it works perfect as you want.
This is the small code to understand what I want to tell.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row mb-5">
<div class="col-md-4 col-sm-12">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="col-md-8 col-sm-12">
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
<div class="row mb-5 flex-row-reverse">
<div class="col-md-4 col-sm-12">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="col-md-8 col-sm-12">
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
<div class="row mb-5">
<div class="col-md-4 col-sm-12">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="col-md-8 col-sm-12">
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
<div class="row mb-5 flex-row-reverse">
<div class="col-md-4 col-sm-12">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="col-md-8 col-sm-12">
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
</div>
</body>
</html>
Related
I want to add a gap between each column. If I add a margin property the columns do not fit in one row. How could I achieve 4 columns each row with gaps?
<style>
.test {
border: 5px solid red;
}
</style>
<div class="container-fluid test">
<div class="row">
<div class="col-md-3 test m-2">
Hello
</div>
<div class="col-md-3 test m-2">
Hello
</div>
<div class="col-md-3 test m-2">
Hello
</div>
<div class="col-md-3 test m-2">
Hello
</div>
</div>
</div>
enter image description here
EDIT:
I think I overlook something ...
This works fine:
.gap {
margin: 10px;
border: 1px solid black;
width: fit-content;
padding: 10px;
}
.row {
display: flex;
border: 1px solid black;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Startseite</title>
<!-- Basic Icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="styletest.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 gap">
columns 1
</div>
<div class="col-sm-3 gap">
columns 2
</div>
<div class="col-sm-3 gap">
columns 3
</div>
<div class="col-sm-3 gap">
columns 4
</div>
<div class="col-sm-3 gap">
columns 5
</div>
</div>
</div>
</body>
</html>
but if I add the latest bootstrap reference it does not work.
Like this:
.gap {
margin: 10px;
border: 1px solid black;
width: fit-content;
padding: 10px;
}
.row {
display: flex;
border: 1px solid black;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Startseite</title>
<!-- Basic Icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="styletest.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 gap">
columns 1
</div>
<div class="col-sm-3 gap">
columns 2
</div>
<div class="col-sm-3 gap">
columns 3
</div>
<div class="col-sm-3 gap">
columns 4
</div>
<div class="col-sm-3 gap">
columns 5
</div>
</div>
</div>
</body>
</html>
Margins are essential to how the grid columns work. Instead adjust the padding to effect the space around the content of the columns...
https://codeply.com/go/YySEuVELp6
<div class="container-fluid test">
<div class="row">
<div class="col-md-3 p-2">
<div class="test">Hello</div>
</div>
<div class="col-md-3 p-2">
<div class="test">Hello</div>
</div>
<div class="col-md-3 p-2">
<div class="test">Hello</div>
</div>
<div class="col-md-3 p-2">
<div class="test">Hello</div>
</div>
</div>
</div>
Note: The space between columns is known as the "gutter".
.background {
background: blue;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="col-md-12 background">
<h1>test1</h1>
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 background">
<h1>test2</h1>
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 background">
<h1>test3</h1>
</div>
</div>
</div>
</div>
https://codepen.io/justmemaarten/pen/mgYOGV
I'm unable to horizontally align my columns in bootstrap. What I'm wanting is the image to be on the left, and the text to be on the right, but it keep stacking vertically. Can I get some help with this?
From my understanding, col-md-6 will split the page into 2 columns, and col-xs-12 will stack them vertically on mobile, but it doesn't seem to be doing that for me. Is something I'm doing that's overriding the default bootstrap css?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"
crossorigin="anonymous">
<style media="screen" type="text/css">
img {
width: 100%;
}
.btn {
margin: auto;
}
.vertical-center {
height:100%;
width:100%;
}
.left-text {
text-align: left;
}
</style>
</head>
<body class="verticalcenter">
<div class="container vertical-center">
<div class="col-xs-12 col-sm-12 col-lg-6">
<img src="./profile.jpg">
</div>
<div class="col-xs-12 col-sm-12 col-lg-5">
<div class="row left-text">
<div class="col-xs-12 col-md-8">
<h2>MyStackFlowethOver</h2>
</div>
<div class="col-xs-12 col-md-8">
<h4>web developer</h4>
</div>
<div class="col-xs-12 col-md-8">
github
</div>
<div class="col-xs-12 col-md-8">
linkedin
</div>
<div class="col-xs-12 col-md-8">
twitter
</div>
<div class="col-xs-12 col-md-8">
blog
</div>
<div class="col-xs-12 col-md-8">
resume
</div>
</div>
</div>
</div>
</body>
</html>
first of all, you need <div class = "row"> for every row of content you want to insert. That could be messing up your layout.
Example from your code:
<div class = "row">
<div class="col-xs-12 col-sm-12 col-lg-6">
<img src="./profile.jpg">
</div>
</div>
and so on.
This should solve your issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"
crossorigin="anonymous">
<style media="screen" type="text/css">
img {
width: 100%;
}
.btn {
margin: auto;
}
.vertical-center {
height:100%;
width:100%;
}
.left-text {
text-align: left;
}
</style>
</head>
<body class="verticalcenter">
<div class="container vertical-center">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-6">
<img src="./profile.jpg">
</div>
<div class="col-xs-12 col-sm-12 col-lg-5">
<div class="row left-text">
<div class="col-xs-12 col-md-8">
<h2>MyStackFlowethOver</h2>
</div>
<div class="col-xs-12 col-md-8">
<h4>web developer</h4>
</div>
<div class="col-xs-12 col-md-8">
github
</div>
<div class="col-xs-12 col-md-8">
linkedin
</div>
<div class="col-xs-12 col-md-8">
twitter
</div>
<div class="col-xs-12 col-md-8">
blog
</div>
<div class="col-xs-12 col-md-8">
resume
</div>
</div>
</div>
</div>
</div>
</body>
</html>
FYI In Bootstrap-4 there is no class like col-xs-* so you need to replace col-xs-12 with col-12 and you also forget you two columns to wrap with row class I have also checked in your code you need also put one meta tag in your head for require responsive site like
And the updated code is as Follow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<style media="screen" type="text/css">
img {
width: 100%;
}
.btn {
margin: auto;
}
.vertical-center {
height:100%;
width:100%;
}
.left-text {
text-align: left;
}
</style>
</head>
<body class="verticalcenter">
<div class="container vertical-center">
<div class="row">
<div class="col-12 col-sm-12 col-lg-6">
<img src="./profile.jpg">
</div>
<div class="col-12 col-sm-12 col-lg-5">
<div class="row left-text">
<div class="col-12 col-md-8">
<h2>MyStackFlowethOver</h2>
</div>
<div class="col-12 col-md-8">
<h4>web developer</h4>
</div>
<div class="col-12 col-md-8">
github
</div>
<div class="col-12 col-md-8">
linkedin
</div>
<div class="col-12 col-md-8">
twitter
</div>
<div class="col-12 col-md-8">
blog
</div>
<div class="col-12 col-md-8">
resume
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I Think this will help you. Happy code :)
This question already has answers here:
Empty vertical space between columns in Bootstrap 4
(2 answers)
Closed 4 years ago.
I have this three cols, the matter is that the second one has much more content than the others so its height is higher.
How it shoud be
That´s the result i have
The content is charge from other htmls.
In addittion i will have to make the divs drag & dropa so flexbox does not good for my problem.
$('.component-container').sortable({
cursor: 'move',
placeholder: 'ui-state-highlight',
start: function(e, ui) {
ui.placeholder.width(ui.item.find('.panel').width());
ui.placeholder.height(ui.item.find('.panel').height());
ui.placeholder.addClass(ui.item.attr("class"));
}
<div id="fila" class="row center" style="text-align: center;">
<div class="pan col-md-6 col-sm-12">
<div class="row">
<div class="pan col-md-12 col-sm-12 order-sm-first box" id="panel1">
</div>
</div>
<div class="row">
<div class="pan col-md-12 col-sm-12 box" id="panel3">
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="pan col-md-12 col-sm-12 big-box" id="panel2">
</div>
</div>
</div>
EDIT
That's how I have my code now and I have two problems, in resposive it display different panel2 and panel3&panel1 because the lasts are in a row meanwhile the others aren't. The other problem is that drag and drop doesn´t work properlly.
Thanks a lot
Attached code-snippet shows a solution, using "CSS grid". You then control the margins in CSS by changing the margin values.
.wrapper {
display: grid;
grid-template-columns:
40%
1fr
;
grid-template-rows:
150px
150px
;
grid-template-areas:
"left-upper-box right-box"
"left-lower-box right-box"
;
}
.left-upper-box {
grid-area: left-upper-box;
background-color: grey;
margin: 15px 0px 15px 10px;
}
.left-lower-box {
grid-area: left-lower-box;
background-color: grey;
margin: 15px 0px 15px 10px;
}
.right-box {
grid-area: right-box;
background-color: grey;
margin: 15px 50px 15px 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="wrapper">
<div class="left-upper-box"></div>
<div class="left-lower-box"></div>
<div class="right-box"></div>
</div>
</body>
</html>
Since I see you're using Bootstrap.
All you need to do is to have one two columns in one row.
Then in one column (left in your case) add two rows.
<div id="fila" class="row center" style="text-align: center;">
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-12 order-sm-first" id="panel1">
hello
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12 col-sm-12" id="panel2">
Hello
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="col-md-12 col-sm-12" id="panel3">
helllo
<br/>
<br/>
hello
</div>
</div>
</div>
You can see the output here
You can insert the first 2 boxes in one div and the bigger one in another div. That way you can achieve the layout you wanted. Try this code.
<div id="fila" class="row center" style="text-align: center;">
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-md-12 order-sm-first" id="panel1">
panel 1
</div>
<div class="col-md-12" id="panel2">
panel 2
</div>
</div>
</div>
<div class="col-md-6 col-sm-12"> panel 3 </div>
</div>
You need to insert your 2 left boxes in one "col-md-6" and 1 right box on one "col-md-6" then you set the height to all boxes
#left_panel,#right_panel{
border:2px solid red;
margin:30px 0;
}
#left_panel{
height: 200px;
}
#right_panel{
height: 430px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div id="fila" class="row center" style="text-align: center;">
<div class="col-md-6 col-sm-6">
<div class="col-md-12 col-sm-12 order-sm-first " id="left_panel">panel</div>
<div class="col-md-12 col-sm-12 " id="left_panel">panel</div>
</div>
<div class="clearfix "></div>
<div class="col-md-6 col-sm-6">
<div class="col-md-12 col-sm-12" id="right_panel">panel</div>
</div>
</div>
</body>
</html>
<div id="fila" class="row center" style="text-align: center;">
<div class="col-md-6 col-sm-12">
<div class="col-md-12 col-sm-12 order-sm-first " id="panel1">
</div>
<div class="col-md-12 col-sm-12" id="panel2">
</div>
</div>
<div class="clearfix "></div>
<div class="col-md-6 col-sm-12">
<div class="col-md-12 col-sm-12" id="panel3">
</div>
</div>
</div>
I´m trying to acchive this image gallery using bootstrap grid layout:
but I can´t overflow the last image on the second row into the first row...
Here is my html code:
.gal-container {
display: block;
width: 100%;
padding: 16px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.box {
padding: 32px;
}
.row img {
max-width: 100%;
max-height: 100%;
}
<section>
<div class="gal-container">
<div class="box">
<div class="row">
<div class="col-sm-6 nopadding"><img src="img/image1.jpg"></div>
<div class="col-sm-3 nopadding"><img src="img/image2.jpg"></div>
<div class="col-sm-3 nopadding"><img src="img/image3.jpg"></div>
</div>
<div class="row">
<div class="col-sm-3 nopadding"><img src="img/image4.jpg"></div>
<div class="col-sm-3 nopadding"><img src="img/image5.jpg"></div>
<div class="col-sm-6 nopadding"><img src="img/image6.jpg"></div>
</div>
</div>
</div>
</section>
The result of this code is this:
I would appreciate the help to put the Stranger Things image at the bottom of the two small pictures :)
There's absolutely no custom css needed for this and the job can be done with less code using native Bootstrap 4 classes alone:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<section class="container">
<div class="row no-gutters">
<div class="col-sm-6">
<div class="row no-gutters">
<div class="col-12"><img src="img/image1.jpg"></div>
<div class="col-sm-6"><img src="img/image2.jpg"></div>
<div class="col-sm-6"><img src="img/image3.jpg"></div>
</div>
</div>
<div class="col-sm-6">
<div class="row no-gutters">
<div class="col-sm-6"><img src="img/image4.jpg"></div>
<div class="col-sm-6"><img src="img/image5.jpg"></div>
<div class="col"><img src="img/image6.jpg"></div>
</div>
</div>
</div>
</section>
Your markup is not matching as per your desired layout.It should be something like this :
<div class="box">
<div class="row">
<div class="col-sm-6 nopadding">
<div class="col-sm-12 nopadding">
<img src="img/image1.jpg">
</div>
<div class="row">
<div class="col-sm-6 nopadding">
<img src="img/image2.jpg">
</div>
<div class="col-sm-6 nopadding">
<img src="img/image3.jpg">
</div>
</div>
</div>
<div class="col-sm-6 nopadding">
<div class="col-sm-12 nopadding">
<img src="img/image4.jpg">
</div>
<div class="row">
<div class="col-sm-6 nopadding">
<img src="img/image5.jpg">
</div>
<div class="col-sm-6 nopadding">
<img src="img/image6.jpg">
</div>
</div>
</div>
</div>
</div>
Also add overflow:hidden in nopadding.
Hope it helps !
If you just swap around positioning and the wrappers, you should be able to get your desired effect
Also, you will have to take into account the paddings and widths you need as they will affect the positioning of the elements.
Demo works in full screen due to size
.gal-container {
display: block;
width: 600px;
padding: 16px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.box {
padding: 30px;
}
.row img {
max-width: 100%;
max-height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="gal-container">
<div class="row">
<div class="col-sm-6 nopadding">
<div class="col-sm-12 nopadding"> <img src="http://via.placeholder.com/300x150"> </div>
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
</div>
<div class="col-sm-6 nopadding">
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
<div class="col-sm-12 nopadding"> <img src="http://via.placeholder.com/300x150"></div>
</div>
</div>
</div>
I'm experimenting with bootstrap and this is the code which I wrote:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
<style type="text/css">
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
text-align:left;
margin-right:-4px;
}
.pos{
position: relative;
top: 240px;
}
</style>
</head>
<body>
<div class="container">
<div class="row row-centered pos">
<div class="col-lg-8 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-centered">
<div class="well"></div>
</div>
</div>
</div>
</body>
</html>
The output is as shown in screen shot:
But when I convert to mobile screen, I get like this:
I want the divs to appear in center with one above one in mobile screens as well. How can I do it?
But it isn't responsive.
you can use col-xs-12 in your div's , add this to each div and it will work like you expect it
LIVE DEMO
<body>
<div class="container">
<div class="row row-centered pos">
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
</div>
</div>
</body>
More about bootstrap grid option
You can define multiple widths for screen sizes :
col-lg : large screen
col-md : middle screen
col-xs : small screen
In your example :
<div class="container">
<div class="row row-centered pos">
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
</div>
</div>
What you have done with it, for me, is not bad.
you just need to modify the CSS, as follows:
.row-centered {
text-align:center;
margin:0 auto;
}
.col-centered {
display:block;
float:none;
}
.pos {
position: relative;
top: 240px;
}
When you would like to make it smaller, just reduce 8 to 7 or 6 and it's all done responsively. Using col-lg is true for large screen and it would not make it stuck using it for mobile performance.