2列をブートストラップに接近させる方法

Question

2列の間に大きな隙間を広げて、テキストの幅を狭くしようとしていますが、それでもすべてが中央に配置されています。

これは非常にばらばらに広がっていて、私は実際にはテキストの幅だけでなく最小限にすべきです。私はプログラムのテキストの下になるように左の画像の右隅と右の画像の左隅を取得しようとしたいと思います。ここ

私のコードです：

<div class="container"> 
    <div class="row col-md-12"> 
     <p class="text-center program-head">Programs</p> 
     <div class="col-md-6"> 
      <div class="text-center"> 
       <img alt="" class="resize-image" id="image1" src= 
       "/wp-content/themes/creativeforces/images/april2.jpg"> 
       <p class="program-text">Creative Writing</p> 
       <p>This will help unleash a childs mind throught their own 
       words. The imagination has no limit to a young childs mind. 
       this is future forever in life yes hold me 
       now</p><button class="btn btn-primary">Learn More</button> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="text-center"> 
       <img alt="" class="resize-image" id="image2" src= 
       "/wp-content/themes/creativeforces/images/kids.png"> 
       <p class="program-text">Improv &amp; Comedy</p> 
       <p>This improv class is a fun and non-stressful way to 
       encourage children and young adults to communicate and 
       build confidence! Students will learn how to think on their 
       feet when expanding on an idea, story, or debate. These 
       classes are inspired by <a href= 
       "http://www.zipzapzopimprov.com/">Zip Zap 
       Zop</a></p><button class="btn btn-primary">Learn 
       More</button> 
      </div> 
     </div> 
    </div> 
</div> 

任意の助けいただければ幸いです！

Answer 1

パディングはどうですか？

Like this

.col-md-6 p { padding: 0 45px; } 

Answer 2

変更クラスクラスを持って、両方のdivタグ= 'COL-MD-6' クラス= 'COL-MD-4' とクラス= 'COLとそれらの間の1つのdivタブを置きます以下のように同様にここに

-MD-2' と書きテキスト：

<div class="container"> 
    <div class="row col-md-12"> 
     <p class="text-center program-head">Programs</p> 
     <div class="col-md-4"> 
      <div class="text-center"> 
       <img alt="" class="resize-image" id="image1" src= 
       "/wp-content/themes/creativeforces/images/april2.jpg"> 
       <p class="program-text">Creative Writing</p> 
       <p>This will help unleash a childs mind throught their own 
       words. The imagination has no limit to a young childs mind. 
       this is future forever in life yes hold me 
       now</p><button class="btn btn-primary">Learn More</button> 
      </div> 
     </div> 
     <div class="col-md-2"> 
       your text here 
     </div> 
     <div class="col-md-4"> 
      <div class="text-center"> 
       <img alt="" class="resize-image" id="image2" src= 
       "/wp-content/themes/creativeforces/images/kids.png"> 
       <p class="program-text">Improv &amp; Comedy</p> 
       <p>This improv class is a fun and non-stressful way to 
       encourage children and young adults to communicate and 
       build confidence! Students will learn how to think on their 
       feet when expanding on an idea, story, or debate. These 
       classes are inspired by <a href= 
       "http://www.zipzapzopimprov.com/">Zip Zap 
       Zop</a></p><button class="btn btn-primary">Learn 
       More</button> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 3

あなたは... 1つのユニットと5台の両方に狭いことで

012を最初の列を相殺することができ

<div class="container"> 
    <div class="row col-md-12"> 
     <p class="text-center program-head">Programs</p> 
     <div class="col-md-5 col-md-offset-1"> 
      <div class="text-center"> 
       <img alt="" class="resize-image" id="image1" src= 
       "//placehold.it/300"> 
       <p class="program-text">Creative Writing</p> 
       <p>This will help unleash a childs mind throught their own 
       words. The imagination has no limit to a young childs mind. 
       this is future forever in life yes hold me 
       now</p><button class="btn btn-primary">Learn More</button> 
      </div> 
     </div> 
     <div class="col-md-5"> 
      <div class="text-center"> 
       <img alt="" class="resize-image" id="image2" src= 
       "//placehold.it/300"> 
       <p class="program-text">Improv &amp; Comedy</p> 
       <p>This improv class is a fun and non-stressful way to 
       encourage children and young adults to communicate and 
       build confidence! Students will learn how to think on their 
       feet when expanding on an idea, story, or debate. These 
       classes are inspired by <a href= 
       "">Zip Zap 
       Zop</a></p><button class="btn btn-primary">Learn 
       More</button> 
      </div> 
     </div> 
    </div> 
</div> 

http://codeply.com/go/KRPiGeNSpm