Aligning Images Horizontally Using Bootstrap?

HTML-CSS
1

Tell us what’s happening:
I am trying to align some images on the same row and have like 2 rows of 3 images. Should I be trying to align images using bootstrap the same way as we’ve done with buttons from one of the Bootstrap lessons?
I have created the div elements with class: container-fluid, row and a variety of use of the column class (col-md-4 or something). I get no horizontal alignment of my images. I was able to get them to align horizontally at one point (using only CSS), but they overlapped and responded poorly to the changing of the window size so I would like to use bootstrap if I can.

Here is a clip of my code for this issue.
Your code so far

<div class="container-fluid" id="goldsrc"><h4>GOLDSRC</h4>
<!--games--> 
       <div class="row">
          <div class="col-xs-6">
      <img id="half-life" class="img-responsive game-img-size img-fluid" style="100%" src="https://images.launchbox-app.com/1c547bc4-7e1a-43b5-9a56-46445006d91d.jpg">
       <div class="caption">1998</div>
         </div><!--col-->
<!--new img-->         
         <div class="col-xs-6">
      <img id="team-fortress-classic" class="game-img-size img-fluid" src="https://wiki.teamfortress.com/w/images/thumb/2/2b/TFC_Boxart.png/250px-TFC_Boxart.png.jpeg">
      <div class="caption">1999</div>
          </div><!--col-->
<!--new img-->            
           <div class="col-xs-6">
      <img id="counter-strike" class="game-img-size img-fluid" src="https://m.media-amazon.com/images/I/519N6WDWP3L._SX342_.jpg">
      <div class="caption">2004</div>
          </div><!--col-->
      </div><!--row-->

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36

Challenge: Build a Tribute Page

Link to the challenge:

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.