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
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>
How can I make the image clickable so I can be redirected to other asp net page?
<div class="banner-section spad">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5">
<div class="single-banner">
<img src="img/banner-1.jpg">
<div class="inner-text">
<h4>Homem</h4>
</div>
</div>
</div>
</div>
</div>
just wrap image into anchor tag
<div class="banner-section spad">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5">
<div class="single-banner">
<img src="img/banner-1.jpg">
<div class="inner-text">
<h4>Homem</h4>
</div>
</div>
</div>
</div>
</div>
<div class="banner-section spad">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5">
<div class="single-banner">
<img src="img/banner-1.jpg">
<div class="inner-text">
<h4>Homem</h4>
</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 am working on a website, in which I need to create four columns of equal width. On top of columns, I need to place an image. Following is my code:
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<div class="row" style="margin-bottom:30px;">
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/one.jpg" />
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">First column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/two.jpg" />
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Second column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/three.jpg" />
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Third column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/four.jpg" />
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Fourth column title</div>
</div>
</div>
</div>
</div>
<div class="col-xs-1"></div>
</div>
How can I place an image properly above column, image width equal to column width, without creating multiple size images?
Please find the code that works. I just added "img-responsive" class that is bootstrap in build class to all the image tags.
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<div class="row" style="margin-bottom:30px;">
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/one.jpg" class="img-responsive"/>
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">First column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/two.jpg" class="img-responsive"/>
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Second column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/three.jpg" class="img-responsive"/>
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Third column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/four.jpg" class="img-responsive"/>
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Fourth column title</div>
</div>
</div>
</div>
</div>
<div class="col-xs-1"></div>
</div>
How do I create Bootstrap columns such as photo attached below? The red line is the same size?
Read about Nesting columns in the BS docs. Also read about Responsive column resets.
To answer your question more directly - here is what you need:
<div class="container">
<div class="row">
<div class="col-sm-4">
1.1
</div>
<div class="col-sm-4">
1.2
</div>
<div class="col-sm-4">
1.3
</div>
<div class="clearfix"></div>
<div class="col-sm-8">
2.1
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
2.2T
</div>
<div class="col-sm-12">
2.2B
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="col-sm-4">
3.1
</div>
<div class="col-sm-4">
3.2
</div>
<div class="col-sm-4">
3.3
</div>
<div class="clearfix"></div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
4.1T
</div>
<div class="col-sm-12">
4.1T
</div>
</div>
</div>
<div class="col-sm-8">
4.2
</div>
</div>
</div>