"4up"
Bootstrap 3.3.0 Snippet by exigentinc

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 id="content8"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="icon"> <span class="fa fa-bookmark-o"></span> </div> <h3 class="title editContent">Ultimate Blocks - Awesome</h3> <p class="editContent">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum.</p> <div class="icon mt20"> <span class="fa fa-hourglass-start"></span> </div> <h3 class="title editContent">Ultimate Blocks - Awesome</h3> <p class="editContent">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum.</p> </div> <div class="col-md-6"> <div class="icon"> <span class="fa fa-bookmark-o"></span> </div> <h3 class="title editContent">Ultimate Blocks - Awesome</h3> <p class="editContent">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum.</p> <div class="icon mt20"> <span class="fa fa-hourglass-start"></span> </div> <h3 class="title editContent">Ultimate Blocks - Awesome</h3> <p class="editContent">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum.</p> </div> </div> </div> </div>
/*! CSS Used from: https://mianfolio.com/ultimateblocks/v2.1.3/elements/bundles/bootstrap.css */@media print { *,:after,:before { color: #000!important; text-shadow: none!important; background: 0 0!important; -webkit-box-shadow: none!important; box-shadow: none!important; } h3,p { orphans: 3; widows: 3; } h3 { page-break-after: avoid; } } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } :after,:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } h3 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } h3 { margin-top: 20px; margin-bottom: 10px; } h3 { font-size: 24px; } p { margin: 0 0 10px; } .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width:768px) { .container { width: 750px; } } @media (min-width:992px) { .container { width: 970px; } } @media (min-width:1200px) { .container { width: 1170px; } } .row { margin-right: -15px; margin-left: -15px; } .col-md-6 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } @media (min-width:992px) { .col-md-6 { float: left; } .col-md-6 { width: 50%; } } .container:after,.container:before,.row:after,.row:before { display: table; content: " "; } .container:after,.row:after { clear: both; }/*! CSS Used from: https://mianfolio.com/ultimateblocks/v2.1.3/elements/bundles/style.css */::-moz-focus-inner { border: 0; padding: 0; } p { font-size: 16px; } h3 { font-size: 26px; } .mt20 { margin-top: 20px; }/*! CSS Used from: https://mianfolio.com/ultimateblocks/v2.1.3/elements/bundles/style-content.css */#content8 { padding: 40px 0; } #content8 .icon .fa { float: left; background-color: #f5f5f5; border-radius: 2px; padding: 15px; font-size: 24px; text-align: center; min-width: 60px; } #content8 p { overflow: hidden; font-size: 12px; padding: 0 25px; } #content8 h3 { text-transform: uppercase; margin-top: 0; } #content8 h3.title { text-transform: uppercase; margin-top: 0; padding: 0 25px; font-size: 22px; overflow: hidden; } @media (min-width:0px) and (max-width:481px) { #content8 .icon .fa { float: none; margin: 0 auto 10px auto; display: block; } }/*! CSS Used from: https://mianfolio.com/ultimateblocks/v2.1.3/elements/bundles/font-awesome.min.css */.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-bookmark-o:before { content: "\f097"; } .fa-hourglass-start:before { content: "\f251"; }/*! CSS Used fontfaces */@font-face { font-family:FontAwesome;src:url(https://mianfolio.com/ultimateblocks/v2.1.3/elements/bundles/fontawesome-webfont.eot?v=4.5.0);src:url(https://mianfolio.com/ultimateblocks/v2.1.3/elements/bundles/fontawesome-webfont.eot#iefix&v=4.5.0) format('embedded-opentype'),url(https://mianfolio.com/ultimateblocks/v2.1.3/elements/bundles/fontawesome-webfont.woff2?v=4.5.0) format('woff2'),url(https://mianfolio.com/ultimateblocks/v2.1.3/elements/bundles/fontawesome-webfont.woff?v=4.5.0) format('woff'),url(https://mianfolio.com/ultimateblocks/v2.1.3/elements/bundles/fontawesome-webfont.ttf?v=4.5.0) format('truetype'),url(https://mianfolio.com/ultimateblocks/v2.1.3/elements/bundles/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular) format('svg');font-weight:400;font-style:normal; }

Related: See More


Questions / Comments: