Question 88693 in Html Question posted in
Some basic documentation can be found here.

How to Bootstrap a col-4 column with 3 images and text to put the respective texts on the top right of each image? – Html

I can’t create a simple one line column of these 3 images with text on the right of each of the images. I would like to replicate this format using Bootstrap Desired outcome..

  • How could I make each image smaller?
  • How could I put the with the

    next to each image on its right side?

I tried using {float: right} and {text-align:right} for the , and

in styles.css but it didn’t do the trick.

My code has a different format than the one I’m trying to achieve, with the images slightly too large and the text underneath instead of on the right of each image. Actual problem..

Here is my code:

<div class="row container justify-content-start third_row">
      <div class="col-4">
        <img src="assets/images/image-retro-pcs.jpg" alt="retro-pc">
        <h2>01</h2>
        <h4>Reviving Retro PCs</h4>
        <p>What happens when old PCs are given modern upgrades?</p>
      </div>
      <div class="col-4">
        <img src="assets/images/image-top-laptops.jpg" alt="top-laptops">
        <h2>02</h2>
        <h4>Top 10 Laptops of 2022</h4>
        <p>Our best picks for various needs and budgets.</p>
      </div>
      <div class="col-4">
        <img src="assets/images/image-gaming-growth.jpg" alt="gaming-growth">
        <h2>03</h2>
        <h4>The Growth of Gaming</h4>
        <p>How the pandemic has sparked fresh opportunities.</p>
      </div>
    </div>
Tags:

2

Answers


  1. 0

    I made a simple example of of of your cards.
    Here is HTML part of it:

      <div class="row container justify-content-start third_row item">
    <div class="col-4 d-flex flex-row">
      <img src="https://media.idownloadblog.com/wp-content/uploads/2020/10/iPhone-12-dark-black-wallpaper.png" alt="retro-pc">
        <div class="d-flex flex-column">
          <h2>01</h2>
          <h4>Reviving Retro PCs</h4>
          <p>What happens when old PCs are given modern upgrades?</p>
        </div>
    </div>
  </div>

    And a css:

    .item {
  height: 150px
}

.item img {
  height: 150px;
  margin-right: 10px;
}

    Explanation:

    1. i’ve added a class item to one of cards
    2. set a static height to it (you can adjust it later)
    3. set image height to a height of the wrapping container (item)
    4. wrapped rest of the content into a div with a class d-flex flex-column so it would render from top to bottom

    How it would look like

    Login or Signup to reply.
  2. 0 
    <div class="col-4 d-flex">
    <img width="200px" height="200px" src="assets/images/image-retro-pcs.jpg" alt="retro-pc">
    <div class="d-flex flex-column">
    <h2>01</h2>
    <h4>Reviving Retro PCs</h4>
    <p>What happens when old PCs are given modern upgrades?</p>
    <div>
  </div>

    you can use d-flex class for flex property of css, by default it sorts all items side by side ( it is flex-row as default ). If you add flex-column as class, it will sort items from top to bottom. To size image, you can add width and height attributes.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search