How Do I Center <h4> Elements Under Images?

How Do I Center <h4> Elements Under Images?
0

#1

I’m trying to make a tribute page for Harry Potter, and I want to put a few images and put references under them. I also want to center the references under the images. How could I get the “Harry Potter Wiki” link to go under the image to the right and ““ursulakm”'s Flickr” to go under the left image? I also want them each centered under their respecive images.
My Un-finished Tribute Page Draft



<body>
  <div class="container-fluid">
    
  <header>
    <h1 class="text-center text-primary"><strong>HARRY POTTER</strong></h1>
    <div class="row">
      <div class="col-xs-5">
      </div>
      <div class="col-xs-4">
        <button class="btn btn-default firstButton">Click me to explain Harry!</button>
      </div>
      <div class="col-xs-3">
      </div>
    </div>
  </header>
    
   <div class="main">
     <!--Images-->
     <div class="row">
       <div class="col-xs-1">
       </div>
       <div class="col-xs-4">
        <a href="https://www.flickr.com/photos/[email protected]/2683374495" target="_blank"><img id="img1" src="https://c2.staticflickr.com/4/3184/2683374495_f2984286e2.jpg" alt="Harry and Hermione together while it's snowing"/></a>
       </div>
       <div class="col-xs-1">

       </div>
       <div class="col-xs-4">
         <a href="http://harrypotter.wikia.com/wiki/Main_Page" target="_blank"><img class="img2" src="http://res.cloudinary.com/dongd23/image/upload/v1511305498/Harry-Potter-Wizarding-World-Weekly_rjb5yy.jpg" alt="Ron Weasly on the left, Harry on the right, and Hermione is right to the left of Harry. The background is of a dark sky with a blue hint." /></a>
       </div>
       <div class="col-xs-1">
       </div>
     </div>
     <!--References-->
     <div class="A">
      <a href="https://www.flickr.com/photos/[email protected]/2683374495" target="_blank"><h4>"ursulakm"'s Flickr</h4></a>
     </div>
     <div class="B">
      <a href="http://harrypotter.wikia.com/wiki/Main_Page" target="_blank"><h4>Harry Potter Wiki</h4></a>
     </div>
  </div>
    
</body>

$(document).ready(function(){
  $(".firstButton").click(function(){
    $("h1").html("<h4><em>The boy who shouldnt've lived but did because love or something. Click me to revive Harry!</em></h4>").click(function(){
      $("h1").html("<strong>HARRY POTTER</strong>");
    });
    $(".firstButton").click(function(){
      $("h1").html("<h4><em>The boy who shouldnt've lived but did because love or something. Click me to revive Harry!</em></h4>");
    });
  });
});

h1 {
  font-size: 450%;
}

#img1 {
  border-radius: 40%;
  height: 310px;
  width: 480px;
  margin-top: 30px;
}

.img2 {
  height: 307px;
  width: 483px;
  margin-top: 30px;
  border-radius: 40%;
}

.A, .B {
  display: inline-block;
}

#2

Bootstrap has some helper classes to help you achieve what you are willing to do:

thumbnail and caption.

You can nest your image as follow:

<div class="col-xs-4">
  <div class="thumbnail">
    <!-- your image or link or whatever goes here-->
    <div class="caption">
      <!-- your caption goes here, a p, header or whatever you like -->
    </div>
  </div>
</div>

This structure will help you with the positioning and alignment of text/image.

Then you can do any sort of manipulation to your caption as you want, like for example toggling a hide/show class after a button click.

Hope it helps :slight_smile: