The code works as I want it to. I just want to know if bootstrap allows me to do this without adding my own class center-align ? Or if there are any disadvantages to adding this class?
HTML:-
<div class="container">
<div class="row">
<div class="col-xs-4 center-align">
<div class="col-xs-3">1</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">4</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 center-align">
<div class="col-xs-3">1</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">4</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 center-align">
<div class="col-xs-3">1</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">4</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 center-align">
<div class="col-xs-3">1</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">4</div>
</div>
</div>
</div>
<!-- /container -->
CSS:-
.center-align {
margin: 0 auto;
max-width: 390px;
width: 100%;
float: none;
}
jsfiddle:- http://jsfiddle.net/dzscuam0/2/
Instead of setting a class on each element, i would probably wrap the block that needs to get centered and apply .center-block to that (as mentioned here https://github.com/twbs/bootstrap/issues/11771).
The .center-block helper class will provide the margin:auto part of the style. Then for the width i would probably go with something relative or specify the exact width as you've done.
html
<div class="container">
<!-- style has been applied inline to simplify the example -->
<div class="center-block" style="width:80%;text-align:center">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-3">1</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">4</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-3">1</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">4</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-3">1</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">4</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-3">1</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">4</div>
</div>
</div>
</div>
</div>
<!-- /container -->
example
http://jsfiddle.net/zLzuw62v/
Bootstrap has a class that will do half of exactly what you want, called
.center-block
The only problem with this class is that it doesn't contain
float: none;
Add that and it works just fine.
JSFiddle
Related
i simply want to join two columns in Bootstrap vertically. Here is the code:
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
Here is an illustration of what i mean:
You can do it this way
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
1
</div>
<div class="col-md-12">
2
</div>
</div>
</div>
<div class="col-md-6">
3
</div>
</div>
</div>
Maybe something like this?
<div class="row">
<div class="col-6">
<div class="row " >
1.
</div>
<div class="row ">
2.
</div>
</div>
<div class="col-6 ">
3.
</div>
</div>
I feel like this should be easy, but I'm trying to get my .temp and .city divs to be side-by-side, but they're stacking vertically instead.
I've tried changing the size of the columns, but they always stack on top of each other. Any ideas?
<div class="col-lg" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col-lg" id="col3">
<div class="temp"></div>
<div class="city"></div>
</div>
</div>
</div>
You can wrap temp div and city div into 2 different columns. Check this Bootstrap4 Example.
.wind,
.temp,
.city {
height: 50px;
border: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col-lg" id="col3">
<div class="temp"></div>
</div>
<div class="col-lg" id="col3">
<div class="city"></div>
</div>
</div>
You can rearrange your html code to this format.
<div class="row">
<div class="col-lg" id="col2">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="col-lg" id="col3">
<div class="temp"></div>
<div class="city"></div>
</div>
</div>
You should edit your code to this, making the second row have two columns.
<div class="col-lg" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col temp"></div>
<div class="col city"></div>
</div>
</div>
I have this bootstrap snippet:
<div class="col-xs-12">
<div class="row">
<div class="col-xs-3">
<div class="col-xs-12">Project Name</div>
</div>
<div class="col-xs-9">
<div class="col-xs-1">Jan</div>
<div class="col-xs-1">Feb</div>
<div class="col-xs-1">Mar</div>
<div class="col-xs-1">Apr</div>
<div class="col-xs-1">May</div>
<div class="col-xs-1">Jun</div>
<div class="col-xs-1">Jul</div>
<div class="col-xs-1">Aug</div>
<div class="col-xs-1">Sep</div>
<div class="col-xs-1">Okt</div>
<div class="col-xs-1">Nov</div>
<div class="col-xs-1">Dec</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="col-xs-12">Project #1</div>
</div>
<div class="col-xs-9">
<div class="col-xs-1">10</div>
<div class="col-xs-1">20</div>
<div class="col-xs-1">30</div>
<div class="col-xs-1">40</div>
<div class="col-xs-1">50</div>
<div class="col-xs-1">60</div>
<div class="col-xs-1">70</div>
<div class="col-xs-1">80</div>
<div class="col-xs-1">90</div>
<div class="col-xs-1">100</div>
<div class="col-xs-1">110</div>
<div class="col-xs-1">120</div>
</div>
</div>
</div>
it creates this table:
Everything looks good on the Desktop, but when I watch it on mobile or tablet it breaks:
Is it possible to create it without breaking? (version with tables does not fit)
Try setting a min-width on the container like this:
.container {
min-width: 630px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 container">
<div class="row">
<div class="col-xs-3">
<div class="col-xs-12">Project Name</div>
</div>
<div class="col-xs-9">
<div class="col-xs-1">Jan</div>
<div class="col-xs-1">Feb</div>
<div class="col-xs-1">Mar</div>
<div class="col-xs-1">Apr</div>
<div class="col-xs-1">May</div>
<div class="col-xs-1">Jun</div>
<div class="col-xs-1">Jul</div>
<div class="col-xs-1">Aug</div>
<div class="col-xs-1">Sep</div>
<div class="col-xs-1">Okt</div>
<div class="col-xs-1">Nov</div>
<div class="col-xs-1">Dec</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="col-xs-12">Project #1</div>
</div>
<div class="col-xs-9">
<div class="col-xs-1">10</div>
<div class="col-xs-1">20</div>
<div class="col-xs-1">30</div>
<div class="col-xs-1">40</div>
<div class="col-xs-1">50</div>
<div class="col-xs-1">60</div>
<div class="col-xs-1">70</div>
<div class="col-xs-1">80</div>
<div class="col-xs-1">90</div>
<div class="col-xs-1">100</div>
<div class="col-xs-1">110</div>
<div class="col-xs-1">120</div>
</div>
</div>
</div>
This approach can work for narrow viewports:
[class^="col-"] {
font-size: 2.5vw;
padding: 0;
}
You can wrap it into #media for x-small screens only.
You can set the elements wrapping the breaking divs to display: flex, which will by default display them in one row instead of breaking:
.flex {
display: flex;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 container">
<div class="row">
<div class="col-xs-3 flex">
<div class="col-xs-12">Project Name</div>
</div>
<div class="col-xs-9 flex">
<div class="col-xs-1">Jan</div>
<div class="col-xs-1">Feb</div>
<div class="col-xs-1">Mar</div>
<div class="col-xs-1">Apr</div>
<div class="col-xs-1">May</div>
<div class="col-xs-1">Jun</div>
<div class="col-xs-1">Jul</div>
<div class="col-xs-1">Aug</div>
<div class="col-xs-1">Sep</div>
<div class="col-xs-1">Okt</div>
<div class="col-xs-1">Nov</div>
<div class="col-xs-1">Dec</div>
</div>
</div>
<div class="row">
<div class="col-xs-3 flex">
<div class="col-xs-12">Project #1</div>
</div>
<div class="col-xs-9 flex">
<div class="col-xs-1">10</div>
<div class="col-xs-1">20</div>
<div class="col-xs-1">30</div>
<div class="col-xs-1">40</div>
<div class="col-xs-1">50</div>
<div class="col-xs-1">60</div>
<div class="col-xs-1">70</div>
<div class="col-xs-1">80</div>
<div class="col-xs-1">90</div>
<div class="col-xs-1">100</div>
<div class="col-xs-1">110</div>
<div class="col-xs-1">120</div>
</div>
</div>
</div>
I am trying to generate the following layout in bootstrap 3 css but the side bar is always small and it does not properly scale up and there is issues in mobile mode how do I proceed. thanks in advance.
Note:
this is what I tried
<div style="display:table;height:100%;width:100vw">
<div style="display:table-row-group;height:100%;width:100vw">
<div class="hidden-xs col-sm-half" style="background:black;height:100vh;"></div>
<div class="col-sm-10 col-md-10 col-lg-11half">
<div id="prdgrid">
<breadcrumbs path=prd.path ></breadcrumbs>
<div class="row" style="width: 100%;height:100%">
<div class="leftcol">
<div class="infotile" style="height: 25%;">
<infotile></infotile>
</div>
<div class="detail" style="height:31%">
<details></details>
</div>
<div>
<match></match>
</div>
</div>
<div class="rightcol" style="height:100%">
<div class="pricetile hidden-xs">
<pricechart></pricechart>
</div>
<div class="rightbottomcol" style="height:51%">
<div class="rev">
<div class="title">
<tile></tile>
</div>
</div>
<div class="rev" style="height: 100%;">
<pd></pd>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You have to use Bootstrap Grid and Panel for Same Layout instead of Creating own CSS layout. Refer Link : https://getbootstrap.com/examples/grid/ and http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
This is what your code should look like:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="col-md-12"></div>
<div class="col-md-12"></div>
</div>
<div class="col-md-8"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-2"></div>
<div class="col-md-6"></div>
</div>
</div>
I want to create this grid with twitter bootstrap 3.
<div class="container-fluid border">
<div class="row-fluid debug2">
<div class="span2 debug">aa</div>
<div class="span3 debug">bb</div>
<div class="span3 debug" style="float:left; height:300px;"></div>
</div>
<div class="row-fluid">
<div class="span3">xxx</div>
</div>
</div>
Grid Picture
You can find guidance on how to upgrade from Bootstrap v2.x to v3.x here.
row-fluid is now row
.span* is now .col-xs-*, .col-sm-*, .col-md-* or .col-lg-*. Configure depending on the screen size.
Basically it translates to this:
<div class="container border">
<div class="row debug2">
<div class="col-md-2 debug">aa</div>
<div class="col-md-3 debug">bb</div>
<div class="col-md-3 debug" style="float:left; height:300px;"></div>
</div>
<div class="row">
<div class="col-md-3">xxx</div>
</div>
</div>
Try this
.border {
border: 1px solid grey;
}
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12">
<div class="row ">
<div class="col-xs-4 border" style="height:150px;"></div>
<div class="col-xs-2" ></div>
<div class="col-xs-3 border" style="height:50px;"></div>
<div class="col-xs-3 border" style="height:50px;"></div>
<div class="col-xs-4"></div>
<div class="col-xs-8 border" style="height:250px;"></div>
</div>
</div>
</div>
</div>
</div>