I know this question is ask many time before but i didn't get the answers as i expected.... I am trying to hover on .h4size and effect on .fsize i use below css its not working...
HTML
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="div-square">
<a href="product.php" >
<i class="fa fa-qrcode fa-3x fsize"></i>
<h4 class="h4size">Saloon Product</h4>
</a>
</div>
CSS
.h4size:hover .fsize {
color: #c90000;
text-shadow: 4px 6px 3px #202020;
}
i also tried
.div-square .fsize .h4size:hover + .div-square .fsize {
color: #c90000;
text-shadow: 4px 6px 3px #202020;
}
its also not working
You can reverse the html code but have it display the way you originally intended with display: flex; and flex-direction: column-reverse;
Then use the adjacent sibling selector '+' to target the <i> tag from the <h4> tag.
a { text-decoration: none; color: black; }
.reorder {
display: flex;
flex-direction: column-reverse;
}
h4:hover + i {
color: red;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="div-square">
<a class="reorder" href="product.php">
<h4 class="h4size">Saloon Product</h4>
<i class="fa fa-qrcode fa-3x fsize"></i>
</a>
</div>
</div>
Another option is using flexbox and order
Here's the original answer..
https://stackoverflow.com/a/39157544/3377049
fiddle
https://jsfiddle.net/Hastig/9nvgvnxx/
More about flexbox at CSS Tricks
Hello Here is solution :
https://jsfiddle.net/uvzqsggo/
Replace your HTML code with below:
Just : <i class="fa fa-qrcode fa-3x fsize">Test</i> this line :
I have add sample text Test but remove it(this is just for example)
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="div-square">
<a href="product.php" >
<h4 class="h4size">Saloon Product</h4>
<i class="fa fa-qrcode fa-3x fsize">Test</i>
</a>
</div>
Your code should be like this:
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="div-square">
<a href="product.php">
<h4 class="h4size"> <i class="fa fa-qrcode fa-3x fsize"></i> Saloon Product</h4>
</a>
</div>
</div>
.fsize>.h4size:hover {
color: #c90000;
text-shadow: 4px 6px 3px #202020;
}
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="div-square">
<a href="product.php" >
<i class="fa fa-qrcode fa-3x fsize">
<h4 class="h4size">Saloon Product</h4></i>
</a>
</div>
This the easiest solution of your problem
Related
How do I change the link color into this Bootstrap 4 card without affecting the link color of other cards on the same HTML page?
/* I've tried this but it affects all cards on the HTML page: */
.card a:link {
color: white;
}
.card a:visited {
color: white;
}
.card a:hover {
color: white;
text-decoration: none;
}
.card a:active {
color: white;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="col-md-6">
<div class="card py-4 card-container">
<a href="#">
<div class="card-body">
<i class="fa-light fa-book-open my-4" style="font-size: 36px"></i><br/>
<p class="card-text text-center">CODE SAMPLES</p>
</div>
</a>
</div>
</div>
This is a textbook case for a custom class. You'd put it on the card you want to customize and write CSS accordingly. Or, use Bootstrap's text color utilities to directly style your links with theme colors, which adds hover color shift automatically. I'll demonstrate both approaches here.
.card.orangy a {
color: orange;
}
.card.orangy a:hover,
.card.orangy a:active {
color: darkorange;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="container-fluid">
<div class="row mt-2">
<div class="col-4">
<div class="card py-2 card-container">
<a href="#">
<div class="card-body">
<i class="fa-light fa fa-book-open mb-4" style="font-size: 36px"></i><br/>
<p class="card-text text-center">Common card with no link styles</p>
</div>
</a>
</div>
</div>
<div class="col-4">
<div class="card orangy py-2 card-container"> <!--------------- HERE -->
<a href="#">
<div class="card-body">
<i class="fa-light fa fa-book-open mb-4" style="font-size: 36px"></i><br/>
<p class="card-text text-center">Card with custom class</p>
</div>
</a>
</div>
</div>
<div class="col-4">
<div class="card py-2 card-container">
<a href="#" class="text-danger"> <!-------------------------- HERE -->
<div class="card-body">
<i class="fa-light fa fa-book-open mb-4" style="font-size: 36px"></i><br/>
<p class="card-text text-center">Card with a text color class</p>
</div>
</a>
</div>
</div>
</div>
</div>
Paste the code in your CSS file you need to change the focus color in p tag
.card a:link {
color: #333;
}
.card a:visited p {
color: white;
}
.card a:hover p {
color: green;
text-decoration: none;
}
.card a:active p {
color: white;
}
.card a:focus p {
color: #f00;
}
<div class="col-md-6">
<div class="card py-4 card-container">
<a href="#">
<div class="card-body">
<i class="fa-light fa-book-open my-4" style="font-size: 36px"></i><br/>
<p class="card-text text-center">CODE SAMPLES</p>
</div>
</a>
</div>
</div>
I've installed a module from https://desislavsd.gitbook.io and used it for my custom modal. However I have trouble the dropdown is not overlapping and stuck in here even adjusting z-index:999 does not do anything.
I also tried to make adjustments to the height but upon clicking the custom component but doesn't work because if I already make the height of the modal higher before the dropdown list is shown it would leave a big space below they dropdown which is not friendly looking.
Custom module https://jsfiddle.net/desislavsd/es2n6py0/
Either adjusting the height of the modal onclick will do or overlapping the dropdown as long as the lists are shown.
<div class="filter-body-w-auto shadows-box p-0 col-lg-5 col-md-6 col-sm-9" v-if="getSelectedFilterType == 'connectivity'">
<div class="filter-header">
<h6>Connectivity</h6>
<div class="filter-close-btn" #click="hideModal('')">
<i class="fa fa-times fa-lg" aria-hidden="true"></i>
</div>
</div>
<div class="row pt-1 px-2 mt-0 mb-2 mx-1 justify-content-evenly">
<p class="text-dark text-start mt-1 mb-0 mx-0 py-1 px-0" style="font-size: 100%;">Available to All Tenants</p>
<v-select v-model="selected.browsers" as="name:id:id" :from="browsers" tagging :tag-keys="[9,32,188]"></v-select>
</div>
</div>
-------------------------------------------------------------------------
<!-- Inspector code -->
<div data-v-796ce895="" class="filter-body-w-auto shadows-box p-0 col-lg-5 col-md-6 col-sm-9">
<div data-v-796ce895="" class="filter-header">
<h6 data-v-796ce895="">Connectivity</h6>
<div data-v-796ce895="" class="filter-close-btn">
</div>
</div>
<div data-v-796ce895="" class="row filter-tags pt-1 px-2 mt-0 mb-2 mx-1 justify-content-evenly">
<p data-v-796ce895="" class="text-dark text-start mt-1 mb-0 mx-0 py-1 px-0" style="font-size: 100%;">Available
to All Tenants</p>
<div data-v-796ce895="" tabindex="-1" class="v-select -empty -multiple">
<div class="v-select-bar">
<div class="v-select-inp-group"><input placeholder="Search.." class="v-select-inp"><button type="button"
tabindex="-1" class="v-select-btn-clear"></button><button type="button" tabindex="-1"
class="v-select-btn-dd"></button><button type="button" tabindex="-1"
class="v-select-btn-spinner"></button></div>
</div>
<div class="v-select-list">
<span class="v-select-option">Internet Explorer</span>
<span class="v-select-option">Firefox</span>
<span class="v-select-option">Chrome</span>
<span class="v-select-option">Opera</span>
<span class="v-select-option">Safari</span>
<span class="v-select-option">Opera3</span>
<span class="v-select-option">Opera2</span>
<span class="v-select-option">Opera2</span>
<span class="v-select-option">Opera1</span>
<span class="v-select-option">Opera11</span>
</div>
</div>
</div>
</div>
CSS
.filter-body-w-auto[data-v-796ce895] {
display: inline-block;
z-index: 99;
background: white;
border-radius: 6px;
box-shadow: 4px 4px 4px rgb(0 0 0 / 20%);
top: 400px;
transform: translate(-50%, 0);
overflow: hidden;
position: fixed;
height: 500px;
max-height: 100%;
}
.filter-header[data-v-796ce895] {
background: #466cb3;
padding: 10px 17px;
color: #FFF;
width: 100%;
text-align: left;
}
3rd party css module: https://github.com/desislavsd/vue-select/blob/master/dist/vue-select.css
Btw I also have used some bootstrap classes in here mixed with custom styles
Awkward design but another possible solution if overlap does not work
This question already has answers here:
Font Awesome - how to put an icon inside a circle?
(2 answers)
Make Font Awesome icons in a circle border with right 1:1 ratio
(4 answers)
How to round font-awesome icons?
(3 answers)
Closed 2 years ago.
I would like to have three different icons displayed next to each other, as soon as I do this they are no longer round but more like an egg. How can I solve this problem?
HTML
<div class="row text-center">
<div class="col-lg-4 mb-5 mb-lg-0">
<i class="fas fa-rocket icon-fast"></i>
<h3 class="services-title">Head</h3>
<p class="text-black-50 services-subtitle">Some text for you, lalalalal.</p>
</div>
<div class="col-lg-4 mb-5 mb-lg-0">
<i class="fas fa-glasses icon-fast"></i>
<h3 class="services-title">Head</h3>
<p class="text-black-50 services-subtitle">Some text for you, lalalalal.</p>
</div>
<div class="col-lg-4 mb-5 mb-lg-0">
<i class="fas fa-lock icon-fast"></i>
<h3 class="services-title">Head</h3>
<p class="text-black-50 services-subtitle">Some text for you, lalalalal.</p>
</div>
</div>
CSS
.icon-fast {
font-size: 62px;
border-radius: 50%;
padding: 16px;
/* background-color: green;*/
background: linear-gradient(to bottom right, #035ff3, #550ca4);
color: white;
}
.services-title {
font-weight: normal;
}
.services-subtitle {
font-size: 17px;
}
As soon as I write the same icon three times, I get real circles. I would like to have this on three different ones?
You need to add display: inline-block; to the .icon-fast class in CSS. then set some a width and height equal. Also you can play around with your oadding to center it.
Check it out:
.icon-fast {
font-size: 62px;
border-radius: 50%;
padding: 10px;
/* background-color: green;*/
background: linear-gradient(to bottom right, #035ff3, #550ca4);
color: white;
display: inline-block;
height: 120px;
width: 120px;
}
.services-title {
font-weight: normal;
}
.services-subtitle {
font-size: 17px;
}
<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 text-center">
<div class="col-lg-4 mb-5 mb-lg-0">
<i class="fas fa-rocket icon-fast"></i>
<h3 class="services-title">Head</h3>
<p class="text-black-50 services-subtitle">Some text for you, lalalalal.</p>
</div>
<div class="col-lg-4 mb-5 mb-lg-0">
<i class="fas fa-rocket icon-fast"></i>
<h3 class="services-title">Head</h3>
<p class="text-black-50 services-subtitle">Some text for you, lalalalal.</p>
</div>
<div class="col-lg-4 mb-5 mb-lg-0">
<i class="fas fa-rocket icon-fast"></i>
<h3 class="services-title">Head</h3>
<p class="text-black-50 services-subtitle">Some text for you, lalalalal.</p>
</div>
</div>
Because i is an inline element, you have to make it block, by using d-inline-block utility class
If you need to set it centered, you can use d-inline-flex align-items-center justify-content-center in i
Also you need to set width as the same as height, to make a square
The size of the icon can be adjusted using font-size in pseudo element ::before
.icon-fast {
border-radius: 50%;
padding: 16px;
/* background-color: green;*/
background: linear-gradient(to bottom right, #035ff3, #550ca4);
color: white;
width: 62px;
height: 62px;
}
.icon-fast::before {
font-size: 30px/* change this as you need */
}
.services-title {
font-weight: normal;
}
.services-subtitle {
font-size: 17px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row text-center">
<div class="col-lg-4 mb-5 mb-lg-0">
<i class="fas fa-rocket icon-fast d-inline-flex align-items-center justify-content-center"></i>
<h3 class="services-title">Head</h3>
<p class="text-black-50 services-subtitle">Some text for you, lalalalal.</p>
</div>
<div class="col-lg-4 mb-5 mb-lg-0">
<i class="fas fa-ad icon-fast d-inline-flex align-items-center justify-content-center"></i>
<h3 class="services-title">Head</h3>
<p class="text-black-50 services-subtitle">Some text for you, lalalalal.</p>
</div>
<div class="col-lg-4 mb-5 mb-lg-0">
<i class="fas fa-atlas icon-fast d-inline-flex align-items-center justify-content-center"></i>
<h3 class="services-title">Head</h3>
<p class="text-black-50 services-subtitle">Some text for you, lalalalal.</p>
</div>
</div>
</div>
How could I make an vertical align of '10:00" and the gliphs on right side of thewe markup, into parent div?
An optional horizontal align as well will be appreciated.
https://jsfiddle.net/DTcHh/39516/
//markup
<div class="container" style="outline: 1px solid orange;">
<div class="col-sm-10 bg-danger">
<div class="col-sm-2 col-md-2 col-lg-2 bg-info">
10:00
</div>
<div class="col-sm-10 col-md-10 col-lg-10">
<div class="row">
<div class="col-sm-12">
Clique aqui para agendar
</div>
<div class="col-sm-12">
Consulta
</div>
<div class="col-sm-12">
Parando
</div>
</div>
</div>
</div>
<div class="col-sm-2 " >
<div><i class="pull-right glyphicon" class="glyphicon-chevron-down"></i>
<i class="fa fa-lg fa-lock pull-right"></i>
<i class="fa fa-lg fa-user pull-right"></i>
</div>
</div>
//css
import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');
#import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
body {
margin: 10px;
}
Add this to your styles:
.container,
.container > .col-sm-10 {
display: flex;
align-items: center;
}
Updated Fiddle
I have created small piece of code where it shows 4 thumbnails in a row of equal grid width.
.row-content-3 {
background-color: rgba(0,0,0,0.8) !important;
color: #fff;
margin:0px auto;
padding: 50px 0px 50px 0px;
min-height:200px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-content-3">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="#">
<img src="http://www.theo-android.co.uk/github-images/fair1.png" class="img-circle" alt="Larissa's fair">
</a>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="#">
<img src="http://www.theo-android.co.uk/github-images/fair2.png" class="img-circle" alt="Larissa's fair">
</a>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="#">
<img src="http://www.theo-android.co.uk/github-images/fair3.png" class="img-circle" alt="Larissa's fair">
</a>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="#">
<img src="http://www.theo-android.co.uk/github-images/fair4.png" class="img-circle" alt="Larissa's fair">
</a>
</div>
</div>
</div>
If you run the code,you will notice that there is a white background which needs to be removed. I put this css simple code,but it didn't work:(.
.thumbnail {
border: 0;
}
Also I am giving you the jsfiddle.
Any ideas,
Thanks Theo.
If i am not wrong then you wanted to remove the white background from the circle image back only.
I Added this
.thumbnail {
border: 0;
background: transparent;
}
And you can see there is box shadow too. You can remove that by using
box-shadow: none;
Updated fiddle: https://jsfiddle.net/udgw71no/6/
Give background color as transparent for thumbnail class
.thumbnail {
border: 0;
background-color:transparent;
}
Updated fiddle : https://jsfiddle.net/affaz/udgw71no/8/
Looking for this ?
.thumbnail {
border: 0;
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
Demo
remove background of thumbnail but to make it working.
.row-content-3 {
background-color: rgba(0,0,0,0.8) !important;
color: #fff;
margin:0px auto;
padding: 50px 0px 50px 0px;
min-height:200px;
}
.thumbnail {
background: none !important;
border: 0 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-content-3">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="#">
<img src="http://www.theo-android.co.uk/github-images/fair1.png" class="img-circle" alt="Larissa's fair">
</a>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="#">
<img src="http://www.theo-android.co.uk/github-images/fair2.png" class="img-circle" alt="Larissa's fair">
</a>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="#">
<img src="http://www.theo-android.co.uk/github-images/fair3.png" class="img-circle" alt="Larissa's fair">
</a>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="#">
<img src="http://www.theo-android.co.uk/github-images/fair4.png" class="img-circle" alt="Larissa's fair">
</a>
</div>
</div>
</div>
Setting the following styles should do it:
.thumbnail {
background-color: transparent;
border: none;
}