I try to build a landing page using bootstrap.
I created a section with icon and tags.
but the text in p and h3 tags look like this
here is code for section:
<section id="process" class="process">
<div class="container-fluid container-fluid-max">
<div class="row text-center py-5 ">
<div class="col-12 pb-4">
<h2 class="text-red">Lorem, ipsum dolor.</h2>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="col-12 col-sm-6 col-lg-3 pl-12 pr-12 ml-13 mr-13">
<span class="fa-stack fa-2x">
<i class="fas fa-book"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="col-12 col-sm-6 col-lg-3">
<span class="fa-stack fa-2x">
<i class="fas fa-school"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="col-12 col-sm-6 col-lg-3">
<span class="fa-stack fa-2x">
<i class="fas fa-school"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="col-12 col-sm-6 col-lg-3">
<span class="fa-stack fa-2x">
<i class="fas fa-school"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</div>
</div>
</section>
i want to mage text be in one or 2 lines.
Correct you code, you have doubles of blocks width class="col-12 col-sm-6 col-lg-3", do like this
<section id="process" class="process">
<div class="container-fluid container-fluid-max">
<div class="row text-center py-5 ">
<div class="col-12 pb-4">
<h2 class="text-red">Lorem, ipsum dolor.</h2>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<span class="fa-stack fa-2x">
<i class="fas fa-book"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<span class="fa-stack fa-2x">
<i class="fas fa-school"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<span class="fa-stack fa-2x">
<i class="fas fa-school"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<span class="fa-stack fa-2x">
<i class="fas fa-school"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</div>
</section>
This is because you have declared columns inside columns.
<div class="col-12 col-sm-6 col-lg-3">
<div class="col-12 col-sm-6 col-lg-3">
----
</div>
</div>
In the above code, 2nd div will be taking 3 columns space of 1st div in large screens(col-lg-3) and 6 columns space in small screens(col-sm-6). It won't take complete column width of 1st div
Related
I am following this BootStrap 5 Crash Course: https://www.youtube.com/watch?v=4sosXZsdy-s. This end-result website is: https://www.frontendbootcampdemo.com
In it, there's a part where Cards are used. The problem I am seeing is that if the text length differs, the cards do not align properly. Here is the HTML for that:
<section class="p-5">
<div class="container">
<div class="row text-center g-4">
<div class="col-md">
<div class="card bg-dark text-light">
<div class="card-body text-center">
<div class="h1 mb-3">
<i class="bi bi-laptop"></i>
</div>
<h3 class="card-title mb-3">Virtual</h3>
<p class="card-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iure, quas quidem possimus dolorum esse eligendi?
</p>
Read More
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-secondary text-light">
<div class="card-body text-center">
<div class="h1 mb-3">
<i class="bi bi-person-square"></i>
</div>
<h3 class="card-title mb-3">Hybrid</h3>
<p class="card-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iure, quas quidem possimus dolorum esse eligendi?
</p>
Read More
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-dark text-light">
<div class="card-body text-center">
<div class="h1 mb-3">
<i class="bi bi-people"></i>
</div>
<h3 class="card-title mb-3">In Person</h3>
<p class="card-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iure, quas quidem possimus dolorum esse eligendi?
</p>
Read More
</div>
</div>
</div>
</div>
</div>
</section>
I have tried adding h-100 to the card-body. The problem is that, while all the cards keep the same height, the buttons are not aligned at the bottom.
How do I keep the cards at the same height and keep the buttons aligned at the bottom?
Thank you!
You can play around with flex CSS. Let me demo to you by using back your code.
add .h-100 to .card
add .d-md-flex and .flex-column to .card-body
add .flex-grow-1 to .card-text
Voila~ My method is just demonstratte one of the method to achieve what you want but still it is depends on what you want the layout to become in different screen sizing at the end.
You can refer this page for full capability of flexbox for Bootstrap 5.
Hope it helps.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<section class="p-5">
<div class="container">
<div class="row text-center g-4">
<div class="col-md">
<div class="card bg-dark text-light h-100">
<div class="card-body text-center d-md-flex flex-column">
<div class="h1 mb-3">
<i class="bi bi-laptop"></i>
</div>
<h3 class="card-title mb-3">Virtual</h3>
<p class="card-text flex-grow-1">
Lorem, ipsum dolor sit amet consectetur.
</p>
Read More
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-secondary text-light h-100">
<div class="card-body text-center d-md-flex flex-column">
<div class="h1 mb-3">
<i class="bi bi-person-square"></i>
</div>
<h3 class="card-title mb-3">Hybrid</h3>
<p class="card-text flex-grow-1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
Read More
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-dark text-light h-100">
<div class="card-body text-center d-md-flex flex-column">
<div class="h1 mb-3">
<i class="bi bi-people"></i>
</div>
<h3 class="card-title mb-3">In Person</h3>
<p class="card-text flex-grow-1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iure, quas quidem possimus dolorum esse eligendi?
</p>
Read More
</div>
</div>
</div>
</div>
</div>
</section>
I have problems with center. I want to center icon and text on the same line with Bootstrap but its not working good. I am beginner here so I dont know much. Wanted this: Example https://i.stack.imgur.com/prSlD.png
My code what i have tried:
<section class="container-fluid bg-dark text-center">
<h2>WHY US</h2>
<div class="d-flex align-items-center">
<img class=" me-3" src="img/icon.png"style="width:40px" alt="">
<h5 class="mb-0">FAST DELIVERY </h5>
</div>
</section>
Try this , I think this will work
<section class='container-fluid text-center'>
<h2>WHY US</h2>
<div class='d-flex align-items-center w-100 justify-content-center'>
<img
class='me-3'
src='img/icon.png'
style='width:40px'
alt=''
/>
<h5 class='mb-0'>FAST DELIVERY </h5>
</div>
</section>
Try this one
<div class="container-fluid">
<div class="d-flex flex-column align-items-center">
<h2>WHY US ?</h2>
<div class="d-flex align-items-center gap-2">
<i class="fa-solid fa-circle-check"></i>
<h5 class="mb-0">Lorem ipsum dolor sit amet ,consectetur</h5>
</div>
<div class="d-flex align-items-center gap-2">
<i class="fa-solid fa-circle-check"></i>
<h5 class="mb-0">Lorem ipsum dolor sit amet ,consectetur</h5>
</div>
<div class="d-flex align-items-center gap-2">
<i class="fa-solid fa-circle-check"></i>
<h5 class="mb-0">Lorem ipsum dolor sit amet ,consectetur</h5>
</div>
<div class="d-flex align-items-center gap-2">
<i class="fa-solid fa-circle-check"></i>
<h5 class="mb-0">Lorem ipsum dolor sit amet ,consectetur</h5>
</div>
</div>
I have use font awesome icon you can replace it with your image tag.Hope that work for you :)
I have a Bootstrap 4 grid that has one column that is 9 units and one column that is 3 units but the 9 unit column is not taking up 3/4 of the page width as it should.
The html looks like this:
.features-image2 {
max-width: 140px;
min-width: 140px;
width: 140px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="services" class="container-fluid text-center">
<div class="row text-center">
<div class="col-sm-9 ">
<div class="row">
<div class="col-sm-3">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-heart logo-small"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-lock logo-small"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-3">
<span class="glyphicon glyphicon-leaf logo-small"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-certificate logo-small"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-wrench logo-small"></span>
<h4 style="color:#303030;">HARD WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
<div class="col-sm-3 ">
<img class="col-sm-3 features-image2" src="http://placehold.it/140x140">
</div>
</div>
</div>
The screen looks like this (the table should take up 9 columns 3/4 of screen width but it doesn't):
The effect I am trying to achieve is to centre both the table and the image both vertically and horizontally in the col-3
There are a few issues with your layout...
Use 3 col-sm-4 to consume 1/3 of the col-sm-9
Dont use the col-sm-12 class on the image
Use flexbox and min-height on the container to center vertically
Change col-sm-9 to col-sm-8 offset-sm-1 to center horizontally (optional)
Demo http://www.codeply.com/go/DbV50b96vz
<div id="services" class="container-fluid text-center d-flex">
<div class="row text-center w-100 align-items-center">
<div class="col-sm-8 offset-sm-1">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-heart logo-small"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-lock logo-small"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-leaf logo-small"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-certificate logo-small"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-wrench logo-small"></span>
<h4 style="color:#303030;">HARD WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
<div class="col-sm-2 text-center">
<img class="features-image2" src="//placehold.it/500x800">
</div>
</div>
</div>
There is a few issues with your implementation:
1st: why did you put those tags? they are unnecessary
2nd: I
think it is better to make image a background image of the block, not
just put it inside.
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css';
.features-image2 {
/*max-width: 140px;
min-width: 140px;
width: 140px;*/
}
.block-left{
height: 500px;
background: red;
}
.block-right{
height: 500px;
background: blue;
background-image: url("https://images-na.ssl-images-amazon.com/images/M/MV5BMjMxMzg3MDI5NV5BMl5BanBnXkFtZTcwOTAxODc0Ng##._V1_UY317_CR31,0,214,317_AL_.jpg");
background-repeat: no-repeat;
background-size: cover;
}
<div id="services" class="container-fluid text-center">
<div class="row text-center">
<div class="col-sm-9 block-left">
<div class="row">
<div class="col-sm-3">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-heart logo-small"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-lock logo-small"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<span class="glyphicon glyphicon-leaf logo-small"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-certificate logo-small"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-wrench logo-small"></span>
<h4 style="color:#303030;">HARD WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
<div class="col-sm-3 block-right">
</div>
Can Anyone help making this list layout responsive for different screen-size, using media query? Currently, it is a fluid layout that is adjusting as per screen size. I need suggestion on using media query with it.
My original code is at https://jsfiddle.net/7qsp1k0o/2/
.item.list-group-item {
float: none;
width: 100%;
background-color: #fff;
margin-bottom: 10px;
}
.item.list-group-item .list-group-image {
margin-right: 10px;
}
.item.list-group-item .thumbnail {
margin-bottom: 0px;
}
.item.list-group-item .caption {
padding: 9px 9px 0px 9px;
}
.item.list-group-item:before,
.item.list-group-item:after {
display: table;
content: " ";
}
.item.list-group-item img {
float: left;
}
.item.list-group-item:after {
clear: both;
}
.list-group-item-text {
margin: 0 0 11px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div id="products" class="row list-group ">
<div class="item col-xs-4 col-lg-4 list-group-item">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/400X250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
Activity title</h4>
<p class="group inner list-group-item-text">
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Charge : $21.000</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="#">Apply Now</a>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-lg-4 list-group-item">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/400X250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
Activity title</h4>
<p class="group inner list-group-item-text">
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Charge : $21.000</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="#">Apply Now</a>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-lg-4 list-group-item">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/400X250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
Activity title</h4>
<p class="group inner list-group-item-text">
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Charge : $21.000</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="#">Apply Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Edit: Added desired result.
I want that text should not flow below the image, Rather the whole thing (image and box) should scale down to fit the screen size.
Styling is based on the creativity, however this might help you..
<div class="container">
<div class="row">
<!-- BEGIN PRODUCTS -->
<div class="col-md-3 col-sm-6 col-xs-12">
<span class="thumbnail">
<img src="http://placehold.it/500x400" alt="...">
<h4>Product Tittle</h4>
<div class="ratings">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<hr class="line">
<div class="row">
<div class="col-md-6 col-sm-6">
<p class="price">$29,90</p>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success right" > BUY ITEM</button>
</div>
</div>
</span>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<span class="thumbnail">
<img src="http://placehold.it/500x400" alt="...">
<h4>Product Tittle</h4>
<div class="ratings">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<hr class="line">
<div class="row">
<div class="col-md-6 col-sm-6">
<p class="price">$29,90</p>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success right" > BUY ITEM</button>
</div>
</div>
</span>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<span class="thumbnail">
<img src="http://placehold.it/500x400" alt="...">
<h4>Product Tittle</h4>
<div class="ratings">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<hr class="line">
<div class="row">
<div class="col-md-6 col-sm-6">
<p class="price">$29,90</p>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success right" > BUY ITEM</button>
</div>
</div>
</span>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<span class="thumbnail">
<img src="http://placehold.it/500x400" alt="...">
<h4>Product Tittle</h4>
<div class="ratings">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<hr class="line">
<div class="row">
<div class="col-md-6 col-sm-6">
<p class="price">$29,90</p>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success right" > BUY ITEM</button>
</div>
</div>
</span>
</div>
<!-- END PRODUCTS -->
</div>
</div>
And the css code
h4{
font-weight: 600;
}
p{
font-size: 12px;
margin-top: 5px;
}
.price{
font-size: 30px;
margin: 0 auto;
color: #333;
}
.right{
float:right;
border-bottom: 2px solid #4B8E4B;
}
.thumbnail{
opacity:0.70;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.thumbnail:hover{
opacity:1.00;
box-shadow: 0px 0px 10px #4bc6ff;
}
.line{
margin-bottom: 5px;
}
#media screen and (max-width: 770px) {
.right{
float:left;
width: 100%;
}
}
I have downloaded a bootstrap theme:
Info: http://startbootstrap.com/template-overviews/stylish-portfolio
Demo: http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio
On the page 'our services', it shows 4 circles with font-awesome icons. I have added a 2 more circles and font-awesome icons to that. But i only added 2... So on the page, its kinda awkward, a whole line of circles and icons, then a smaller line of just 2 right under the other circles/icons.. I want their to be 3 on each line and to be centered.
I looked through the css code, but I can't find anything. Here is the code
.service-item {
margin-bottom: 30px;
}
/* Callout */
.callout {
display: table;
width: 100%;
height: 400px;
color: #fff;
background: url(../img/callout.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
<!-- Services -->
<!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
<section id="services" class="services bg-primary">
<div class="container">
<div class="row text-center">
<div class="col-lg-10 col-lg-offset-1">
<h2>Our Services</h2>
<hr class="small">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-cloud fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-compass fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flask fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-shield fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
Columns add up to 12 so 4 columns at md-3 you want 6 columns at md-4.
If you inspect the document you'll see this common Bootstrap markup structure:
<div class="row">
<div class="col-md-3 col-sm-6">
...
</div>
<div class="col-md-3 col-sm-6">
...
</div>
<div class="col-md-3 col-sm-6">
...
</div>
<div class="col-md-3 col-sm-6">
...
</div>
</div>
This results in the icons being arranged 2 to a row for mobile, and 4 to a row at larger screen sizes. You'll need to modify the template files per the Bootstrap grid docs to this:
<div class="row">
<div class="col-xs-4">
...
</div>
<div class="col-xs-4">
...
</div>
<div class="col-xs-4">
...
</div>
<div class="col-xs-4">
...
</div>
<div class="col-xs-4">
...
</div>
<div class="col-xs-4">
...
</div>
</div>
This would result in each icon section taking one-third of the width of the row, and then they'd wrap to a new line.
You could also beat it into submission with CSS overrides, but I wouldn't recommend it.