I have a row with three columns in desktop view
now I want to display middle column under other two columns in a new row
as shown below :
my code for desktop view :
<div class="container">
<div class="row">
<div class="col-md-4">
A
</div>
<div class="col-md-4">
B
</div>
<div class="col-md-4">
C
</div>
</div>
How do I write code for col-sm- ?
What should I do?
You can use order-sm-last class from bootstrap
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
A
</div>
<div class="col-md-4 col-sm-12 order-sm-last">
B
</div>
<div class="col-md-4 col-sm-6">
C
</div>
</div>
Live Working Example
Related
I am trying to use two column divisions in same line.
Check my code:
<div class="col-md-12">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
Left Div
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
Right Div
</div>
</div>
</div>
this structure responsive for till 574px. but when i reduce browser size after 574px, divisions show in two rows. but my requirement show it in same line (left & Right)
please check above image. that the issue.
You can set same divided columns for every screen using col class
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col bg-success">
Left Div
</div>
<div class="col bg-warning">
Right Div
</div>
</div>
</div>
</div>
bg-success and bg-warning is just for color
<div class="col-12 ">
<div class="row">
<div class="col-6">
Left Div
</div>
<div class="col-6">
Right Div
</div>
</div>
I'm new in bootstrap and css, and I want to design this output:
For that purpose write this :
<div class="row">
<div class="col-md-12 col-md-1 col-md-4 col-md-8" style="background-color: yellow; width: 100%; height: 100%; position: fixed;">
<nav class="navbar navbar-default navbar-left">
<div class="container">
behzad
</div>
</nav>
<div class="col-md-1">
</div>
</div>
</div>
But that is not correct, how can I solve that?
You are not using bootstrap correctly. Put your col definitions within separate div's: Also make use of bootstrap's xs, and md definitions. Finally, put your row inside a container.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-9">
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
</div>
</div>
</div>
Working example: https://jsfiddle.net/mspinks/zf0q5cLk/3/
Bootstrap should follow pattern: container - row - col. Then use -xs (xsmall devices), -sm (small devices), -md (medium devices), -lg (large devices) to change grid design based on device.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<!-- Left panel, top panel on mobile device -->
</div>
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<!-- Content -->
<div class="row">
<div class="col-xs-1">
<!-- First empty col (Also can use offset) -->
</div>
<div class="col-xs-1">
</div>
<div class="col-xs-1">
</div>
.
.
.
<div class="col-xs-1">
<!-- Last empty col (Also can use offset) -->
</div>
</div>
</div>
</div>
</div>
If u want to use col-offset try this approach:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<!-- Left panel, top panel on mobile device -->
</div>
<div class="col-xs-8 col-lg-offset-2">
<!-- Content -->
<div class="row">
<div class="col-xs-1">
</div>
<div class="col-xs-1">
</div>
.
.
.
</div>
</div>
</div>
</div>
Offset moves columns to the right using .col-xs(sm, md, lg)-offset-*. These classes increase the left margin of a column by * columns. In this example, .col-xs-offset-2 moves columns over two columns.
I'm using Bootstrap 3 and trying to solve this what's mocked on the image. I used one row with two cols, and they are next to each other like in the image, but when I resize to mobile I want the right side to fall beneath the left. Any help is appreciated, thank you.
Code sample:
<div className="container">
<div className="row">
<div className="col-xs-4 col-offset-xs-1">
<h1>1</h1>
</div>
<div className="col-xs-4">
<div className="row">
<h1>2</h1>
</div>
</div>
.black{background-color:#000; height:320px;}
.red{background-color:#F00; height:100px;margin-bottom:10px;}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12 black">
black
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12 red">
one
</div>
</div>
<div class="row">
<div class="col-xs-12 red">
two
</div>
</div>
<div class="row">
<div class="col-xs-12 red">
three
</div>
</div>
</div>
</div>
</div>
Bootstrap allows nesting your elements easily, here you go: https://jsfiddle.net/denea/DTcHh/25594/
<div className="container">
<div class="row">
<div class="col-sm-6 col-xs-12" id="first">
<h1>1</h1>
</div>
<div class="col-sm-6 col-xs-12" id="second">
<div class="row">
<h1>2</h1>
</div>
<div class="row">
<h1>3</h1>
</div>
<div class="row">
<h1>4</h1>
</div>
</div>
</div>
and read this: http://getbootstrap.com/css/#grid-nesting
Bootstrap allows for nesting which will provide what you need:
<div class="row">
<div class="col-sm-6">
Left column
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
Right column, row 1
</div>
</div>
<div class="row">
<div class="col-sm-12">
Right column, row 2
</div>
</div>
<div class="row">
<div class="col-sm-12">
Right column, row 3
</div>
</div>
</div>
</div>
More info here.
You can achieve this by using flexbox and media query
#media (max-width: 360px) {
.container > .row {
display:flex;
flex-flow: row-reverse wrap;
}
}
Demo: https://jsfiddle.net/xs3joev8/1/
This basic bootstrap CSS shows me 4 columns on 1 row:
<div class="row">
<div class="col-md-3">
Text
</div>
<div class="col-md-3">
Text
</div>
<div class="col-md-3">
Text
</div>
<div class="col-md-3">
Text
</div>
</div>
For the mobile view I would like to display 2 columns on 2 rows. The only way that I know how to do this is to create the same content twice ... something like this:
<div class="desktop">
<div class="row">
<div class="col-md-3">
Text
</div>
<div class="col-md-3">
Text
</div>
<div class="col-md-3">
Text
</div>
<div class="col-md-3">
Text
</div>
</div>
</div>
<div class="mobile">
<div class="row">
<div class="col-xs-6">
Text
</div>
<div class="col-xs-6">
Text
</div>
</div>
<div class="row">
<div class="col-xs-6">
Text
</div>
<div class="col-xs-6">
Text
</div>
</div>
</div>
So you can set display:none for the classes desktop and mobile using #media ...
That would work but it is not the cleanest solution. Would there be another way to do this?
You don't have to write separate code for smaller devices and larger devices. Following code snippet will serve your purpose.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-3 col-xs-6">
1
</div>
<div class="col-md-3 col-xs-6">
2
</div>
<div class="col-md-3 col-xs-6">
3
</div>
<div class="col-md-3 col-xs-6">
4
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-3 col-xs-6">
1
</div>
<div class="col-md-3 col-xs-6">
2
</div>
<div class="col-md-3 col-xs-6">
3
</div>
<div class="col-md-3 col-xs-6">
4
</div>
</div>
I want to create a (more or less Pinterest like) grid layout like in the below below. The two columns have different rows, but do appear side to side. How can I do this using the twitter bootstrap grid framework?
If I'm not mistaken the normal row/col behaviour would give me the layout below.
You should be able to achieve the layout by using two columns which themselves have rows:
<div class="row">
<div class="col-xs-6">
<div class="col-xs-12">1</div>
<div class="col-xs-12">2</div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">3</div>
<div class="col-xs-6">4</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="col-xs-12">5</div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">6</div>
<div class="col-xs-6">7</div>
</div>
</div>
<div class="col-xs-12">8</div>
</div>
</div>
http://jsfiddle.net/zz4ug/
Create the illusion of incongruous rows via background color or image:
<div class="container">
<div class="row">
<div class="col-xs-6 red"> </div>
<div class="col-xs-6 orange"> </div>
</div>
<div class="row">
<div class="col-xs-6 red"> </div> <--This will appear to be on row 1
<div class="col-xs-3 blue"> </div>
<div class="col-xs-3 green"> </div>
</div>
</div>
Check out this jsFiddle