I'm using Bootstrap 4 and am trying to use a card based layout to display my stores.
I have a location marker that's supposed to come over the store and on the same line, floating to the right, I want a 5 star rating. (Icons from font-awesome)
However, whenever I use float:right on the ratings they vanish. (I assume underneath the image)
Anyone have a clue as to how to fix this?
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/a/a2/Mon_Ami_Boulangerie_(8119944759).jpg" alt="Card image cap">
<div class="card-block">
<div class="stores-card-img-overlay-text">
<p>
<i class="fa fa-map-marker" aria-hidden="true"></i> Hasselt
<span class="rating">
<i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i>
<i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i>
<i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
</p>
</div>
<div class="test-shizzle">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</div>
<h4 class="card-title">De bakkerij testshop</h4>
<p class="card-text">Vlees / vis / Gevogelte / Charcuterie / Salades / Soep / Kaas</p>
<p class="card-search-text">14 appels in gamma!</p>
</div>
</div>
And the css to raise the .stores-card-img-overlay-text over the image and float the .rating span:
.stores-list .stores-card-img-overlay-text {
color: #fff;
margin-top: -50px;
}
.stores-list .stores-card-img-overlay-text .rating {
float: right;
}
Thanks in advance!
Update 2018 for Bootstrap 4.0
You can use the Bootstrap float-right class to pull the span right..
<div class="card">
<img class="card-img-top img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/a/a2/Mon_Ami_Boulangerie_(8119944759).jpg" alt="Card image cap">
<div class="card-block">
<div class="stores-card-img-overlay-text">
<p>
<i class="fa fa-map-marker" aria-hidden="true"></i> Hasselt
<span class="rating float-right">
<i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i>
<i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i>
<i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
</p>
</div>
<div class="test-shizzle">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</div>
<h4 class="card-title">De bakkerij testshop</h4>
<p class="card-text">Vlees / vis / Gevogelte / Charcuterie / Salades / Soep / Kaas</p>
<p class="card-search-text">14 appels in gamma!</p>
</div>
</div>
http://codeply.com/go/60n8Prld36
Idiot that I am I did not realise I could just the the .card-img-overlay class provided by Bootstrap. >_>
Related
I know this question might be asked so many times, but i couldn't find the one.
I want to put two h3 tag and 1 div containing 5 rating stars in one line, i don't know how to achieve that.
which css style can be added to achieve this?
Here is the code:
<h3>Shop Name</h3>
<div>
<i class="fa fa-star active"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<h3>64 Sales</h3>
Use a FlexBox
.row {
display: flex;
align-items: center;
}
h3 {
margin-left: 15px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<h2>Shop Name</h2>
<div class='row'>
<div>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</div>
<h3>64 Sales</h3>
</div>
how do you think I could put a vertical bar and look like lightning?
For example
<div class="row d-flex justify-content-center">
<div class="col-md-3">
<div class="info">
<div class="icon icon-lg icon-shape icon-shape-primary shadow rounded-circle">
<i class="ni ni-settings-gear-65"></i>
</div>
<i class="fa fa-trophy d-flex justify-content-center" id="sizeIcon" style="color:#CD7F32;" aria-hidden="true"></i>
<h6 class="info-title text-uppercase d-flex justify-content-center"><strong>Bronze</strong></h6>
<br>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> A</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> </p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> </p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i></p>
<h6 href="javascript:;" id="footerText">**
<i class="ni ni-bold-right text-primary"></i>
</h6>
</div>
</div>
<hr id="verticalHr">
I have 3 cards like that and between them that hr, how could I make them like lightning?
What you can do is create a pseudo element on the div that immediately follows an hr element and use CSS to make that as high as the div (assuming that is what is wanted) and with whatever background/image/gradients and whatever width you want. I think this will be easier than trying to style and position the hr itself to be vertical and in the right place.
.row {
margin: 2vmin; /* just for this demo */
}
hr {
display: none;
}
hr + div {
position: relative;
}
hr + div:before {
height: 100%;
width: 2vmin;
background-color: black;
background-image: url(https://ahweb.org.uk/lightning.png);
background-size: 100% 100%;
background-repeat: no-repeat;
content: '';
position: absolute;
top: 0;
left: -2vmin;
}
<div class="row d-flex justify-content-center">
<div class="col-md-3">
<div class="info">
<div class="icon icon-lg icon-shape icon-shape-primary shadow rounded-circle">
<i class="ni ni-settings-gear-65"></i>
</div>
<i class="fa fa-trophy d-flex justify-content-center" id="sizeIcon" style="color:#CD7F32;" aria-hidden="true"></i>
<h6 class="info-title text-uppercase d-flex justify-content-center"><strong>Bronze</strong></h6>
<br>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> A</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> </p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> </p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i></p>
<h6 href="javascript:;" id="footerText">**
<i class="ni ni-bold-right text-primary"></i>
</h6>
</div>
</div>
<hr id="verticalHr">
<div class="col-md-3">
<div class="info">
<div class="icon icon-lg icon-shape icon-shape-primary shadow rounded-circle">
<i class="ni ni-settings-gear-65"></i>
</div>
<i class="fa fa-trophy d-flex justify-content-center" id="sizeIcon" style="color:#CD7F32;" aria-hidden="true"></i>
<h6 class="info-title text-uppercase d-flex justify-content-center"><strong>Bronze</strong></h6>
<br>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> A</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> </p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> </p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i></p>
<h6 href="javascript:;" id="footerText">**
<i class="ni ni-bold-right text-primary"></i>
</h6>
</div>
</div>
</div>
I'm guessing at dimensions here so obviously change them to suit and the image of lightning was just a random one from the web. You can put in your own image or use css to draw lines to create a bolt if you prefer.
You could put an SVG image of a lightning bolt between each of your cards. Since you’re using 3 columns for each of your cards, you have 3 columns left over (from the 12 columns Bootstrap provides). You could use two of those columns for lightning bolts.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
.bolt {
padding-top: 5rem;
height: 16rem;
text-align: center;
}
.bolt svg {
height: 100%;
}
</style>
<div class="container mt-5">
<div class="row d-flex justify-content-center">
<div class="col-md-3">
<div class="info">
<div class="icon icon-lg icon-shape icon-shape-primary shadow rounded-circle">
<i class="ni ni-settings-gear-65"></i>
</div>
<p class="text-center mb-0"><i class="fa fa-trophy" id="sizeIcon" style="color:#FFD700;" aria-hidden="true"></i></p>
<h6 class="info-title text-uppercase font-weight-bold text-center">Gold</h6>
<br>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> U. Bolt (JAM)</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> U. Bolt (JAM)</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> U. Bolt (JAM)</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> J. Gatlin (USA)</p>
<h6 href="javascript:;" id="footerText">**
<i class="ni ni-bold-right text-primary"></i>
</h6>
</div>
</div>
<div class="col-1 bolt d-none d-md-block">
<svg version="1.1" viewBox="0 0 2 19">
<path d="M 2 0 L 1 9 L 2 9 L 0 19 L 1 10 L 0 10 Z" fill="#ff0000" />
</svg>
</div>
<div class="col-md-3">
<div class="info">
<div class="icon icon-lg icon-shape icon-shape-primary shadow rounded-circle">
<i class="ni ni-settings-gear-65"></i>
</div>
<p class="text-center mb-0"><i class="fa fa-trophy" id="sizeIcon" style="color:#C0C0C0;" aria-hidden="true"></i></p>
<h6 class="info-title text-uppercase font-weight-bold text-center">Silver</h6>
<br>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> J. Gatlin (USA)</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> Y. Blake (JAM)</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> R. Thompson (TRI)</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> F. Obikwelu (POR)</p>
<h6 href="javascript:;" id="footerText">**
<i class="ni ni-bold-right text-primary"></i>
</h6>
</div>
</div>
<div class="col-1 bolt d-none d-md-block">
<svg version="1.1" viewBox="0 0 2 19">
<path d="M 2 0 L 1 9 L 2 9 L 0 19 L 1 10 L 0 10 Z" fill="#ff0000" />
</svg>
</div>
<div class="col-md-3">
<div class="info">
<div class="icon icon-lg icon-shape icon-shape-primary shadow rounded-circle">
<i class="ni ni-settings-gear-65"></i>
</div>
<p class="text-center mb-0"><i class="fa fa-trophy" id="sizeIcon" style="color:#CD7F32;" aria-hidden="true"></i></p>
<h6 class="info-title text-uppercase font-weight-bold text-center">Bronze</h6>
<br>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"> De Grasse (CAN)</i></p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> J. Gatlin (USA)</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> W. Dix (USA)</p>
<p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> M. Greene (USA)</p>
<h6 href="javascript:;" id="footerText">**
<i class="ni ni-bold-right text-primary"></i>
</h6>
</div>
</div>
</div>
</div>
This question already has an answer here:
Wrapping bootstrap columns in extra div
(1 answer)
Closed 3 years ago.
I am building a small dashboard, with bootstrap 4. The structure is two columns (5 - 7), inside of which we have different rows and columns.
I have two rows that won't fit the columns inside of them even though the sum is 12.
I tried to wrap all columns inside a row div but it didn't change anything. I tried removing every padding through the developper console and I still get the same issue.
<div class="col-12 leg_planches">
<div class="col-2">
<h5 data-toggle="tooltip" data-placement="top" title="Référence" > <i class="fa fa-tint" aria-hidden="true"></i> <span>A1</span></h5>
<h5 title="Zone géographique"> <i class="fa fa-bolt" aria-hidden="true" ></i> <span></span></h5>
</div>
<div class="col-2">
<h5 data-toggle="tooltip" data-placement="top" title="Irrigation" > <i class="fa fa-tint" aria-hidden="true"></i> <span></span></h5>
<h5 title="Amendements"> <i class="fa fa-bolt" aria-hidden="true" ></i> <span></span></h5>
</div>
<div class="col-2">
<h5 title="Entretient"> <i class="fa fa-broom" aria-hidden="true" ></i> <span></span></h5>
<h5 title="Amendements"> <i class="fa fa-gem" aria-hidden="true" ></i> <span></span></h5>
</div>
<div class="col-2">
<h5 title="Estimation poids sur planche"> <i class="fa fa-hand-holding-usd" aria-hidden="true" ></i> <span></span></h5>
<h5 title="Exporté"> <i class="fa fa-fighter-jet" aria-hidden="true" ></i> <span></span></h5>
</div>
<div class="col-2">
<h5 title="Dépenses"> <i class="fa fa-credit-card" aria-hidden="true" ></i> <span></span></h5>
<h5 title="Temps de travail"> <i class="fa fa-clock" aria-hidden="true" ></i> <span></span></h5>
</div>
<div class="col-2">
<h5 title="Semé le"> <i class="fa fa-baby" aria-hidden="true" ></i> <span></span></h5>
<h5 title="Planté le"> <i class="fa fa-baby-carriage" aria-hidden="true" ></i> <span></span></h5>
</div>
</div>
I'd like for all the columns to fit on a single row as they are supposed to.
Instead of col-12, try with row. Like this
<div class="row leg_planches">
Just replace col-12 with row will resolve your issue. Thanks
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row leg_planches">
<div class="col-2">
<h5 data-toggle="tooltip" data-placement="top" title="Référence" > <i class="fa fa-tint" aria-hidden="true"></i> <span>A1</span></h5>
<h5 title="Zone géographique"> <i class="fa fa-bolt" aria-hidden="true" ></i> <span>B1</span></h5>
</div>
<div class="col-2">
<h5 data-toggle="tooltip" data-placement="top" title="Irrigation" > <i class="fa fa-tint" aria-hidden="true"></i> <span>A2</span></h5>
<h5 title="Amendements"> <i class="fa fa-bolt" aria-hidden="true" ></i> <span>B2</span></h5>
</div>
<div class="col-2">
<h5 title="Entretient"> <i class="fa fa-broom" aria-hidden="true" ></i> <span>A3</span></h5>
<h5 title="Amendements"> <i class="fa fa-gem" aria-hidden="true" ></i> <span>B3</span></h5>
</div>
<div class="col-2">
<h5 title="Estimation poids sur planche"> <i class="fa fa-hand-holding-usd" aria-hidden="true" ></i> <span>A4</span></h5>
<h5 title="Exporté"> <i class="fa fa-fighter-jet" aria-hidden="true" ></i> <span>B4</span></h5>
</div>
<div class="col-2">
<h5 title="Dépenses"> <i class="fa fa-credit-card" aria-hidden="true" ></i> <span>A5</span></h5>
<h5 title="Temps de travail"> <i class="fa fa-clock" aria-hidden="true" ></i> <span>B5</span></h5>
</div>
<div class="col-2">
<h5 title="Semé le"> <i class="fa fa-baby" aria-hidden="true" ></i> <span>A6</span></h5>
<h5 title="Planté le"> <i class="fa fa-baby-carriage" aria-hidden="true" ></i> <span>B6</span></h5>
</div>
</div>
I'm trying to align my icons and text to the left but it seems a little messy
my code is really simple:
<p class="text-muted mb-2 text-left">22/8 <i class="fa fa-calendar-alt fa-1x"></i>
<br>21:00 <i class="fa fa-clock fa-1x"></i>
<br>Herzeliya <i class="fa fa-map-marker-alt fa-1x"></i>
<br>Texy <i class="fa fa-home fa-1x"></i>
<br>
Can someone help me to align them straight left?
It is necessary to set container widths for icons in accordance with the width of the widest.
<div class="container mt-3">
<div class="row">
<div class="col-12">
<p class="text-muted mb-2 text-left">
<i class="fa fa-calendar-alt fa-1x fa-custom-width mr-2"></i>22/8
<br>
<i class="fa fa-clock fa-1x fa-custom-width mr-2"></i>21:00
<br>
<i class="fa fa-map-marker-alt fa-1x fa-custom-width mr-2"></i>Herzeliya
<br>
<i class="fa fa-home fa-1x fa-custom-width mr-2"></i>Texy
<br>
</p>
</div>
</div>
</div>
.fa-custom-width{
width: 18px;
text-align: center;
}
https://www.codeply.com/go/GQAdPupsFU
Just use the fa-fw class (included in Font Awesome)...
<p class="text-muted mb-2 text-left">
<i class="fa fa-fw fa-calendar-alt fa-1x"></i> 22/8
<br><i class="fa fa-fw fa-clock fa-1x"></i> 21:00
<br><i class="fa fa-fw fa-map-marker-alt fa-1x"></i> Herzeliya
<br><i class="fa fa-fw fa-home fa-1x"></i> Texy
<br>
</p>
https://www.codeply.com/go/ouYds9p7kc
I am newbie in Bootstrap & HTML.
In my HTML I have a container and a row with 3 columns inside. In my situation, the title of the last section is way longer than others and needs to be displayed in 2 lines.
Because of this, the text of this section is in lower position than it is in other sections.
My question: Is it possible to make all of these texts after headers to be vertically in the same position?
HTML Code example:
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">MAIN_TITLE</h2>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_1</h4>
<div class="text-muted eqHeight"> TEXT_1</div>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_2</h4>
<div class="text-muted eqHeight"> TEXT_2</div>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_3</h4>
<div class="text-muted eqHeight"> TEXT_3</div>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_4</h4>
<div class="text-muted eqHeight"> TEXT_4</div>
</div>
</div>
</div>
This is how it looks like:
include jQuery and just write javascript for finding and setting the height of bigger one.
function max-height(){
var height=0;
var mHeight=0;
$('.service-heading').each(function(){
height = $(this).height();
if(height>mHeight)
mHeight = height;
});
$('.service-heading').height(mHeight);
height=0;
mHeight=0;
}
then call this function on ready() and resize()
$( document ).ready(function() {max-height();});
$( window ).resize(function() {max-height();});
in your code, text is aligned to center. i have removed it. check comment. then in the long text of title_title_title..so on, i have provided a space which encodes as newline character.
In the column setup, you have provided 'col-md-3' for three time, which makes it three-fourth of the width. so changed it to " col-md-3 , col-md-3 , col-md-6".
check out this.
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2 class="section-heading">MAIN_TITLE</h2>
</div>
</div>
<div class="row "> // removed text-center
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_1</h4>
<div class="text-muted"> TEXT_1</div>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_2</h4>
<div class="text-muted"> TEXT_2</div>
</div>
<div class="col-md-6"> // here col-md-3 changed to col-md-6
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE _TITLE_TITLE_TITLE_TITLE_ TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_3</h4> // here provided with a space.
<div class="text-muted"> TEXT_3</div>
</div>
</div>
</div>
Changed answer: Now that I get what you're asking here, I would recommend using eqHeight library (jQuery). It works like a charm with Bootstrap and what it does is that it automatically calculates the height of the tallest element and adjusts the height of others to same.
In this case you could do the following:
<div class="row">
<div class="col-md-4">
<i class="service-heading eqHeight">Content here</i>
<i>More content here!</i>
</div>
<div class="col-md-4">
<i class="service-heading eqHeight">Content here</i>
<i>More content here!</i>
</div>
<div class="col-md-4">
<i class="service-heading eqHeight">Content here</i>
<i>More content here!</i>
</div>
</div>
The point is to make the eqHeight library point to the .eqHeight class and make it calculate the upper elements (in this case .service-heading classes) to be the same height.
This might require an additional CSS, but shouldn't be more than just height and max-height properties.
Vertical positioning is a slight problem with responsive design. Another solution for this would be of making an additional row below the existing one and setting the same cols in there, but that of course doesn't work when the site breaks up for mobile.