"CSS Snippets"
Bootstrap 4.1.1 Snippet by md-ataur

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row mt-4">
<div class="social-bar col-md-4">
<ul>
<li><a href="#"><span><i class="fab fa-facebook-f"></i></span></a></li>
<li><a href="#"><span><i class="fab fa-twitter"></i></span></a></li>
<li><a href="#"><span><i class="fab fa-pinterest-p"></i></span></a></li>
<li><a href="#"><span><i class="fab fa-instagram"></i></span></a></li>
</ul>
</div><!-- Social Icons -->
<div class="search_bar col-md-4">
<form>
<input type="text" placeholder="Search...">
<button class="search_button"><span><i class="fas fa-search"></i></span></button>
</form>
</div><!-- Search -->
<div class="pagination col-md-4">
<a href="#">«</a>
<a href="#">1</a>
<a class="active" href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/a91a27e46f.js" crossorigin="anonymous"></script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* Social Icon Start */
.social-bar ul {
padding: 0;
}
.social-bar ul li{
margin: 0;
list-style: none;
display: inline-block;
}
.social-bar ul li a{
display: flex;
position: relative;
justify-content: center;
align-items: center;
outline: none;
width: 40px;
height: 40px;
text-decoration: none;
}
.social-bar ul li a span {
color: #fff;
font-size: 18px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 2px);
height: calc(100% - 2px);
border-radius: 100%;
background: #404040;
text-align: center;
}
.social-bar ul li a span:hover {
background: #6ea2d8;
transition: 0.3s;
color: #fff;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Full Calendar

Questions / Comments: