ブートストラップを使用して背景が灰色のテキストボックスの左側に画像を表示するにはどうすればよいですか？

Question

ブートストラップを使ってテキストの背後に灰色の背景を持つテキストボックスの左側にどうすればいいですか？私はテキストボックスの横にイメージを横に置くことによって、以下のスクリーンショットでこのレイアウトを複製しようとしています。数字3と4は画像、6と5はテキストです。

私は使ってみるべきですか？

<div class="container"> 
    <div class="jumbotron"> 
    <h1>Test</h1> 
    <p>Test123</p> 
    </div> 
    <p>This is some text.</p> 
    <p>This is another text.</p> 
</div> 

正しい場所にテキストを入力した後、下の図のように画像をどのように左に置くことができますか？

Answer 1

以下のコードは、あなたが探しているものと考えられます。あなたがブートストラップにプライマーを使用できるように思えます。私はw3schoolsのこのリンクをチェックアウトします。それは無料で、簡潔に説明し、ポイントの説明には、すぐにあなたを立ち上げて実行します。一方https://www.w3schools.com/bootstrap/

、これを起動します。

<div class="container"> 
     <div class="row" style="background-color: #aaa;"> <!-- You do not have to use inline styling. Better to add this styling as a class --> 
      <div class="col-md-4"> 
       <!-- image here --> 
      </div> 
      <div class="col-md-8"> 
       <!-- text here --> 
      </div> 
      <div class="col-md-4"> 
       <!-- image here --> 
      </div> 
      <div class="col-md-8"> 
       <!-- text here --> 
      </div> 
     </div> 
    </div>