<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
</head>
<style>
#import url('https://fonts.googleapis.com/css2?family=Jost:wght#300;400;500;600;700;800&display=swap');
#import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");
#categories{
text-align: center;
}
#categories h1{
margin-bottom:5rem;
}
.category-blocks h3{
font-size: x-large;
margin: 1rem 0;
}
.category-blocks{
background-color: lightgreen;}
.category-blocks p{
width: 80%;
margin: 1rem 0;
margin: auto;
text-align: justify;
margin-bottom: 1rem;
}
.category-blocks .btn-primary{
border-radius: 2rem;
background-color: transparent;
border:2px solid #03bf72;
padding: 0.7rem 1.8rem;
color: #03bf72;
}
.category-blocks .fas{
color: #03bf72;
font-size: 1.5rem;
}
</style>
<body>
<section id="categories">
<div class="row">
<div class="col-md-4 category-blocks">
<div class="col-md-12">
<i class="fas fa-bullhorn"></i>
<h3>Effective Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum inventore architecto magni? Sed, laudantium aperiam?</p>
<button class="btn btn-primary">Learn more</button>
</div>
</div>
<div class="col-md-4 category-blocks">
<div class="col-md-12">
<i class="fas fa-bullhorn"></i>
<h3>Effective Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum inventore architecto magni? Sed, laudantium aperiam?</p>
<button class="btn btn-primary">Learn more</button>
</div>
</div>
<div class="col-md-4 category-blocks">
<div class="col-md-12">
<i class="fas fa-bullhorn"></i>
<h3>Effective Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum inventore architecto magni? Sed, laudantium aperiam?</p>
<button class="btn btn-primary">Learn more</button>
</div>
</div>
</div>
</section>
</body>
</html>
I need to set 3 blocks side by side in a page, so I applied 'col-md-4', unfortunately I was not getting space in middle of them even after I tried all the possible ways. Please help me out.
Why dont you do it with display: flex or maybe display: grid, with that you can do a gap: X and that will do the separation.
NOTE: the gap: X, can be diferent if you are using flex or grid, you can find it in here:
flex - https://coryrylan.com/blog/css-gap-space-with-flexbox
grid - https://developer.mozilla.org/es/docs/Web/CSS/gap
Related
How can I add this icon from fontawesome and put it over this picture?
I want it to be aligned in the center of the picture.
<i class="fas fa-play-circle"></i>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="d-flex border-bottom mb-1 mt-3">
<!-- Media -->
<ul class="list-unstyled video-list-thumbs row">
<li class="col-lg-3 col-sm-4 col-xs-6">
<a href="#">
<img src="https://curso-gratis.com.mx/wp-content/uploads/2021/03/logo-bootstrap.png" alt="C" class="img-responsive" height="130px" />
</a>
</li>
</ul>
<!-- Content -->
<div class="ml-2">
<h5 class="mb-0 ml-2">
Lesson 1 : Lorem ipsum dolor sit.
</h5>
<span class="ms-1 fs-6 text-muted h6 ml-3">Duration : 15min</span>
<p class="ml-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora, ratione rem vitae officia quo laudantium nemo molestiae! Esse, sed ipsam.</p>
</div>
</div>
</body>
</html>
Problem is solved and responsive Design now is properly achieved.
You just update your CSS with the following Code
.img-box{
position: relative;
min-width: 100%;
height: 100%;
display: block;
}
.icon-box{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
min-height: 100%;
}
.icon-box i{
font-size: 29px;
color: #fff;
}
#media(max-width: 767px){
.main-box {
flex-direction: column;
align-items: center;
}
}
And update your HTML with following
<div class="d-flex border-bottom mb-1 mt-3 main-box">
<!-- Media -->
<ul class="list-unstyled video-list-thumbs row">
<li>
<a href="#" class="img-box">
<div class="icon-box">
<i class="fas fa-play-circle"></i>
</div>
<img src="https://curso-gratis.com.mx/wp-content/uploads/2021/03/logo-bootstrap.png" alt="C" class="img-responsive" height="130px" />
</a>
</li>
</ul>
<!-- Content -->
<div class="ml-2">
<h5 class="mb-0 ml-2">
Lesson 1 : Lorem ipsum dolor sit.
</h5>
<span class="ms-1 fs-6 text-muted h6 ml-3">Duration : 15min</span>
<p class="ml-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora, ratione rem vitae officia quo laudantium nemo molestiae! Esse, sed ipsam.</p>
</div>
</div>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Abhijeet John Kujur.
</div>
I am developing a website and I dont know why, my left divs with ease-out blinks always, but the right not! I dont want them to blink and I cant resolve this insue.
I saw, that this changes with the page size, like on full screen happens, when we reduce a little bit its fine, and reduce more happens again! I think its a bug.
Code from divs:
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
<div class="service-item">
<div class="service-icon">
<i class="fa fa-laptop-code"></i>
</div>
<div class="service-text">
<h3>Web Development</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
.service {
position: relative;
width: 100%;
padding: 45px 0 15px 0;
}
.service .service-item {
position: relative;
margin-bottom: 30px;
display: flex;
align-items: center;
box-shadow: inset 0 0 0 0 transparent;
transition: ease-out 0.5s;
}
.service .service-item:hover {
box-shadow: inset 800px 0 0 0 #EF233C;
}
.service .service-icon {
position: relative;
width: 150px;
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #EF233C;
background: #ffffff;
}
.service .service-icon i {
position: relative;
font-size: 60px;
color: #EF233C;
transition: .3s;
}
.service .service-item:hover i {
font-size: 75px;
}
.service .service-text {
position: relative;
width: calc(100% - 120px);
padding: 0 30px;
}
.service .service-text h3 {
margin-bottom: 10px;
font-size: 20px;
font-weight: 600;
transition: 1s;
}
.service .service-text p {
margin: 0;
font-size: 16px;
transition: 1s;
}
.service .service-item:hover .service-text h3,
.service .service-item:hover .service-text p {
color: #ffffff;
}
#media (max-width: 575.98px) {
.service .service-text h3 {
font-size: 16px;
margin-bottom: 5px;
}
.service .service-text p {
font-size: 14px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DevFolio - Developer Portfolio Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Free Website Template" name="keywords">
<meta content="Free Website Template" name="description">
<!-- Favicon -->
<link href="img/favicon.ico" rel="icon">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<!-- CSS Libraries -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
</head>
<!-- Service Start -->
<div class="service" id="service">
<div class="container">
<div class="section-header text-center wow zoomIn" data-wow-delay="0.1s">
<p>What I do</p>
<h2>Awesome Quality Services</h2>
</div>
<div class="row">
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.0s">
<div class="service-item">
<div class="service-icon">
<i class="fa fa-laptop"></i>
</div>
<div class="service-text">
<h3>Web Design</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.2s">
<div class="service-item">
<div class="service-icon">
<i class="fa fa-laptop-code"></i>
</div>
<div class="service-text">
<h3>Web Development</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.4s">
<div class="service-item">
<div class="service-icon">
<i class="fab fa-android"></i>
</div>
<div class="service-text">
<h3>Apps Design</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.6s">
<div class="service-item">
<div class="service-icon">
<i class="fab fa-apple"></i>
</div>
<div class="service-text">
<h3>Apps Development</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Service End -->
</body>
</html>
There you have my code html just with services and css! Now all are blinking when they are under each other! And I dont know why
Gif of what happens:
Why is the background image in showCase[after header] not appearing. As, the image is in the same directory as I mentioned in the css url(''). I've done each and everything I can do. But, I think there is something wrong in my css code before showCase class.
How I can show background image in showCase class[after header].
/* Global Things */
body{
padding:0;
margin:0;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5em;
}
.container{
width : 80%;
margin : auto;
overflow:hidden;
}
ul{
margin:0;
padding:0;
list-style-type:none;
}
/* Header */
header{
background-color: darkorange;
padding : 5px;
margin : 0px;
}
header .logoDesign{
font-size:20px;
float:left;
}
header ul li {
float: left;
display:inline-block;
margin: 0 20px 0 20px;
}
header ul a {
text-decoration: none;
font-size:16px;
color:white;
display: inline-block;
}
header ul a:hover {
text-decoration:underline;
font-size:18px;
font-weight: bold;
color:red;
padding:5px;
transition: .5s;
}
header nav{
float:right;
padding-top: 30px;
}
header .logoDesign .lighter{
color: #FFDF00;
}
/* ShowCase Design*/
.showCase{
text-align: center;
padding-top: 50px;
padding-right: 170px;
padding-bottom:30px;
padding-left:170px;
background: url('./images/showcase.jpg') no-repeat;
min-height:150px;
line-height: 1.5em;
}
.showCase h1{
line-height:1em;
text-transform: uppercase;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Welcome | Faizan Corporation </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- For Logo and links.-->
<header>
<div class = "container">
<div class = "logoDesign" >
<h1> <span class = "lighter">Faizan</span> Industries </h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</header>
<!-- Let's Try to design Showcase. -->
<section class = "showCase" >
<h1>Affordable Professional Websites</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque est vel vulputate interdum. Nulla vel ante sit amet tortor dignissim fermentum a vel nunc.</p>
</section>
<!-- Now Newsletter Section. -->
<div class = "container">
<div class = "subButton">
<form action="nothing.php">
<p>Subscribe to our Newsletter</p>
<input type="email" placeholder="Enter You Email">
<button action = "submit" > Submit </button>
</form>
</div>
</div>
<!--small Section.-->
<div class = "container">
<section class = "portfolio" >
<ul>
<li> <img src="images/logo_brush.png" alt="Graphic Design">
<h2>Graphics Designing</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</li>
<li> <img src="images/logo_html.png" alt="Graphic Design">
<h2>HTML 5 Markup</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</li>
<li> <img src="images/logo_css.png" alt="Graphic Design">
<h2>CSS and CSS 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</li>
</ul>
</section>
<footer>
<p>Faizan Industries, Copyright © 2019 </p>
</footer>
</div>
</body>
</html>
I've tried this in jsFiddle
Background is applied. The issue likely is that your image url is incorrect.
Open Network tab in chrome, then load the page. You will likely see that url failing to load.
If you replace it with a placeholder.com url, such as https://via.placeholder.com/150 you can see the placeholder image being loaded.
How is possible to fill-in the height of a row with a cell in the following >>JSFiddle:
.x { height: 50px; }
.row { background: #eee; }
.row>:nth-child(odd) { background: lightblue; }
.row>:nth-child(even) { background: pink; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-3">fill height v</div>
<div class="col-xs-9"> <div class="x"> unknown height </div> </div>
</div>
PS. in order to be mobile compatible and also IE 11, I can't use flex
add .row{display: flex}
.x { height: 50px; }
.row {background: #eee; display: flex;}
.row>:nth-child(odd) {
background: lightblue;
}
.row>:nth-child(even) {
background: pink;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-3 cell">fill height v</div>
<div class="col-xs-9 cell">
<div class="x"> unknown height </div>
</div>
</div>
width absolute position jsfiddle.net/kth9vqhf
with display: table jsfiddle.net/kth9vqhf/1
with jQuery https://jsfiddle.net/kth9vqhf/3/
Using jQuery you can calculate the height of .x on the fly and set that as the minimum height for the cell.
$('.col-xs-3.cell').css("min-height", $('.x').height() + "px");
.x {
height: 50px;
}
.row {
background: #eee;
}
.row>:nth-child(odd) {
background: lightblue;
}
.row>:nth-child(even) {
background: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-3 cell">fill height v</div>
<div class="col-xs-9 cell">
<div class="x"> unknown height </div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fill Row Height </title>
<style>
.WrapperRow{float: left; display: table; table-layout: fixed; vertical-align: top; width: 100%;}
.WrapperRow > div{display: table-cell; float: none; vertical-align: top; padding: 10px;}
.bgblue{background-color: blue;}
.cell.bgblue{width: 30%;}
.bgpink{background-color: pink;}
</style>
</head>
<body>
<div class="WrapperRow">
<div class="cell bgblue">
</div>
<div class="cell bgpink">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ipsa natus, vel non earum, distinctio iusto reprehenderit alias quisquam possimus, at qui nostrum ad enim totam repudiandae consectetur eius iste? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum illum, aut sunt molestias tempora amet maxime ipsum? Vero animi beatae, dicta? Ut repudiandae fugit alias quasi esse culpa. Facere, dolore?
</div>
</div>
</body>
</html>
I have a problem with aligning icons inside the sidebar. I want to have a few social icons in right-bottom corner of a sidebar.I tried using margins but it looks horrible and ugly.
Here's an example in JSBin (please resize the window to at least 1000px).
html, body, .container-fluid, .row {
height: 100%;
}
body {
background-color: #F2F0F1;
}
.sidebar {
background-color: tomato;
}
#media (min-width: 992px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
display: block;
background-color: tomato;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
}
ul li {
margin: 0 auto;
line-height: 50px;
list-style: none;
text-align: right;
margin-right: 20px;
}
ul li a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
a:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, 0.4);
padding: 4px;
color: tomato;
}
.hi {
margin-right: 20px;
text-align: right;
color: rgba(0, 0, 0, 0.4);
}
.content {
padding: 2% 4% 2% 4%;
color: rgba(0, 0, 0, 0.4);
background-color: #F2F0F1;
}
#fixedbutton {
position: fixed;
top: 0px;
right: 0px;
}
.sidebar-bottom-wrap {
position: absolute;
bottom: 60px;
right: 40px;
max-width: 200px;
}
.icons-sidebar-unit {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
vertical-align: baseline;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PRZEMO PORTFOLIO</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- SIDEBAR -->
<div class="container">
<div class="row">
<div class="col-md-3 sidebar"><div class="foto">
<img src="pic.png" class=" img-responsive img-circle " alt="pic">
</div>
<h3 class="hi">Hi! I am <strong>Mike</strong> ,a front-end developer.</h2>
<!-- MENU -->
<ul>
<li>ABOUT</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
<!-- footer ICONS -->
<footer>
<!--Social icons-->
<div class="social-icons-sidebar">
<a title="Follow us" href="https://twitter.com/uiueux" class="icons-sidebar-unit">
<i class="fa fa-twitter-square"></i>
</a>
<a title="Follow us" href="https://www.facebook.com/Uiueux/" class="icons-sidebar-unit">
<i class="fa fa-facebook-square"></i>
</a>
<a title="" href="#" class="icons-sidebar-unit">
<i class="fa fa-google-plus-square"></i>
</a>
<a title="" href="https://www.youtube.com/playlist?list=PLJkj39CuqdNz7WTWdHTbSrOvQL03sIZa-" class="icons-sidebar-unit">
<i class="fa fa-youtube-square"></i>
</a>
</div>
<div class="copyright">
Copyright © 2017. Designed by
<a href=http://www.uiueux.com>wwwS</a>.
</div><!--End copyright-->
<!--
<i class="fa fa-linkedin A " aria-hidden="true"></i>
<i class="fa fa-github" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
-->
</div>
</footer>
<!-- MAIN -->
<div class="col-md-9 col-md-offset-3 content">
<h2 id="about">ABOUT ME</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
<div class="container-fluid">
<h2 id="projects">RECENT PROJECTS</h2>
<div class="row">
<div class="col-md-9">
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 ">
<img src="1.png" alt="" class="img-responsive img-thumbnail">
</div>
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 ">
<img src="2.png" alt="" class="img-responsive img-thumbnail">
</div>
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 ">
<img src="3.png" alt="" class="img-responsive img-thumbnail">
</div>
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 ">
<img src="4.png" alt="" class="img-responsive img-thumbnail">
</div>
</div>
</div>
</div>
<br>
SKILLZ:<br>
HTML 5 - PRO <br>
CSS 3 - PRO <br>
JS - NOOB <br>
JQUERY - NOOB<br>
SASS - MAD <br>
GRUNT - GOD
<hr>
<h2 id="contact">CONTACT</h2>
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<!-- Text input-->
<div class="form-group">
<label class="col-md-12 control-label" for=""></label>
<div class="col-md-12">
<input id="" name="" type="text" placeholder="name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-12 control-label" for=""></label>
<div class="col-md-12">
<input id="" name="" type="text" placeholder="email" class="form-control input-md">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-12 control-label" for=""></label>
<div class="col-md-12">
<textarea class="form-control" id="" name="">message</textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-12 control-label" for="singlebutton"></label>
<div class="col-md-12">
<button id="singlebutton" name="singlebutton" class="btn btn-default">send message</button>
</div>
</div>
</fieldset>
</form>
<img src="qrcode1.png" class="img-responsive center-block" alt="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temp eu fuglorem Lorem ipsuat nulla pariatur. Exceeu fugiat it in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui r sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The easiest way is probably to absolutely position them .social-icons-sidebar { position: absolute; bottom: 0; right: 0; } https://jsbin.com/petixugodu/1/edit?html,css,output
You could also use flexbox. Make the sidebar a column flex container, set the footer to flex-grow: 1 so that it extends to the bottom of the sidebar, put the social icons at the bottom by using margin-top: auto and order: 1 then align them to the right with text-align: right or align-self: flex-end https://jsbin.com/tukiqonase/edit?html,css,output
To align your icons to the right, try:
.icons-sidebar-unit {
float: right;
}
Also, while looking at your code, I noticed you had a height / width set to 30px on your icon units. If this was to increase the size of the icons themselves, try:
.icons-sidebar-unit {
font-size: 30px;
}
A lot of people get confused on this one because it seems like icons should be styled like images, but they are actually styled as fonts.