Create 'bottom tab' in div with CSS? - html

I'm trying to create a series of Bootstrap coloumns to mimic a website design I've been given.
These columns have a blue border with the bottom of the div with a much thicker border.
A border is of little use as it alters the dimensions and available space so I tried to simply create a div within it to use background-color with width:100% but that doesn't seem to work either.
Can anyone show me the best way to go about this?
Thanks.
.featuredCatalog {
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 5px solid #00AEF0;
}
.shopTab {
background-color: #00AEF0;
width: 100%;
min-height: 100%;
margin: 0;
}
<div class="row">
<div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
<img class="img-responsive" src="https://placehold.it/191x131">
<div class="shopTab">
<h4>Shop Now</h4>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
<img class="img-responsive" src="https://placehold.it/191x131">
<h4>Shop Now</h4>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
<img class="img-responsive" src="https://placehold.it/191x131">
<h4>Shop Now</h4>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
<img class="img-responsive" src="https://placehold.it/191x131">
<h4>Shop Now</h4>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
<img class="img-responsive" src="https://placehold.it/191x131">
<h4>Shop Now</h4>
</div>
</div>


Here is code snippet solves your issue and create product display like the image.
.shopTab {
position:absolute;
bottom:0;
background-color: #00AEF0;
width: 100%;
height: 26%;
}
.product-display {
position: relative;
border-radius: 10px;
border: 5px solid #00AEF0;
margin: 10px auto;
height: 160px;
max-width: 160px;
}
.product-display img{
display: block;
width: 100%;
height: 74%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
<div class="product-display">
<img class="img-responsive" src="https://placehold.it/191x131">
<div class="shopTab">
<h4>Shop Now</h4>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
<div class="product-display">
<img class="img-responsive" src="https://placehold.it/191x131">
<div class="shopTab">
<h4>Shop Now</h4>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
<div class="product-display">
<img class="img-responsive" src="https://placehold.it/191x131">
<div class="shopTab">
<h4>Shop Now</h4>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
<div class="product-display">
<img class="img-responsive" src="https://placehold.it/191x131">
<div class="shopTab">
<h4>Shop Now</h4>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
<div class="product-display">
<img class="img-responsive" src="https://placehold.it/191x131">
<div class="shopTab">
<h4>Shop Now</h4>
</div>
</div>
</div>
</div>

Related

Customer Section's images stacked vertically on mobile screens bootstrap 5

I am trying to design my company's website. But all images in the customer section are stacked vertically on mobile devices. I am using Bootstrap 5.2. I have tried col-xs and col-md classes but was not able to achieve the output. I am attaching the code and image. Thanks For the Help.
/*
===========================================
Customer Section
===========================================
*/
.dot {
height: 20px;
width: 20px;
background-color: #3736b0;
border-radius: 50%;
display: block;
position: absolute;
top: 105rem;
left: 50%;
}
.section-4-title {
display: block;
position: absolute;
top: 108rem;
}
.section-4 {
margin-top: 3rem;
}
.card {
overflow: hidden;
height: 4rem;
width: 7rem;
border: none;
margin-top: 3rem;
margin-bottom: 1rem;
box-shadow: 1px 1px 12px 0 rgba(0, 0, 0, 0.2);
}
.card img {
height: 100%;
width: 100%;
}
.card-3 {
overflow: hidden;
height: 4rem;
width: 8rem;
border: none;
box-shadow: 1px 1px 12px 0 rgba(0, 0, 0, 0.2);
}
<!--
===========================================
Customer Logo Section
===========================================
-->
<div class="container">
<section class="section-4">
<div class="container text-center">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="dot"></div>
</div>
</div>
<div class="row">
<h2 class="section-4-title">
Simplifying communications for Industry
<div class="title-highlighter">Leaders in India and World</div>
</h2>
</div>
<div class="container">
<!-- Customer Row 1 -->
<div class="row bg-primary">
<div class="bg-dark col-lg-2 col-sm-4 col-xs-6">
<div class="card">
<img src="svgs/logo-1.svg" class="img-fluid" alt="Logo 1" />
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6">
<div class="card">
<img src="svgs/logo-2.svg" class="img-fluid" alt="Logo 2" />
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6">
<div class="card card-3">
<img src="svgs/logo-3.svg" alt="Logo 3" />
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6">
<div class="card">
<img src="svgs/logo-4.svg" alt="Logo 4" />
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6">
<div class="card">
<img src="svgs/logo-5.svg" alt="Logo 5" />
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6">
<div class="card">
<img src="svgs/logo-6.svg" alt="Logo 6" />
</div>
</div>
</div>
<!-- Customer Row 2 -->
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="card">
<img
src="svgs/logo-7.svg"
class="card-img-top"
alt="Logo 7"
/>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="card">
<img
src="svgs/logo-8.svg"
class="card-img-top"
alt="Logo 8"
/>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="card card-3">
<img
src="svgs/logo-9.svg"
class="card-img-top"
alt="Logo 9"
/>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="card card-10 py-2">
<img
src="svgs/logo-10.svg"
class="card-img-top"
alt="Logo 10"
/>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="card card-3">
<img
src="svgs/logo-11.svg"
class="card-img-top"
alt="Logo 11"
/>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="card">
<img
src="svgs/logo-12.svg"
class="card-img-top"
alt="Logo 12"
/>
</div>
</div>
</div>
</div>
</div>
</section>
</div>

horizontal Bootstrap Thumbnails

i have problem in Bootstrap Thumbnails.
my thumbnails is like that:
img01. but want to be horizontal.
What am i doing ?
My Code:
HTML:
<div class="hrs" align="center">
<div class="row">
<div class="col-xs-6 col-lg-6 col-md-6 col-sm-6">
<div class="thumbnail">
<img src="img/AxMahsool.jpg" alt="AxMahsool01" class="img-responsive" />
<img src="img/AxMahsool.jpg" alt="AxMahsool02" class=" img-responsive" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-lg-6 col-md-6 col-sm-6">
<div class="thumbnail">
<img src="img/AxMahsool.jpg" alt="AxMahsool03" class=" img-responsive" />
<img src="img/AxMahsool.jpg" alt="AxMahsool04" class=" img-responsive" />
</div>
</div>
</div>
</div>
Css:
.hrs{
display: table;
margin: 0 auto;
padding: 20px;
color: white;

It's because you have them in separate <div class="row"> containers. What you should do is put all of your images in the same row container(so take out the second <div class="row">) -and/or- try adding this code to your CSS:
.thumbnail>img { display: inline-block; }

How can I align an image to the center in a Bootstrap column?

Stupid question: I have three images in a row, but they are aligned to the left in their column. How can I align them to the center of the column?
This is my code:
<div class="container partners">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="ogon.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="congaz.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
</div>
And CSS:
.partners {
display:block;
margin: 0 auto;
vertical-align:middle;
}

Add the text-center class to your column divs
<div class="col-md-4 col-sm-4 col-xs-4 text-center">

First of all you can not write 2 class tag on same element
<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">
instead of this you can write class="img-circle img-responsive"
for center aligning u can use "text-center" class to parent div..
or you can also apply style="float:none; margin:0 auto;" to img.
thanks, hope this will help you.

The idea is to make image block element and margin of auto. but as the margin:auto won't work except you assign some width of the elemet.
.partners img{
display: block;
margin: auto;
text-align: center;
width: 150px;
}
.partners {
display:block;
margin: 0 auto;
vertical-align:middle;
}
.partners img{
display: block;
margin: auto;
text-align: center;
width: 150px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container partners">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="ogon.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="congaz.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
</div>

<div class="text-center">
<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
it would work defiantly.

How can i make this grid layout always stay the same size bootstrap 3?

I'm trying to make a grid layout with images inside, The images aren't always the same size, Some of them seem to make the layout of the grid slightly smaller and i can't figure out a way to get them all the same size.
Here's the HTML.
<div class="col-xs-12">
<div class="row">
<h2>Handheld Consoles</h2>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<div class="tile purple text-center">
<h3 class="title">Nintendo 3DS</h3>
<div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/3ds.png" /></div>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<div class="tile red text-center">
<h3 class="title">Nintendo GBA</h3>
<div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/gba.png" /></div>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<div class="tile orange text-center">
<h3 class="title">Nintendo 64</h3>
<div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/n64.png" /></div>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<div class="tile green text-center">
<h3 class="title">Sony PSP</h3>
<div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/psp.png" /></div>
</div>
</a>
</div>
</div>
</div>
And the CSS.
.tile {
width:100%;
display: inline-block;
box-sizing: border-box;
background: #fff;
padding: 15px;
margin-bottom: 20px;
color:#fff;
}
.title {
margin-top: 0px;
text-align:center;
}
.purple {
background: #5133AB;
}
.purple:hover {
background: #3e2784;
}

i believe if you just set the height of class .tile, it should work
.tile {
width:100%;
display: inline-block;
box-sizing: border-box;
background: #fff;
padding: 15px;
margin-bottom: 20px;
color:#fff;
height: 200px; // or whatever height you want all the tiles to be
}

Bootstrap responsive image height

I need the images be in the same height and at the same time responsive, but I don't understand how to do this.
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="container">
<div class="row" style="text-align: center">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img style="width : 100%" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-frc3/t1/1743484_1417876895127107_960615052_n.jpg" alt="" />
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img style="width : 100%" src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/t1/1016354_762185537132820_936517474_n.jpg" alt="" />
</div>
</div>
</div>
</div>
http://jsfiddle.net/G26mN/

try this one:
img {
width: inherit; /* Make images fill their parent's space. Solves IE8. */
max-width: 100%; /* Add !important if needed. */
height: auto; /* Add !important if needed. */
}

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="container">
<div class="row" style="text-align: center">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img class="img-responsive" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-frc3/t1/1743484_1417876895127107_960615052_n.jpg" alt="" />
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img class="img-responsive" src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/t1/1016354_762185537132820_936517474_n.jpg" alt="" />
</div>
</div>
</div>
</div>