CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3centering
manuel
manuel

Reputation: 105

center bootstrap img-thumbnail

The problem is img-thumbnail is not centering when I expand the screen. I would like why it does this because I believe I don't understand what the img-thumbnail does and how to fix it. I will attack my html and css code. I'm figured I was able to insert the 

classes="img-thumnail img-responsive center-block"

that solves my problem partially because I want the caption to be included in the thumbnail.

HTML CODE

 <div class="container-fluid">
      <div class="well outline">
      <h1 class="text-center">Ernest Miller Hemingway</h1>
      <h2 class="text-center">The man who made Pamplona famous</h2>
      <div class="img-thumbnail">
        <image src="http://www.ernesthemingwaycollection.com/_themes/hemingway/img/about-hemingway/galleries/02-20141010225753.jpg" alt="Hemingway with a cow" class="img-responsive">
        <div class="caption text-center">
          Ernest Hemingway laying down next to a cow that is used by bull fighters for training.       </div>
       </div>
      <div>
        <h3>Here is a timeline of Ernest Hemingway</h3>
        <div>
          <ul> 
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
          </ul>
          <p>"Courage is grace under pressure."</p>
          <p>- Ernest Hemingway</p>
        <div>
        <p>If you want to know more about Ernest Hemingway take a look at his <a href="#">wikipedia entry</a>.</p>
      </div>

        <!-- Figure out how to add the line that crosses tha page on bootstrap -->

      <p> Coded by Manuel Martin</p>

      </div>
    </div>

CSS CODE

h1 {
  font-size: 60px;
}

h2{
  font-size: 33px;
}

.outline{
  margin: 70px 70px;
}

Upvotes: 1

Views: 187

Answers (1)

Sagar Pednekar
Sagar Pednekar

Reputation: 334

It works see Add img-resposive and center-block class to image to CheckClick here! see

Upvotes: 1

Related Questions