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
Related
I try to clone a website's front end to improve my knowledge.
The problem is Header is not at the top of this website.
Im new to bootstrap but i have to control it.
I did reset the CSS.
It's my first time here, I'm appreciated your help.
body {
margin: 0;
padding: 0;
}
*{
padding: 0;
margin: 0;
}
.img {
width: 221px;
height: 56px;
}
<div id="logo" class="pb-2">
<img class="float-start py-2 ps-1 pe-2" src="assets/img/unknown.png">
<a href="#" class="sidebar-toggler flex-shrink-0">
<i class="fa-solid fa-angle-left py-4 pe-2"></i>
</a>
</div>
<div class="sidebar pe-4 pb-3" id="sidebar">
<!--sidebar start-->
<div class="navbar-nav w-100">
<div class="nav-item dropdown">
<i class="fa fa-laptop me-2"></i>Admin
<div class="dropdown-menu bg-transparent border-0">
A
B
C
</div>
</div>
<i class="fa fa-th me-2"></i>Cập nhật PO
<i class="fa fa-keyboard me-2"></i>Phân loại PO
<i class="fa fa-chart-bar me-2"></i>Ước tính rebate
<i class="fa fa-tachometer-alt me-2"></i>Cập nhật rebate
<i class="fa fa-tachometer-alt me-2"></i>Báo cáo
<i class="fa fa-tachometer-alt me-2"></i>Tra cứu thông tin
<i class="fa fa-tachometer-alt me-2"></i>Hướng dẫn sử dụng
</div>
<!--sidebar end-->
</div>
<header class="sticky-top">
<h1>CHƯƠNG TRÌNH REBATE</h1>
<i class="fa fa-bell me-lg-2"></i>
<img class="rounded-circle" src="assets/img/aTu.png" alt="" style="width: 40px; height: 40px;">
<span class="d-none d-lg-inline-flex">TuNTC23</span>
<hr>
</header>
I have moved some code around and managed to get it looking somewhere close, make sure you are pulling in the correct imports in you tag, like
Bootstrap 5 or 4 etc...
(SECOND ATTEMPT)
header {
border-bottom: 3px solid blue;
background-color: #eaeaea;
}
.dropdown-item {
background-color: red!important;
}
.sidebar {
overflow: hidden;
background-color: #eaeaea;
position: sticky;
top: 0;
width: 200px;
border-right: 2px solid blue;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
</div>
<header class="flex flex-col sticky-top">
<div id="logo" class="pb-2">
<img class="float-start py-2 ps-1 pe-2" src="assets/img/unknown.png">
<a href="#" class="sidebar-toggler flex-shrink-0">
<i class="fa-solid fa-angle-left py-4 pe-2"></i>
</a>
</div>
<h1>CHƯƠNG TRÌNH REBATE</h1>
<i class="fa fa-bell me-lg-2"></i>
<img class="rounded-circle" src="assets/img/aTu.png" alt="" style="width: 40px; height: 40px;">
<span class="d-none d-lg-inline-flex">TuNTC23</span>
<hr>
</header>
<div class="sidebar pe-4 pb-3" id="sidebar">
<!--sidebar start-->
<div class="navbar-nav w-100">
<div class="nav-item dropdown">
<i class="fa fa-laptop me-2"></i>Admin
<div class="dropdown-menu bg-transparent border-0">
A
B
C
</div>
</div>
<div class="sidebar">
<i class="fa fa-th me-2"></i>Cập nhật PO
<i class="fa fa-keyboard me-2"></i>Phân loại PO
<i class="fa fa-chart-bar me-2"></i>Ước tính rebate
<i class="fa fa-tachometer-alt me-2"></i>Cập nhật rebate
<i class="fa fa-tachometer-alt me-2"></i>Báo cáo
<i class="fa fa-tachometer-alt me-2"></i>Tra cứu thông tin
<i class="fa fa-tachometer-alt me-2"></i>Hướng dẫn sử dụng
</div>
</div>
<!--sidebar end-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
I would consider your options as there are a few ways of doing this, this way is preferred by me but not everyone.
Firstly we fixed the element so its stays where it is, next we apply top:0 to make sure the element is at the top of the page and finally passing 'width: 100%' to ensure the navigation fills the width entirely.
I can help more if this answer is not enough.
.navbar {
overflow: hidden;
background-color: #333;
position: sticky;
top: 0;
width: 100%;
}
I'm trying to border a div that contains 4 fa-icons. Since I've set the parent div as Container, the border is automatically occupying large padding on the left & right sides horizontally. I've also tried nesting bootstrap grids, but it's not helping. Can anyone please help with this?
NOTE: Padding should not be greater than 1px on all sides and the div should exactly be in the center of the page.
HTML:
<div class="container" id="socialIcons">
<div class="row">
<div class="col-md-12">
<a href="https://www.google.com">
<i class="fab fa-linkedin fa-3x "></i>
</a>
<a href="https://www.google.com" target="_blank">
<i class="fab fa-youtube fa-3x"></i>
</a>
<a href="https://www.google.com">
<i class="fab fa-instagram fa-3x"></i>
</a>
<a href="https://www.google.com">
<i class="fab fa-github fa-3x"></i>
</a>
</div>
</div>
</div>
CSS:
#socialIcons {
position: relative;
text-align: center;
margin-top: 300px !important;
border: 1px solid white;
}
UPDATE: After applying Jeff's answer, this is closer to what I needed, but still has the automatic padding on the right side of the GitHub icon. Any idea why?
You could do something like this (when you swap your icons with my span's, it should give you the proper padding on top and bottom):
Codpen
Instead of hard coding text-align: center;, just add the class text-center through Bootstrap. Also, notice I added justify-content-center to the row.
<div class="container text-center" id="socialIcons">
<div class="row justify-content-center">
<div class="border">
<a href="https://www.google.com">
<span>google</span>
</a>
<a href="https://www.google.com">
<span>youtube</span>
</a>
<a href="https://www.google.com">
<span>fb</span>
</a>
<a href="https://www.google.com">
<span>twitter</span>
</a>
</div>
</div>
</div>
and CSS:
#socialIcons {
position: relative;
margin-top: 300px !important;
}
.border {
border: 1px solid black;
padding: 1px;
}
<div class="container" id="socialIcons">
<div class="row">
<div class="col-md-12" style="border: 1px solid white;">
<a href="https://www.google.com">
<i class="fab fa-linkedin fa-3x "></i>
</a>
<a href="https://www.google.com" target="_blank">
<i class="fab fa-youtube fa-3x"></i>
</a>
<a href="https://www.google.com">
<i class="fab fa-instagram fa-3x"></i>
</a>
<a href="https://www.google.com">
<i class="fab fa-github fa-3x"></i>
</a>
</div>
</div>
I hope above code will helps you
If your icons should be center-aligned - you don't need to use div element with container class. Just add a div wrapper with custom class, and add your styles on it.
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 two div's sitting side by side, but are not centered inside of its div but rather stay on the left of its row. I am trying to make it responsive and centered as the screen size is being adjusted here is my code.
<div class="connectdiv">
<div class="row">
<div class="col-xs-6 text-center" "col-sm-6" >
<h2 id="connect"><u>Connect</u></h2>
<a target="_blank" href="https://www.instagram.com/balt_jitsu19/"><i class="fa fa-instagram fa-lg"></i></a>
<i class="fa fa-envelope fa-lg"></i>
<a target="_blank" href="https://www.freecodecamp.com/armbar1"><i class="fa fa-free-code-camp fa-lg"></i></a>
<a target="_blank" href="http://github.com/baltz1"><i class="fa fa-github fa-lg"></i></a>
</div>
<div class="col-xs-6 text-center" "col-sm-6">
<h2 id="connect"><u>Made With</u></h2>
<i class="fa fa-html5 fa-2x"></i>
<i class="fa fa-css3 fa-2x"></i>
<img src="https://png.icons8.com/icons8/ios7/32/" title="Icons8" width="32" height="32">
<img src="https://png.icons8.com/gimp/ios7/25/" title="GIMP" width="25" height="25">
</div>
</div>
</div>
My Css
#connect{
color:rgb(255, 255, 255);
font-family:'Oleo Script Swash Caps', cursive;
text-shadow:5px 1px 0px rgb(0, 0, 0);
font-size:35px;
}
.connectdiv{
padding:20px;
width:100%;
margin:5px auto;
}
if it helps i have here on codepen https://codepen.io/balt1/pen/VbYweZ?editors=0100
try this one ... it will work :
<div class="connectdiv">
<div class="row">
<div class="col-xs-6 text-center col-sm-6" >
<h2 id="connect"><u>Connect</u></h2>
<a target="_blank" href="https://www.instagram.com/balt_jitsu19/"><i class="fa fa-instagram fa-lg"></i></a>
<i class="fa fa-envelope fa-lg"></i>
<a target="_blank" href="https://www.freecodecamp.com/armbar1"><i class="fa fa-free-code-camp fa-lg"></i></a>
<a target="_blank" href="http://github.com/baltz1"><i class="fa fa-github fa-lg"></i></a>
</div>
<div class="col-xs-6 text-center col-sm-6">
<h2 id="connect"><u>Made With</u></h2>
<i class="fa fa-html5 fa-2x"></i>
<i class="fa fa-css3 fa-2x"></i>
<img src="https://png.icons8.com/icons8/ios7/32/" title="Icons8" width="32" height="32">
<img src="https://png.icons8.com/gimp/ios7/25/" title="GIMP" width="25" height="25">
</div>
</div>
You haven't applied the col-sm-6 class properly. Currently it's a quoted string precariously applied to the DIV.
Change
class="col-xs-6 text-center" "col-sm-6"
to
class="col-xs-6 col-sm-6 text-center
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
<div class="connectdiv">
<div class="row">
<div class="col-xs-6 col-sm-6 text-center">
<h2 id="connect"><u>Connect</u></h2>
<a target="_blank" href="https://www.instagram.com/balt_jitsu19/"><i class="fa fa-instagram fa-lg"></i></a>
<i class="fa fa-envelope fa-lg"></i>
<a target="_blank" href="https://www.freecodecamp.com/armbar1"><i class="fa fa-free-code-camp fa-lg"></i></a>
<a target="_blank" href="http://github.com/baltz1"><i class="fa fa-github fa-lg"></i></a>
</div>
<div class="col-xs-6 col-sm-6 text-center">
<h2 id="connect"><u>Made With</u></h2>
<i class="fa fa-html5 fa-2x"></i>
<i class="fa fa-css3 fa-2x"></i>
<img src="https://png.icons8.com/icons8/ios7/32/" title="Icons8" width="32" height="32">
<img src="https://png.icons8.com/gimp/ios7/25/" title="GIMP" width="25" height="25">
</div>
</div>
</div>
You have too many quotes in your div tag after text-center. Change it to:
<div class="col-xs-6 text-center col-sm-6" >
you cot some of these " too much
try
<div class="col-xs-6 text-center col-sm-6">
instead of
<div class="col-xs-6 text-center" "col-sm-6">
About extra quotes already was written (class="col-xs-6 text-center" "col-sm-6")
But one more point, Bootstrap4 hasn't col-xs-* class, instead it's col-* class for extra small screens!
You need to write <div class="col-6 text-center">
class col-sm-6 nothing changes, because Bootstrap mobile first!
Bootstrap4 docs
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 -->