Can't seem to get my piece of text to align with the check icon, Any help please and thanks
<div class="col-md-12" style="background: #d9232a; padding: 20px;">
<div><i class="fa fa-check-square fa-2x"></i><p style="display: inline;"> Fully Sculptured</p></br></div>
<div><i class="fa fa-check-square fa-2x"></i><p style="display: inline;"> 40mm Triple Glazing</p></br></div>
<div><i class="fa fa-check-square fa-2x"></i><p style="display: inline;"> PAS 23 & 24 Approved</p></br></div>
<div><i class="fa fa-check-square fa-2x"></i><p style="display: inline;"> Highly Security Options</p></br></div>
</div>
The default alignment of inline elements is baseline so we need to reset the vertical-align property to something more appropriate.
.fa {
vertical-align: middle;
}
Should do it.
.fa {
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12" style="background: #d9232a; padding: 20px;">
<div><i class="fa fa-check-square fa-2x"></i>
<p style="display: inline;">Fully Sculptured</p>
</br>
</div>
<div><i class="fa fa-check-square fa-2x"></i>
<p style="display: inline;">40mm Triple Glazing</p>
</br>
</div>
<div><i class="fa fa-check-square fa-2x"></i>
<p style="display: inline;">PAS 23 & 24 Approved</p>
</br>
</div>
<div><i class="fa fa-check-square fa-2x"></i>
<p style="display: inline;">Highly Security Options</p>
</br>
</div>
</div>
Set the i inside the p. Then apply vertical-align: middle; to the p.
<div><p style="vertical-align: middle; display: inline;"><i class="fa fa-check-square fa-2x"></i> Fully Sculptured</p></br></div>
Related
I am attempting to have a page with 7 icons on it. Below each icon I would like a short link and a small sentence. Additionally, I am attempting to get 4 icons horizontally on one row and 3 horizontally on the second row. I've managed to get the text and link the way I want it, but I can't seem to align them in one row horizontally. Here is my code:
<div class="col-sm-12" style="text-align: center; align-content: center; padding:25px; display:flex; flex-wrap: wrap; width: 100%;">
<div class="row" style="text-align:center;">
<div class="col-sm-12">
<div class="placeholder1" style="position: relative; inline-block;">
<i class="fa-solid fa-users fa-4x" style="padding: 18px;"></i>
IDT Team
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder2" style="position: relative; inline-block;">
<i class="fa-solid fa-computer fa-4x" style="padding: 18px;"></i>
Login Assistance
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder3" style="position: relative; inline-block;">
<i class="fa-solid fa-people-line fa-4x" style="padding: 18px;"></i>
Students
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder3" style="position: relative; inline-block;">
<i class="fa-solid fa-file-pen fa-4x" style="padding: 18px;"></i>
MyFIRE Updates
<p>One sentence blurb<br>describing this item.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<i class="fa-solid fa-database fa-4x" style="padding: 100px;"></i>
<i class="fa-solid fa-chalkboard fa-4x" style="padding: 100px;"></i>
<i class="fa-solid fa-person-chalkboard fa-4x" style="padding: 100px;"></i>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/4fd8df5f9a.js" crossorigin="anonymous"></script>
By removing the "col-sm-12" and the "position relative" elements, I was able to achieve the desired content on each row. Additionally, I added a "display: flex" and "flex-wrap" element to the "row" parent div. Additionally, I added the meta "viewport" link in the head of the HTML to retain responsiveness.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
</head>
<body>
<div class="row" style="text-align:center; align-items: center; display:flex; flex-wrap: wrap; width: 100%; justify-content: center;">
<div class="placeholder1" style="inline-block;">
<i class="fa-solid fa-users fa-4x" style="padding: 18px;"></i>
IDT Team
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder2" style="inline-block;">
<i class="fa-solid fa-computer fa-4x" style="padding: 18px;"></i>
Login Assistance
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder3" style="inline-block;">
<i class="fa-solid fa-people-line fa-4x" style="padding: 18px;"></i>
Students
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder3" style="inline-block;">
<i class="fa-solid fa-file-pen fa-4x" style="padding: 18px;"></i>
MyFIRE Updates
<p>One sentence blurb<br>describing this item.</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<i class="fa-solid fa-database fa-4x" style="padding: 100px;"></i>
<i class="fa-solid fa-chalkboard fa-4x" style="padding: 100px;"></i>
<i class="fa-solid fa-person-chalkboard fa-4x" style="padding: 100px;"></i>
</div>
</div>
<script src="https://kit.fontawesome.com/4fd8df5f9a.js" crossorigin="anonymous"></script>
</body>
</html>
With your current structure, you can add d-flex and justify-content-around as classes on your col-sm-12 div. Then set w-100 on your row so they span the full width.
See below:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="col-sm-12" style="text-align: center; align-content: center; padding:25px; display:flex; flex-wrap: wrap; width: 100%;">
<div class="row w-100" style="text-align:center;">
<div class="col-sm-12 d-flex justify-content-around align-items-center flex-wrap">
<div class="placeholder1" style="position: relative; inline-block;">
<i class="fa-solid fa-users fa-4x" style="padding: 18px;"></i>
IDT Team
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder2" style="position: relative; inline-block;">
<i class="fa-solid fa-computer fa-4x" style="padding: 18px;"></i>
Login Assistance
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder3" style="position: relative; inline-block;">
<i class="fa-solid fa-people-line fa-4x" style="padding: 18px;"></i>
Students
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder3" style="position: relative; inline-block;">
<i class="fa-solid fa-file-pen fa-4x" style="padding: 18px;"></i>
MyFIRE Updates
<p>One sentence blurb<br>describing this item.</p>
</div>
</div>
</div>
<div class="row w-100">
<div class="col-sm-12 d-flex justify-content-around align-items-center">
<i class="fa-solid fa-database fa-4x" style="padding: 100px;"></i>
<i class="fa-solid fa-chalkboard fa-4x" style="padding: 100px;"></i>
<i class="fa-solid fa-person-chalkboard fa-4x" style="padding: 100px;"></i>
<i class="null" style="padding: 100px;"></i>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/4fd8df5f9a.js" crossorigin="anonymous"></script>
The layout you desire is easily obtained by using the BS grid. If you want 4 items to be on one row together, put them each inside a .col-3 then put all of those inside a .row
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid">
<div class="row justify-content-center text-center">
<div class="col-3">
<div class="placeholder1">
<i class="fa-solid fa-users fa-4x" style="padding: 18px;"></i><br>
IDT Team
<p>One sentence blurb<br>describing this item.</p>
</div>
</div>
<div class="col-3">
<div class="placeholder2">
<i class="fa-solid fa-computer fa-4x" style="padding: 18px;"></i><br>
Login Assistance
<p>One sentence blurb<br>describing this item.</p>
</div>
</div>
<div class="col-3">
<div class="placeholder3">
<i class="fa-solid fa-people-line fa-4x" style="padding: 18px;"></i><br>
Students
<p>One sentence blurb<br>describing this item.</p>
</div>
</div>
<div class="col-3">
<div class="placeholder3">
<i class="fa-solid fa-file-pen fa-4x" style="padding: 18px;"></i><br>
MyFIRE Updates
<p>One sentence blurb<br>describing this item.</p>
</div>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-3">
<i class="fa-solid fa-database fa-4x"></i>
</div>
<div class="col-3">
<i class="fa-solid fa-chalkboard fa-4x"></i>
</div>
<div class="col-3">
<i class="fa-solid fa-person-chalkboard fa-4x"></i>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/4fd8df5f9a.js" crossorigin="anonymous"></script>
I have a column using bootstrap where I have a font awesome icon. The height of each div can vary slightly so I need the line to adjust to the height of the div. I have come across many examples to place the line down the center of the div but all I can find are ones that cause the line to go through the icon. I would like to have the line start under the icon.
I would show you an example CSS but I really don't have anything I can show you. I don't even know where to start.
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
</div>
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
</div>
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
</div>
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
</div>
<div class="col-sm-1">
<i class="fa fa-map-marker" aria-hidden="true" style="color: #5fb760"></i>
</div>
Example:
You can also do it wrapping your i element, then use a css pseudo-element to print out your line.
<span class="vertical-line-icon" >
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
</span>
Then the CSS:
.vertical-line-icon {
display: table;
height: 100%;
}
.vertical-line-icon:after {
content: '';
display: table;
margin: 0 auto;
width: 4px;
height: 100%;
background-color: #555555;
margin-top:5px;
}
See Fiddle: https://jsfiddle.net/rn9g21fj/
may be try something line this? dividing eaahc section with bootstrap's row?
<div class="row">
<div class="col-sm-1" style="text-align: center !important;">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"> </i><br>
<img src="straight-line.jpg" />
</div>
</div>
<div class="row">
<div class="col-sm-1" style="text-align: center !important;">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"> </i><br>
<img src="straight-line.jpg" />
</div>
</div>
You can do this using css's pseudo-element ::after. Just make a block after the i tag and align it in center using position:absolute;
i {position: relative;}
i::before {font-size: 30px;}
i::after {content: ""; display: block; position: absolute; left: 50%; top: 120%; transform: translateX(-50%); width: 6px; background: #556e79; height: 180px;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
You would need to use CSS to make line vertical and to adjust the icons. I have used class="row" to make lines separated
I gave it a try and created a codepen aswell CodePen Vertical Line
vr {
width:10px;
background-color:#000;
position:absolute;
top:25px;
bottom:0;
left:15px;
height:100px;
}
<div class="row">
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i><vr />
</div>
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
<vr />
</div>
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
<vr />
</div>
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
<vr />
</div>
<div class="col-sm-1">
<i class="fa fa-map-marker" aria-hidden="true" style="color: #5fb760"></i>
<vr />
</div>
</div>
</div>
Hope this helps
I have googled and searched on SO about this issue, and I just cant fix it.
It is really, really annoying and driving me crazy!!
I have a menu that is made up of several blocks. These are created by divs with display: inline-block
I have also tried float:left, but I need these all centered on the screen and this doesn't work.
With my inline-block, it works fine and adjusts to the size of the screen by making more rows - but the last row is always offset by 2 pixels!
This is my code and css...
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
.menublock {
width: 170px;
height: 150px;
margin: 0px;
padding: 0px;
display: inline-block;
background: #0074bc;
color: #fff;
cursor: pointer;
vertical-align: top;
}
.menublock-inner {
padding-top: 30px;
}
And the result is...
Take a look at this old link always gets me:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
So id do mine a little different like:
body {
background: #000;
}
.wrapper {
margin: 30px auto;
padding: 0;
text-align: center;
width: 100%;
max-width: 610px;
}
.menublock {
margin: 0;
padding: 0;
display: inline-block;
}
.menublock-inner {
margin: 0;
padding: 0;
display: table;
vertical-align: middle;
background: rgba(0,94, 184, 1);
height: 200px;
width: 200px;
}
.icon {
margin: 0;
padding: 0;
display: table-cell;
vertical-align: middle;
}
.fa {
}
span {
padding-top: 5px;
display: block;
color: white;
text-transform: uppercase;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="wrapper">
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
<!-- block -->
<div class="menublock">
<div class="menublock-inner">
<div class="icon">
<i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
<span>home</span>
</div>
</div>
</div>
<!-- eo: block -->
</div>
<!-- eo: wrapper -->
How can i float left the social icons with bootstrap, with text centered?
Im showing an image here, what i want. Now i use col-md-3 divs for floating, but there are to many free spaces between the divs.
<div class="col-md-12 footer_social_divs_box">
<div class="col-md-3 footer_social_divs text-center">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
</div><div class="col-md-3 footer_social_divs text-center">
<i class="fa fa-twitter-square" aria-hidden="true"></i>
</div><div class="col-md-3 footer_social_divs text-center">
<i class="fa fa-youtube-square" aria-hidden="true"></i>
</div><div class="col-md-3 footer_social_divs text-center">
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</div>
I guess you don't need to use the responsive classes on this:
.footer-responsive {
margin: 0 5px;
display: inline-block;
}
.text-center {
text-align: center;
}
.fa {
display: inline-block;
width: 32px;
height: 32px;
background: #000;
}
<div class="col-md-12 footer_social_divs_box text-center">
<div class="footer-responsive footer_social_divs text-center">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
</div>
<div class="footer-responsive footer_social_divs text-center">
<i class="fa fa-twitter-square" aria-hidden="true"></i>
</div>
<div class="footer-responsive footer_social_divs text-center">
<i class="fa fa-youtube-square" aria-hidden="true"></i>
</div>
<div class="footer-responsive footer_social_divs text-center">
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</div>
You don't need responsive class for that, you can simple use a padding or margin.
try this:
https://jsfiddle.net/leonardoaraujocosta/f070qpfh/
<div class="col-md-12 footer_social_divs_box">
<div class="social_links_container">
<div class="social_link_item">
<a href="https://www.facebook.com/Ferrari/?hc_ref=NEWSFEED&fref=nf" title="Facebook" target="_blank">
<span class="glyphicon glyphicon-superscript" aria-hidden="true"></span>
</a>
</div>
<div class="social_link_item">
<a href="https://www.facebook.com/Ferrari/?hc_ref=NEWSFEED&fref=nf" title="Facebook" target="_blank">
<span class="glyphicon glyphicon-superscript" aria-hidden="true"></span>
</a>
</div>
<div class="social_link_item">
<a href="https://www.facebook.com/Ferrari/?hc_ref=NEWSFEED&fref=nf" title="Facebook" target="_blank">
<span class="glyphicon glyphicon-superscript" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
.social_links_container {
width: 300px;
margin: 0 auto;
}
.social_link_item {
width: 33%;
float: left;
color: white;
text-align: center;
}
I hope I helped you
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. >_>