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>
Related
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 know this sound crazy or easy but I'm not getting any result.
I'm working on bootstrap accordion and I'm trying to figure out how to write in CSS to allow show ALL color Blue in (icon, text and background color) in at the SAME TIME using CSS :focus when person clicked the link or accordion...
please see one line of accordion of codes...
<i class="fa fa-user" aria-hidden="true"></i> Members
or please see the whole sample of each accordion buttons...
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<dl class="accordion">
<dt><span><i class="fa fa-tachometer" aria-hidden="true"></i> Manage</span><i class="accordion_icon fa fa-chevron-up"></i></dt>
<dd class="accordion_content">
<div class="list-group">
<i class="fa fa-tachometer blue" aria-hidden="true"></i> Dashboard
<i class="fa fa-users" aria-hidden="true"></i> Members
<i class="fa fa-clipboard" aria-hidden="true"></i> Posts
<i class="fa fa-tachometer" aria-hidden="true"></i> Vestibulum at eros
</div>
</dd>
<dt><span><i class="fa fa-tachometer" aria-hidden="true"></i> Settings</span><i class="accordion_icon fa fa-chevron-up"></i></dt>
<dd class="accordion_content">
<div class="list-group">
<i class="fa fa-user" aria-hidden="true"></i> Members
<i class="fa fa-clipboard" aria-hidden="true"></i> Posts
<i class="fa fa-comments" aria-hidden="true"></i> comments
<i class="fa fa-user-secret" aria-hidden="true"></i> Privacy
<i class="fa fa-bell" aria-hidden="true"></i> Notifications
<i class="fa fa-envelope" aria-hidden="true"></i> Emails
<i class="fa fa-globe" aria-hidden="true"></i> Sites Infor
</div>
</dd>
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>
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.