中央揃えのコンテンツをブーツラップ4の左に揃えておきます。

Question

私はカードセンターにテキストを置いていますが、テキストを中央に残したいが、左に真っすぐにしたい。 ここで私はhave.Below何のイメージがあるが、私はテキストセンターテキストを中心にカードを含む列にクラスを持っている

を望むものである、しかし、インクルードは同じではありませんライン。ここにコードは です。

<div class="container"> 
<p>Discover</p> 
<hr > 
<div class="row"> 

    <div class="col-sm-4 text-center" > 
     <div class="card "> 
      <div class="card-block "> 
       <div class="row"> 
        <div class="col-5"> 
         <img class="thumbnail" src="./assets/images/foodposter.jpg"> 
        </div> 
        <div class="col-7"> 
         <p style="font-weight: bold;">Snail master</p> 
         <!-- <p><i class="material-icons" style="font-size: 0.8em;">info_outline</i>In Food and Drink</p> --> 
         <p class="cardfont p-2"> 
          <i class="material-icons" style="font-size: 1em;">today</i> 12 sept 2017</p> 
         <p class="cardfont p-2"> 
          <i class="material-icons" style="font-size: 1em;">location_on</i>TRM,Thika Road</p> 
         <p class="cardfont p-2"> 
          <i class="material-icons" style="font-size: 1em;">today</i> KSH.1200</p> 
         <p class="cardfont p-2">_</p> 
         <button type="button" class="btn btn-outline-primary btn-2 " style="font-size: 0.8em;line-height: 80%;">Get Tickets</button> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="col-sm-4" > 
     <div class="card"> 
      <div class="card-block"> 
       <div class="row"> 
        <div class="col-5"> 
         <img class="thumbnail" src="./assets/images/comedyposter.jpg"> 
        </div> 
        <div class="col-7">mate</div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="col-sm-4" > 
     <div class="card"> 
      <div class="card-block"> 
       <div class="row"> 
        <div class="col-5"> 
         <img class="thumbnail" src="./assets/images/midnightposter.jpg"> 
        </div> 
        <div class="col-7">mate</div> 
       </div> 
      </div> 
     </div> 
    </div> 







</div> 

Answer 1

最も簡単な方法は、
代わりテキスト中心のテキスト左を使用し、それにそれが中央

でそれを作るために、左右均等に新しいクラスと余裕を与えることです

<div class="row"> 
<div class="col-4"> 
Image here 
</div> 
<div class="col-8 text-left"> 
<div class="xyz"> 
Snail master<br> 
aaaaaa<br> 
aaaaaaa 
</div> 
</div> 

.xyz{ 
margin:0px 30px; as per your wish to make class in centre. 
} 

またはオフセットを使用できます