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.
Related
This might be a bit of a silly question - but I could not find an answer to what I'm trying to do..
I'm trying to make the entire container div responsive (like a column inside a row).
e.g. I want to have the effect that this would produce:
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-6 cold-sm-10">
...
</div>
</div>
</div>
but in one line... something like:
<div className="container-lg-6 container-sm-10">
...
</div>
Is there something in Bootstrap that could achieve this?
I tried the classes container-sm but they are not working like what I want.
That is not how the containers work. But you can easily achieve the layout by just nesting everything inside of a .col-12.col-sm-10.col-lg-6 inside a .row inside a .container-fluid
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="container-fluid p-0">
<div class="row justify-content-center">
<div class="col-12 col-sm-10 col-lg-6">
<div class="row">
<div class="col bg-primary">
<h1>1</h1>
</div>
<div class="col bg-secondary">
<h1>2</h1>
</div>
<div class="col bg-info">
<h1>3</h1>
</div>
</div>
<div class="row">
<div class="col bg-info">
<h1>4</h1>
</div>
<div class="col bg-primary">
<h1>5</h1>
</div>
</div>
</div>
</div>
</div>
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 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/
My normal layout is:
|A||C|
|B||C|
There are two columns - left and right.
'A' and 'B' are two rows of left column
'C' is right column.
When I resize, i want it to respond like:
|A|
|C|
|C|
|B|
Code:
<div class="container row">
<div class="col-sm-8">
<div class="row">
a
</div>
<div class="row">
b
</div>
</div>
<div class="col-sm-4">
c
</div>
</div>
I think I have found the solution based on Dan's
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="col-sm-12 col-xs-12" style="background-color: red">a</div>
<div class="col-sm-6 col-xs-12 visible-xs" style="background-color: blue">c</div>
<div class="col-sm-12 col-xs-12" style="background-color: orange">b</div>
</div>
<div class="col-sm-4 hidden-xs">
<div class="col-sm-12 col-xs-12" style="background-color: blue">c</div>
</div>
</div>
</div>
Based on my understanding of your needs this is how you accomplish your reordering using bootstrap the way it was intended:
<div class="container">
<div class="row">
<div class="col-sm-6 col-xs-12">a</div>
<div class="col-sm-6 col-xs-12">c</div>
<div class="col-sm-push-6 col-sm-6 col-xs-12">c</div>
<div class="col-sm-pull-6 col-sm-6 col-xs-12">b</div>
</div>
</div>
jsFiddle
Here's a link to the official bootstrap documentation on ordering.
Update based on comments:
Here's a solution using bootstrap exclusively:
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="col-sm-12 col-xs-12">a</div>
<div class="col-sm-12 col-xs-12">c</div>
<div class="col-sm-12 col-xs-12 visible-xs">c</div>
<div class="col-sm-6 col-xs-12 visible-xs">b</div>
</div>
<div class="col-sm-6 hidden-xs">
<div class="col-sm-12 col-xs-12">c</div>
<div class="col-sm-12 col-xs-12">b</div>
</div>
</div>
</div>
jsFiddle
.col-*-push-* and .col-*-pull-* are used to reorder columns for differnt screen sizes. So you would use .col-sm-pull-6 on column C2 and .col-sm-push-6 on column B. Simply adjust the amount of columns you need to push / pull to your layout.
Learn more at : getbootstrap.com/css/#grid
could also use float as a solution (if you don't feel like using push/pull)
HTML
<div class="row">
<div class="col-sm-6 col-xs-12 a">
AAA
</div>
<div class="col-sm-6 col-xs-12 c">
CCC
</div>
<div class="col-sm-6 col-xs-12 c">
CCC
</div>
<div class="col-sm-6 col-xs-12 b">
BBB
</div>
</div>
Css
.a,.b,.c{height:60px;}
.a{background:red;}
.b{background:yellow;}
.c{background:blue;float:right;}
#media screen and (max-width:767px){
.c{float:none;}
Here's a jsfiddle jsfiddle
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