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.
Related
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>
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 am trying to make a fixed column ( header- containing a image) with full width using bootstrap. Below this column there is another row containing three column( another image in the middle div). When I run my code the things get messy and also other contents passes above the fixed column which should be pass below it. Someone please help me. I am new to bootstrap. Here is my code
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="header"><img class="img-responsive" src="images/profile.jpg"></div>
</div>
</div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6"><img class="img-responsive" src="images/helpUs.jpg"></div>
<div class="col-sm-3"></div>
</div>
</div>
Here is CSS
.container-fluid{
background-color:#B8DB4D;
}
#header{
position: fixed;
width:100%;
background-color:red;}
Bootstrap has a convention for what you're describing, which can be accomplished by using the .navbar-fixed-top class on the content which should be sticky/fixed to the top of the page.
The only requirement for this to work as expected is that your <body> element has its padding-top property set to the expected height of the .navbar-fixed-top nav element. (in this example, the image 150px tall, so we set the body's padding-top to that height). This way, no content will be hidden behind the nav on page load (only when the user scrolls).
.container-fluid {
background-color: #B8DB4D;
}
#header {
position: absolute;
background-color: red;
}
body {
padding-top: 150px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=header%20img&w=350&h=150">
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=other%20img&w=350&h=150">
</div>
<div class="col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=other%20img&w=350&h=150">
</div>
<div class="col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=other%20img&w=350&h=150">
</div>
<div class="col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=other%20img&w=350&h=150">
</div>
<div class="col-sm-3"></div>
</div>
</div>
I've written a basic code like this for experimental purposes:
<!doctype html>
<html lang='en'>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
<style type="text/css">
.pos {
position: relative;
}
.well1, .well2 {
position: relative;
height: 380px;
}
</style>
</head>
<body>
<div class="container pos">
<div class="col-sm-12">
<div class="well"></div>
</div>
<div class="col-sm-6">
<div class="well well1"></div>
</div>
<div class="col-sm-6">
<div class="well well2"></div>
</div>
<div class="col-sm-12">
<div class="well"></div>
</div>
</div>
</body>
</html>
This is the output:
But the same layout doesn't appear in mobile screens.
How can I fix it?
In Bootstrap,the col-xx-x classes are relative to specifics media queries. So here, you'll have to had the class col-xs-6 if you want your 50% column to stay 50% when you are below 767px. Your markup should look like this :
<body>
<div class="container pos">
<div class="col-sm-12">
<div class="well"></div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="well well1"></div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="well well2"></div>
</div>
<div class="col-sm-12">
<div class="well"></div>
</div>
</div>
</body>