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>
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 have the following code, which is basically a set of bootstrap callout tags.
I am trying to align several rows of 12 columns. If I use row I get an unwanted scroll bar inside the callout tag.
This is the code, which can be also checked in this fiddle
<body style="width:100%;">
<div class="col-xs-12">
<div class="bs-callout bs-callout-success" style="overflow:auto;">
<div class="col-xs-2">
<img src="http://via.placeholder.com/100x20" style="max-height: 48px; max-width: 60px;"/>
</div>
<div class="col-xs-9">
<h4>FOO</h4>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small><em>Col 1</em></small></span><br/>
<span>10000</span>
</div>
<div class="col-xs-3">
<span><small>Col 2</small></span><br/>
<span>20000</span>
</div>
<div class="col-xs-3">
<span><small>Col 3</small></span><br/>
<span>30000</span>
</div>
<div class="col-xs-1"></div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small>Estado/</small></span><br/>
<span>Estado</span>
</div>
<div class="col-xs-6">
<span>FOO →</span>
<span>BAR</span>
</div>
<div class="col-xs-1"></div>
</div>
</div>
<div class="col-xs-12">
<div class="bs-callout bs-callout-success" style="overflow:auto;">
<div class="col-xs-2">
<img src="http://via.placeholder.com/100x60" style="max-height: 48px; max-width: 60px;"/>
</div>
<div class="col-xs-9">
<h4>FOO</h4>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small><em>Col 1</em></small></span><br/>
<span>10000</span>
</div>
<div class="col-xs-3">
<span><small>Col 2</small></span><br/>
<span>20000</span>
</div>
<div class="col-xs-3">
<span><small>Col 3</small></span><br/>
<span>30000</span>
</div>
<div class="col-xs-1"></div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small>Estado/</small></span><br/>
<span>Estado</span>
</div>
<div class="col-xs-6">
<span>FOO →</span>
<span>BAR</span>
</div>
<div class="col-xs-1"></div>
</div>
</div>
</body>
As shown, the first callout has an image which has not enough height to misalign the col-xstags, but the second one has enough height so it misaligns the other <div class="col-xs">.
What should be done to fix this?
As per I understand you just need to add one div to img tag and give css to that div:
<body style="width:100%;">
<div class="row">
<div class="col-xs-12">
<div class="bs-callout bs-callout-success" style="overflow:auto;">
<div class="col-xs-2">
<div class="demo-img">
<img src="http://via.placeholder.com/100x60" />
</div>
</div>
<div class="col-xs-9">
<h4>FOO</h4>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small><em>Col 1</em></small></span><br/>
<span>10000</span>
</div>
<div class="col-xs-3">
<span><small>Col 2</small></span><br/>
<span>20000</span>
</div>
<div class="col-xs-3">
<span><small>Col 3</small></span><br/>
<span>30000</span>
</div>
<div class="col-xs-1"></div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small>Estado/</small></span><br/>
<span>Estado</span>
</div>
<div class="col-xs-6">
<span>FOO →</span>
<span>BAR</span>
</div>
<div class="col-xs-1"></div>
</div>
</div>
<div class="col-xs-12">
<div class="bs-callout bs-callout-success" style="overflow:auto;">
<div class="col-xs-2">
<div class="demo-img">
<img src="http://via.placeholder.com/100x60" />
</div>
</div>
<div class="col-xs-9">
<h4>FOO</h4>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small><em>Col 1</em></small></span><br/>
<span>10000</span>
</div>
<div class="col-xs-3">
<span><small>Col 2</small></span><br/>
<span>20000</span>
</div>
<div class="col-xs-3">
<span><small>Col 3</small></span><br/>
<span>30000</span>
</div>
<div class="col-xs-1"></div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small>Estado/</small></span><br/>
<span>Estado</span>
</div>
<div class="col-xs-6">
<span>FOO →</span>
<span>BAR</span>
</div>
<div class="col-xs-1"></div>
</div>
</div>
</div>
</body>
And add below css to your .css file :
.demo-img {
height: 48px;
width: 60px;
overflow: hidden;
}
.demo-img img {
height: 100%;
width: 100%;
}
Use min-height of 48px.
img{
min-height:48px;
}
You can check in jsfiddle
Use bootstrap class="img-responsive" in your code.
Check code here in jsfiddle
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 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>
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