CODEWITHSUNDEEP
htmlcsstwitter-bootstrapweb
Iz M
Iz M

Reputation: 403

Styling bootstrap rows & columns html

I'm trying to style this html file so that I have a panel on the side (Members), and pictures on the right of that, lined up in rows of three. My questions are:

  1. How do I make it so that the bootstrap columns containing the images are actually to the right of the bootstrap panel?

  2. There is some space between the rows of the images?

Below is my code and how it appears on my browser: 

 <div class="container">
   <div class="row">
      <div class="col-sm-9 col-md-3 col-lg-3">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h2 class="panel-title">Members</h2>
          </div>
          <div class="panel-body">
            <h3 class="panel-title">Faculty</h3>
            <h3 class="panel-title">Students</h3>
            <h3 class="panel-title">Alumni</h3>
          </div>
        </div>
      </div>
  </div>
      <!-- vvvvvvvvvvvvvv-FACE OF THE ORG-vvvvvvvvvvvvvv -->
  <div class="col-lg-9">
    <div class="row">
      <div class="col-sm-9 col-md-3 col-lg-3">
        <img class="image-rounded" src="img/left2.jpg">
      </div>

      <div class="col-sm-9 col-md-3 col-lg-3">
        <img class="image-rounded" src="img/right.jpg">
      </div>

      <div class="col-sm-9 col-md-3 col-lg-3">
        <img class="image-rounded" src="img/right1.jpg">
      </div>

      <div class="col-sm-9 col-md-3 col-lg-3">
        <img class="image-rounded" src="img/left2.jpg">
      </div>

      <div class="col-sm-9 col-md-3 col-lg-3">
        <img class="image-rounded" src="img/right.jpg">
      </div>

      <div class="col-sm-9 col-md-3 col-lg-3">
        <img class="image-rounded" src="img/right1.jpg">
      </div>

    </div>

     </div>
   </div>

enter image description here

Thank you for any and all help! :)

Upvotes: 0

Views: 3677

Answers (1)

Virendra Nagda
Virendra Nagda

Reputation: 658

<div class="container">
   <div class="row">
      <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h2 class="panel-title">Members</h2>
          </div>
          <div class="panel-body">
            <h3 class="panel-title">Faculty</h3>
            <h3 class="panel-title">Students</h3>
            <h3 class="panel-title">Alumni</h3>
          </div>
        </div>
      </div>

      <!-- vvvvvvvvvvvvvv-FACE OF THE ORG-vvvvvvvvvvvvvv -->
  <div class="col-sm-6">
    <div class="row">
      <div class="col-sm-3">
        <img class="img-rounded" src="img/left2.jpg">
      </div>

      <div class="col-sm-3">
        <img class="img-rounded" src="img/right.jpg">
      </div>

      <div class="col-sm-3">
        <img class="img-rounded" src="img/right1.jpg">
      </div>
    </div>
       <div class="row">
      <div class="col-sm-3">
        <img class="img-rounded" src="img/left2.jpg">
      </div>

      <div class="col-sm-3">
        <img class="img-rounded" src="img/right.jpg">
      </div>

      <div class="col-sm-3">
        <img class="img-rounded" src="img/right1.jpg">
      </div>

    </div>

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

try this code.I edit the code. and img-rounded css give padding or margin for space.

Upvotes: 2

Related Questions