In the footer of my website I have 6 blocks.
On small screens I want them stacked as 2x3
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="aboutme">
<div class="headline"><h2><i class="fa fa-angle-double-right"></i>About me</h2></div>
<div class="box">
<img class="portrait" src="assets/img/portrait.jpg" />
testje
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="headline"><h2><i class="fa fa-angle-double-right"></i>Recent blog posts</h2></div>
<div class="box">
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="headline"><h2><i class="fa fa-angle-double-right"></i>Recent projects</h2></div>
<div class="box"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="headline"><h2><i class="fa fa-angle-double-right"></i>Books</h2></div>
<div class="box"></div>
</div>
<div class="col-sm-6 col-md-4">
<div class="headline"><h2><i class="fa fa-angle-double-right"></i>Stay connected</h2></div>
<div class="box"></div>
</div>
<div class="col-sm-6 col-md-4">
<div class="headline"><h2><i class="fa fa-angle-double-right"></i>Drop a line</h2></div>
<div class="box"></div>
</div>
</div>
</div>
Do I need to start a new row or can I rely on the stacking process if column number exceeds 12?
At this moment it is stacked as follows:
[][]
[]
[][]
[]
So it needs a sort of float fix I think
You don't need to start a new row. If you remove the dividing row you should get 3 columns of 2, and then 2 columns of 3 on smaller screens. A single columns on smallest screens.
http://www.bootply.com/121418
Related
I'm trying to prevent my group of three icons from collapsing to a vertical state, currently they are align horizontally, the problem is when i adjust the screen to a smaller one, the icons will readjust as well when my screen reaches a certain size
<div class="">
<div class="list-item">
<section class="row">
<vehicleHeading [vehicleItem]="vehicleItem" class="col-md-10 col-sm-9 col-xs-8 nopadding"></vehicleHeading>
<div class="icon-group col-md-2 col-sm-3 col-xs-4">
<span class="pull-right">
<i [id]="mapId" (click)="showVehicleOnMap()" class="material-pin pointer nopaddingLeft"></i>
<span [id]="collapseId" (click)="showVehicleDetails()"><i class="material-list pointer"></i></span>
<collapsibleImage [id]="detailsId" (collapseEvent)="onToggleClick($event)"></collapsibleImage>
</span>
</div>
</section>
</div>
<div [collapse]="isCollapsed" class="panel-body topBorder">
<div class="row">
<div class="col-sm-6 col-md-7 col-lg-7">
<div class="form form-horizontal hidden">
<div class="form-group">
<div class="col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-sm-5 col-md-5 col-lg-5"></div>
<div class="col-sm-5 col-md-5 col-lg-5">
<div class="pull-right">
<i class="viewMore">Details</i>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-5 col-lg-5 nopadding">
<div class="pull-right thumbnail">
<vehicleMap id="vehicleMapId" #mapDetails [VehicleDetails]="vehicleItem"></vehicleMap>
</div>
</div>
</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.
This is the starting point:
http://www.bootply.com/r88hL82f3m
<div class="container">
<div class="row">
<div class="col-xs-0 col-md-3">
</div>
<div class="col-xs-12 col-md-9 text-right">
<div id="id1">Div1 Div2</div>
</div>
</div>
</div>
I need Div1 and Div2 to split into two rows only for small screen and extra-small screen, meaning Div1 occupies first row and Div2 occupies second row.
While below bootply may look like a solution, it does not work because I don't want Div1 and Div2 to split up into columns on medium screen upwards - I want them to stay in one column on medium, large and extra-large screen.
http://www.bootply.com/RkxKSdYZ2F
Use visible-* and hidden-* classes to use two different containers.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12 visible-xs visible-sm">
<div class="id1">Div1</div>
<div class="id2">Div2</div>
</div>
<div class="col-xs-12 hidden-xs hidden-sm">
<div class="id1">Div1 Div2</div>
</div>
</div>
</div>
This isn't very need, but it does the trick
<div class="container">
<div class="row">
<div class="col-xs-0 col-md-3">
</div>
<div class="col-xs-12 col-md-9 text-right">
<div id="id1" class="visible-md visible-lg col-md-12">Div1 Div2</div>
<div id="id1" class="visible-xs visible-sm col-xs-12">Div1</div>
<div id="id1" class="visible-xs visible-sm col-xs-12">Div2</div>
</div>
</div>
</div>
bootply
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