I want when user hover over Egipat that price is also hovered. Is that possible only with CSS or I need to use JQuery?
<div class="col-sm-10 col-xs-12">
<div class="col-sm-6 col-xs-5 tabela">
<h5>Egipat 14.6-14.7</h5>
</div>
<div class="col-sm-2 col-xs-4 tabela2">
<h5>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star blue"></i>
<i class="fa fa-star blue"></i>
</h5>
</div>
<div class="col-sm-3 col-xs-3 tabela3">
<h5>Price: 385 kn</h5>
</div>
</div>
No, its not possible you can't go to parents in css, you can only go to next or to child elements
only if you check the hover of the first div in your html code
col-sm-10:hover > div > h5{
/*do something*/
}
As there is no parent selector in CSS, you can hover the parent itself + using adjacent sibling selectors:
.tabela:hover, /* "Egipat" container */
.tabela:hover + div + div /* "price" container */
{
color: red;
}
<div class="col-sm-10 col-xs-12">
<div class="col-sm-6 col-xs-5 tabela">
<h5>Egipat 14.6-14.7</h5>
</div>
<div class="col-sm-2 col-xs-4 tabela2">
<h5>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star blue"></i>
<i class="fa fa-star blue"></i>
</h5>
</div>
<div class="col-sm-3 col-xs-3 tabela3">
<h5>Price: 385 kn</h5>
</div>
</div>
You can achieve this using the general sibling selector ~; You can read more about it here :
.tabela:hover {
background-color: #ccc;
}
.tabela:hover ~ .tabela3 {
background-color: #ccc;
}
<div class="col-sm-10 col-xs-12">
<div class="col-sm-6 col-xs-5 tabela">
<h5>Egipat 14.6-14.7</h5><--hover
</div>
<div class="col-sm-2 col-xs-4 tabela2">
<h5>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star blue"></i>
<i class="fa fa-star blue"></i>
</h5>
</div>
<div class="col-sm-3 col-xs-3 tabela3">
<h5>Price: 385 kn</h5><--hover
</div>
</div>
This gives you more flexibility than the adjacent sibling selector, since the ordering of the elements doesn't matter as much. You could stick another element after the tabela2 div, and still have it work.
Related
I have a problem , I would like to change just color of one icon but I can't put other class because icon font-awasome have a class.
I put em but it's not work. I want change last icon (color).
Can you help me ?
<div class="text">
<h4>Los Angeles</h4>
<p class="price">Nuit à partir de <strong>25€</strong></p>CC
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
I don't understand why you cannot add another CSS class, I don't see any reason not to do that.
But anyways other options are:
using an inline style tag:
<i class="fas fa-star" style="color: red;"></i>
or if you know the position, you know it's always the third element, you can use :nth-child().
This example will change the color of the third icon
.text i:nth-child(3) {
color: red;
}
Snippet:
.text .fas.fa-star {
color: black;
}
.text .fas.fa-star:nth-child(3) {
color: red;
}
<div class="text">
<span class="fas fa-star">1</span>
<span class="fas fa-star">2</span>
<span class="fas fa-star">3</span>
<span class="fas fa-star">4</span>
<span class="fas fa-star">5</span>
</div>
I tried but the problem is that I have a section with articles that contain the same composition and I want select icon with css3.
Yes, It works great for styling directly on html thank you.
I will like to do all my styles only in the css part.
First article exemple I want to select 2last icon, dans secondly article just last icon I can put div with class ?
<article>
<a href="#">
<div>
<img
class="image"
src="Public/Images/hebergements/4_small/HotelLesmouettes.jpg"
alt="Hôtel les mouettes"
/>
</div>
<div class="text">
<h4>Hôtel Les mouettes</h4>
<p class="price">Nuit à partir de 76<strong>€</strong></p>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</a>
</article>
</div>
<div class="Lodging-article">
<article>
<a href="#"
>
<div>
<img
class="image"
src="Public/Images/hebergements/4_small/Hoteldelamer.jpg"
alt="Hôtel de la mer"
/>
</div>
<div class="text">
<h4>Hôtel de la mer</h4>
<p class="price">Nuit à partir de 46<strong>€</strong></p>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star" ></i>
</div>
</a>
</article>
I have added the class center-block to be able to vertical center the Torza image. But no result, any suggestions?
<?php
<div class="container">
<hr />
<div class="text-center center-block">
<img src="img/logo_torza.png" alt="Torza" width="85">
<i class="fa fa-globe fa-2x social"></i>
<i class="fa fa-linkedin-square fa-2x social"></i>
<i class="fa fa-facebook-square fa-2x social"></i>
<i class="fa fa-envelope-square fa-2x social"></i>
</div>
<hr />
</div>
?>
You can use the code below:
HTML
<div class="container">
<hr />
<div class="torza-box">
<img src="img/logo_torza.png" alt="Torza" width="85">
<div class="links-box">
<i class="fa fa-globe fa-2x social"></i>
<i class="fa fa-linkedin-square fa-2x social"></i>
<i class="fa fa-facebook-square fa-2x social"></i>
<i class="fa fa-envelope-square fa-2x social"></i></div>
</div>
<hr />
</div>
CSS
.torza-box{
position:relative;
}
.links-box{
position:absolute;
top:50%;
right:10px;
transform:translatey(-50%);
}
if you added bootstrap CSS URL then this work as good, otherwise you write simple CSS code here...
.center-block a {
display:inline-block;
vertical-align:middle;
}
or view jsfiddle Demo
Thank you
Don't add it as a class, in that div tag use this:
<div style="text-align:center, margin-left:auto, margin-right:auto>
and i'm not sure why this is in php tags, this won't work with html unless you're echoing it.
Either get rid of the php tags or at the beginning write echo" and at the end write ";
Either replace it with this:
<?php
echo"
<div class="container">
<hr />
<div class="text-center center-block">
<img src="img/logo_torza.png" alt="Torza" width="85">
<i class="fa fa-globe fa-2x social"></i>
<i class="fa fa-linkedin-square fa-2x social"></i>
<i class="fa fa-facebook-square fa-2x social"></i>
<i class="fa fa-envelope-square fa-2x social"></i>
</div>
<hr />
</div>
";
?>
or just get rid of the <?php?> tags
I am trying to get two fontawesome icons caret up and caret down to stack on stop of each other without hiding one and showing the other? Any suggestions would be greatly appreciated.
Here is a plucker with Bootstrap and fontawesome: https://plnkr.co/edit/S1rSo41lkG4ZPjnaS0lf?p=preview
<div class="col-md-4 col-xs-12">
<div class="pull-left">
<i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
<i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
<span style="padding-right: 8px">Worker</span>
</div>
<div class="pull-left">
<i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
<i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
<span style="padding-right: 8px">Entitlement</span>
</div>
<div class="pull-left">
<i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
<i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
<span style="padding-right: 8px">Request Date</span>
</div>
</div>
Another way of doing this is with .fa-stack and a bit of css and html like this:
Remove .pull-left from your <i>
Put a <span class="fa fa-stack"></span> around each pair
.fa-stack {
text-align: center;
}
.fa-stack .fa-caret-down {
position: absolute;
bottom: 0;
}
.fa-stack .fa-caret-up {
position: absolute;
top: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="col-md-4 col-xs-12">
<div class="pull-left">
<span class="fa fa-stack">
<i class="fa fa-caret-down" aria-hidden="true"></i>
<i class="fa fa-caret-up" aria-hidden="true"></i>
</span>
<span style="padding-right: 8px">Worker</span>
</div>
<div class="pull-left">
<span class="fa fa-stack">
<i class="fa fa-caret-up" aria-hidden="true"></i>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</span>
<span style="padding-right: 8px">Entitlement</span>
</div>
<div class="pull-left">
<span class="fa fa-stack">
<i class="fa fa-caret-up" aria-hidden="true"></i>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</span>
<span style="padding-right: 8px">Request Date</span>
</div>
</div>
You can achieve this using bootstrap grid system--
Working Example
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link data-require="fontawesome#4.4.0" data-semver="4.4.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="col-md-6 col-xs-12">
<div class="pull-left row">
<div class="col-md-1 col-xs-1">
<div class="row">
<div class="col-md-12 col-xs-12">
<i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
</div>
<div class="col-md-12 col-xs-12">
<i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col-md-8 col-xs-8">
<span style="padding-right: 8px">Worker</span>
</div>
</div>
<div class="pull-left row">
<div class="col-md-1 col-xs-1">
<div class="row">
<div class="col-md-12 col-xs-12">
<i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
</div>
<div class="col-md-12 col-xs-1">
<i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col-md-8 col-xs-8">
<span style="padding-right: 8px">Entitelment</span>
</div>
</div>
<div class="pull-left row">
<div class="col-md-1 col-xs-1">
<div class="row">
<div class="col-md-12 col-xs-12">
<i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
</div>
<div class="col-md-12 col-xs-12">
<i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col-md-8 col-xs-8">
<span style="padding-right: 8px">Request Date</span>
</div>
</div>
</div>
</body>
</html>
It's an old question but just in case someone is still looking for it, now Font Awesome has icon for it. Is is fa-sort: https://fontawesome.com/v4.7/icon/sort
Here's a solution that uses flexbox:
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link data-require="fontawesome#4.4.0" data-semver="4.4.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="col-md-4 col-xs-12">
<div class="pull-left">
<div class='icon-container'>
<i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
<i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
</div>
<span style="padding-right: 8px">Worker</span>
</div>
<div class="pull-left">
<div class='icon-container'>
<i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
<i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
</div>
<span style="padding-right: 8px">Entitlement</span>
</div>
<div class="pull-left">
<div class='icon-container'>
<i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
<i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
</div>
<span style="padding-right: 8px">Request Date</span>
</div>
</div>
</body>
</html>
CSS:
.icon-container {
display: flex;
flex-direction: column
}
.pull-left {
display: flex;
}
span { padding-top: 4px; }
new plunk
You can simply wrap each <i> in a div
Since divs always take the whole width and start on a new line, this will automatically put them on top of eachother
You can then use css to style as you need
<div>
<div>
<i class="fa fa-caret-up"/>
</div>
<div>
<i class="fa fa-caret-down"/>
</div>
</div>
I'm trying to close the gaps/margins between the social icons and have it centered under the text.
Jumbotron
Here is the code:
div class="jumbotron"><!-- Jumbotron -->
<div class="container1">
<p>A blog to explore, learn, and share Electro Funk, Soul, & Hip Hop Music</p>
<div id="social"><!-- Social Icons -->
<div id="twitter" class="col-md-4">
<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
Twitter
</div>
<div id="instagram" class="col-md-4">
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
Instagram
</div>
<div id="soundcloud" class="col-md-4">
<i class="fa fa-soundcloud fa-2x" aria-hidden="true"></i>
Soundcloud
</div>
</div>
</div>
It would probably be better to not use separate columns for each icon and instead use one column surrounding them all:
<div id="social" class="col-md-12 text-center"><!-- Social Icons -->
<div id="twitter">
<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
Twitter
</div>
<div id="instagram">
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
Instagram
</div>
<div id="soundcloud">
<i class="fa fa-soundcloud fa-2x" aria-hidden="true"></i>
Soundcloud
</div>
</div>
I have an app that uses Bootstrap 3. In that app, I have a toolbar. I only want that toolbar to appear on "md" and "lg" screens. On "xs" and "sm" sized screens, I want a drop-down menu to appear in its place. My question is, how do I do that? Currently, I have the following code, which is available in this Bootply.
<div class="container">
<div class="row">
<div class="col-xs-9">
<ul class="list-inline">
<li><i class="fa fa-user"></i></li>
<li><strong>Joe Smith</strong></li>
</ul>
</div>
<div class="col-xs-3">
<div class="btn-toolbar pull-right hidden-xs">
<div class="btn-group">
<button class="btn"><i class="fa fa-save"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
</div>
</div>
<div class="dropdown hidden-lg">
<i class="fa fa-chevron-down"></i>
<ul class="dropdown-menu dropdown-menu-right">
<li><button class="btn btn-sup"><i class="fa fa-save"></i><span>Save</span></button></li>
<li><button class="btn btn-sup"><i class="fa fa-close"></i><span>Close</span></button></li>
</ul>
</div>
</div>
</div>
</div>
My problem is, in Bootstrap 3, the responsive utilities do not seem to let define multiple breakpoints for visibility. Is there a way for me to say something like, "if my screen size is "md" or less, show the menu. Otherwise, use the toolbar?" If so, how?
Thanks!
you can look it up here
http://getbootstrap.com/css/#responsive-utilities-classes
So on the toolbar you should have
<div class="btn-toolbar pull-right hidden-xs hidden-sm">
and on the dropdown
<div class="dropdown hidden-md hidden-lg">
Try use this code:
<div class="container">
<div class="row">
<div class="col-xs-9">
<ul class="list-inline">
<li><i class="fa fa-user"></i></li>
<li><strong>Joe Smith</strong></li>
</ul>
</div>
<div class="col-xs-3">
<div class="btn-toolbar pull-right visible-md visible-lg">
<div class="btn-group">
<button class="btn"><i class="fa fa-save"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
</div>
</div>
<div class="dropdown visible-xs visible-sm">
<i class="fa fa-chevron-down"></i>
<ul class="dropdown-menu dropdown-menu-right">
<li><button class="btn btn-sup"><i class="fa fa-save"></i><span>Save</span></button></li>
<li><button class="btn btn-sup"><i class="fa fa-close"></i><span>Close</span></button></li>
</ul>
</div>
</div>