Tips for positioning text below an image using HTML and CSS

Hey there, I've been working on a website that needs to match this design:

https://i.sstatic.net/39bW3.png

This is an image of what I have completed so far:

https://i.sstatic.net/WyEC2.png

Here is the code I've written:

body {
            overflow-x: hidden;
          }
          .design {
            width: 771px;
            height: 568px;
            margin-left: 364px;
            margin-right: 365px;
            margin-top: 247px;
            margin-bottom: 200px;
          }
    
          .image1 {
            width: 138px;
            height: 92px;
            margin-top: 33px;
            margin-left: 24px;
            margin-right: 116px;
          }
    
          .image2 {
            width: 99px;
            height: 98px;
            margin-top: 35px;
            margin-left: 24px;
            margin-right: 81px;
          }
    
          .image3 {
            width: 79px;
            height: 90px;
            margin-top: 39px;
            margin-left: 25.7px;
            margin-right: 60px;
          }
 <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        ...
        </style>
      </head>
      <body>
        <header>
          <div class="row">
            <div class="col-6"></div>
            <div class="col">
              <div class="text-end">
                <img src="images/location.png" alt="" class="image1" />
                <img src="images/how.png" alt="" class="image2" />
                <img src="images/why.png" alt="" class="image3" />
              </div>
            </div>
          </div>
    
        </header>
        <img src="images/home.png" alt="" class="design" />
      </body>
    </html>

I've managed to position the images correctly but I'm struggling with adding text below each image. Bootstrap has also been integrated. Any tips on how to accomplish this would be greatly appreciated.

Thanks in advance.

htmlcssbootstrap-4

Answer №2

I made a few adjustments to your code. Consider trying something like this with the help of bootstrap :

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .design {
        width: 771px;
        height: 568px;
      }
    </style>
  </head>
  <body>
    <div class="d-block text-center">
    <img src="https://picsum.photos/200/300?random=4" class="design" alt=""  />
    <p class="text-center">Hello</p>
    </div>
  </body>
</html>

Answer №3

Have you tried exploring flexbox? It's not only easier to grasp but also fun to experiment with. I hope this is the information you were looking for. Check out the code snippet below:

.container{
  display:flex;
  flex-direction:row;
  justify-content:flex-end;
  padding:15px;
  flex-wrap:wrap;
}
img{
  width:100px;
  height:100px;
}
.cnt1, .cnt2, .cnt3{
  margin:15px;
  padding:0;
  display:flex;
  flex-direction:column; 
  text-align:center;
}
<div class="container">

<div class="cnt1">
<img src="https://i.postimg.cc/dQrHQVKX/download.jpg">
<h5>pic1</h5>
</div>

<div class="cnt2">
<img src="https://i.postimg.cc/dQrHQVKX/download.jpg">
<h5>pic1</h5>
</div>

<div class="cnt3">
<img src="https://i.postimg.cc/dQrHQVKX/download.jpg">
<h5>pic1</h5>
</div>

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for including rows based on the presence of an odd or even number of columns in the bootstrap grid

I am looking to display bootstrap grid columns within a row based on whether the number of columns is odd or even. In the code below, I have set up a for loop that will generate maps based on backend data. .component.html <div *ngFor="let map of ...

twitter-bootstrapbootstrap-4twitter-bootstrap-3angular-ui-bootstrapbootstrap-grid

Suggestions for resetting the input field IDs in a cloned div after deletion

In the given HTML code snippet, there is a <div> containing two input fields as shown below: <button type = "button" id = "add-botton" >Add Element </button> <div id = "trace-div1" class = "trace"> <h4><span>Trac ...

javascriptphpjqueryhtml

In Angular 15, CSS override configurations do not function as intended

Exploring the world of Angular is exciting, and I am a newcomer to it. Currently, I am tackling an innovative Angular 15 project that makes use of the Material library. My current predicament lies in the fact that none of the CSS overrides appear to be tak ...

cssangularangular-material

How can I stack two images on top of each other using z-index?

Within a div element, I have an image: <div class="full-width"> <img src="images/products/product1.jpg" /> </div> I am looking to introduce another image called frame.png, but not as a background image! <img src="images/products ...

htmlcssz-index

Jquery draggable droppable does not support displaying multiple divs simultaneously

I tried to implement the jquery ui draggable and droppable features to display 3 divs within a designated area. Below is the code snippet: --CSS: #content-1 { width: 200px; height: 100px; border: 1px solid red; display: none; } #content-2 { width: ...

javascriptjquerycss

In JavaScript, the addition and subtraction buttons may become disabled after nested lists are used

Recently, I embarked on a project to enhance the functionality of restaurant table items and implement value-saving features. Initially, everything worked smoothly with one item list. However, upon introducing a second list and attempting to manipulate it ...

javascripthtmlcsslistonclick

Another option for replacing <BR> tags with CSS styling

I am currently utilizing the br tag to insert line breaks in my website's faq section. Although the output is accurate, I'm exploring alternatives like implementing linebreak through CSS to enhance responsiveness. During my research, I came acros ...

htmlcss

Accessing a hyperlink within the existing page

How can I make a hyperlink in an HTML document that opens the linked document (link1.html) under the link on the same page? links.html: <body> <h3>Links</h3< <a href="link1.html">link1</a> </body> Desired out ...

html

Unveil a portal to the identical webpage

My apologies for my English skills... Could anyone advise me on how to display an image? Hello, I am looking for a way to have a small window open on my site when a user clicks on the zoom icon, where I can describe a product. Any guidance on the HTML co ...

jqueryhtmlcssbootstrap-4

Impact items without the need to individually assign a class to each item

Apologies if this question has already been answered elsewhere...I have been unable to find the solution, perhaps due to my lack of knowledge on how to phrase it. I am attempting to modify list items by setting a class for the ul, eliminating the need to ...

htmlcsshtml-lists

The interaction of a horizontal scroll bar on a CSS Grid layout triggers the appearance of a vertical scroll bar

I am facing a challenge with my HTML layout. In Chrome, when the horizontal scroll bar is visible, a vertical scroll bar also appears. However, in Firefox, everything works fine. This issue seems to be related to the height of the div not auto-scaling prop ...

htmlcsscss-grid

Using jQuery, wrap two specific HTML elements together

I am working with a set of elements: <div id="one">ONE</div> <div id="two">TWO</div> <div id="three">THREE</div> <div id="four">FOUR</div> <div id="five">FIVE</div> My goal is to wrap a DIV tag ...

jqueryhtmlcss

Animating several elements by toggling their classes

I'm struggling to implement smooth animations on this box. I've tried using 'switchClass' but can't seem to keep everything together. Any help would be greatly appreciated. Here is the code snippet for reference: <script src=" ...

javascriptjqueryhtmlcssanimation

Hamburger icon is failing to appear in the collapsed navbar for certain items

My React application is not displaying the items of the collapsed navbar when using the Bootstrap navbar for mobile responsiveness. Can anyone please suggest what might be wrong here? <!-- Bootstrap 4.1.3 library --> <link rel="stylesheet" href ...

htmljquerycssbootstrap-4

Challenges with creating a contact form using bootstrap modal

I'm facing an issue with a bootstrap modal contact form. It works fine on all browsers except for iPad/Safari. Can anyone help me figure out what's wrong? On iPad, the modal is positioned to the right and down the page instead of in the cente ...

javascriptjqueryhtmlcsstwitter-bootstrap

Remove the formatting on the entered text

Hi, I'm looking to change the style of my input text to a strike-through style. Can anyone help me with this? <input type="text" value="<del>Hello World!</del>" /> I would like my input text to look like this: ...

htmlcssbootstrap-4frontend

What can I do to prevent my HTML/CSS/jQuery menu text from shifting when the submenu is opened?

After encountering numerous inquiries regarding the creation of disappearing and reappearing menus, I successfully devised a solution that functions seamlessly on desktop and tablet devices. My approach involved utilizing the jQuery .toggleClass function w ...

jqueryhtmlcssmenu

How can I hover over multiple cells in a table?

Is there a way to change the color of multiple adjacent cells when hovering over one cell, and can this be done dynamically (so the number of adjacent cells that change color can vary)? Here is the code snippet: I'm using React to create a table wit ...

javascriptcssreactjsmaterial-ui

CSS techniques for aligning content

I am currently working on designing a website template, and I have encountered an issue with positioning three individual columns that contain blocks of content. My objective is to have the first block of content in each column start at the top of their re ...

htmlcsspositioning

Creating a List Item with Equal Height as Its Parent Container

<nav> <ul id="navUl"> <li> <div class="settingsDiv"> hey </div> </li> </ul> </nav> I am trying to adjust the height of the div element to match the height of the nav. My g ...

htmlcss