NotAnAmbiTurner NotAnAmbiTurner - 4 years ago 108
CSS Question

Center a `.img-responsive`, in a `.container-fluid` and `row`, in bootstap?

First, sorry for the noob question. I don't expect the answers here to add much to the 21st century's understanding of computer science, but I am grateful for the help of the community.

I have an image I'm trying to center in bootstap. It's in a

.container-fluid
, a
.row
, and a
.col-xs-6
with
.offset-xs-3
. The
<img...>
itself is
.img-responsive
. You can see the project on this codepen: http://codepen.io/NotAnAmbiTurner/pen/GrGmaq?editors=1000.

The image is not centering - I should be able to get an image that scales with the viewport width (a la SVG) and is in the middle of the page. I can't seem to manage that.

I'm wondering if it has something to do with the fact that I'm taking a "raw" image from dropbox as my
src
, that the image is a
.jpg
, or some combination? Then again, I'm a noob at this, so it's equally possible that there's just a typo somewhere I can't seem to find. I have been over the bootstrap docs, and various SO questions to no avail. The only solution I have found is removing the
<img...>
from the container and row, and assigning
... class="centered-block" ...
. Unless I'm fundamentally misapprehending something, however, (1) I shouldn't have to do that, and (2) rather than bashing through I'd like to understand what my conceptual error is in any case, for my own learning.

Thanks in advance! :)

PS - totally unrelated, but my
<a ...></a>
tags don't seem to be clickable. If anyone has any ideas there, that would be great too.

Answer Source

You're using classes from Bootstrap 3 but loading the stylesheet from Bootstrap 4; they aren't compatible across the board. img-responsive no longer exists as well as the col-xs-* classes. See Images and Grid Options.

Note: Your links won't work because they aren't valid HTML and you're also closing your h2 with an h3, validate your markup.

Working Example:

@media (max-width: 480px) {
  h1 {
    font-size: 5vmax;
  }
  h2 {
    font-size: 3.5vmax;
  }
  h3 {
    font-size: 2.5vmax;
  }
  li {
    font-size: 2.5vmax;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="jumbotron">

  <h1 class="text-primary">Dr. Clair Cameron Patterson</h1>

  <h2 class="text-secondary">The man who first learned the age of the Earth, and helped save a civilization from the dangers of its use of lead.</h2>

  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <img src="https://www.dropbox.com/s/91fw6aazyxzb178/image-for-codecamp-tribute-page.jpg?raw=1" alt="Cartoon Image of Clair Cameron Patterson at Congressional Hearing" class="img-fluid mx-auto d-block" style="padding:1.5vmin">
      </div>
    </div>
  </div>

  <h3>Academics</h3>
  <ul>
    <li>Undergraduate, Grinnell College</li>
    <li>PhD, University of Chicago</li>
    <li>Researcher, California Institute of Technology</li>
  </ul>

  <h3>Brief Timeline</h3>

  <ul>
    <li><strong>1956</strong>: found the earth to be 4.55 Billion years old using <a href="https://en.wikipedia.org/wiki/Lead%E2%80%93lead_dating">lead-lead dating</a> and
      <a href="https://en.wikipedia.org/wiki/Canyon_Diablo_(meteorite)">a fragment of a metorite that fell in Arizona</a>. This calculation has been largely undisturbed since.</li>
    <li><strong>1965</strong>: began campaign against lead in various products, especially gasoline, which at that time was emitting lead into the atmosphere.</li>
    <li><strong>1978</strong>: wrote a 78-page minority opinion as part of a National Research Council (NRC) panel stating that controls on lead in various products had to start immediately, including gasoline, food containers, paint, glazes, and water distribution
      systems.
    </li>
    <li>by the late <strong>1990s</strong>: levels of lead in Americans' blood has dropped by up to 80%. Though connections with Dr. Patterson's work are not clear, as the leading researcher in the area, and constant campaigner against the use of lead, it
      is likely he was a major antecedant of this change.</li>
  </ul>

</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download