How to align this structure in bootstrap

Question

Hi, I am developing part of the page as shown in the image below.

I heard about the offset, but I did not use the offset. I tried with some code below.

<div class="row">
   <div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-4"></div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
            <div class="text-center service-text">
               <h1>our best services</h1>
               <h2>business valuation</h2>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus leo orci.</p>
                <img src="images/ser_icon_1.png">
             </div> 
        </div>
  <div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-4"></div>
 </div>

But this causes the div to align to the left.

How can I make an empty space between the left and right side ?. Thanks in advance.

Answer 1

<div class="row">
        <div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4 col-xs-12">
            <div class="text-center service-text">
               <h1>our best services</h1>
               <h2>business valuation</h2>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus leo orci.</p>
                <img src="images/ser_icon_1.png">
             </div> 
        </div>
 </div>

That should do it. Here's a snippet with this code working with bootstrap. Your two divs around the main are useless, if you want to give the div an offset, give it both classes col-md-offset-xand col-md-x.