Bootstrap Snippet Media object with simple line icons on Bootstra using HTML CSS Bootstrap

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
<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">
      <div class="col-sm-4 col-xs-6">
          <div class="media">
            <a class="media-left media-middle" href="#">
           <img src="img/13.png">
            </a>
            <div class="media-body">
              <h4 class="media-heading">Do more beautiful stuff</h4>
             <p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate</p> 
            </div>
          </div>
        </div>
        <div class="col-sm-4 col-xs-6">
          <div class="media">
            <a class="media-left media-middle" href="#">
            <img src="img/14.png">
            </a>
            <div class="media-body">
              <h4 class="media-heading">Make your media object shine</h4>
           <p>   Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate </p>
            </div>
          </div>
        </div>
 
      <div class="col-sm-4 col-xs-6">
          <div class="media">
            <a class="media-left media-middle" href="#">
                <img src="img/15.png">
            </a>
            <div class="media-body">
              <h4 class="media-heading">Simple line icons are used</h4>
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
                       .media 
{
  padding-top: 40px;
}
.media a:hover, .media a:focus
{
  text-decoration: none;
  outline: none;
}
.media .media-left .icon 
{
  display: block;
  width: 80px;
  height: 80px;
  padding: 16px 6px;
  color: #f0f0f0;
  text-align: center;
  border-radius: 50%;
}
.media .media-left .icon::before
{
  font-size: 44px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Media object with simple line icons on Bootstra"
Bootstrap 4.1.1 Snippet by karimsharf12252

Related: See More

Questions / Comments:

"Media object with simple line icons on Bootstra" Bootstrap 4.1.1 Snippet by karimsharf12252

Related: See More

Questions / Comments:

"Media object with simple line icons on Bootstra"
Bootstrap 4.1.1 Snippet by karimsharf12252