Label text facing positioning difficulties

Hey there!

I have a goal in mind:

https://i.stack.imgur.com/bnso9.png

This is what I currently have: http://codepen.io/KieranRigby/pen/QyWZxV. Make sure to view it in "Full page" mode.

label {
color: #6d6e70;
bottom: 0;
}
.img-row img {
    width: 100%;
}
.img-row {
  text-align: center;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container img-row">

  <div class="row">
    <div class="col-md-2 col-xs-12 col-sm-12 col-md-offset-1">
      <img id="img-1" class="img-responsive" src="http://i.imgur.com/ftaEZS9.png" />
      <label for="img-1">Make your essay</label>
    </div>
    <div class="col-md-2">
      <img id="img-2" class="img-responsive" src="http://i.imgur.com/7YUtBZk.png" />
      <label for="img-2">Upload your essay</label>
    </div>

    <div class="col-md-2">
      <img id="img-3" class="img-responsive" src="http://i.imgur.com/Hy84vQC.png" />
      <label for="img-3">Choose your pay</label>
    </div>
    <div class="col-md-2">
      <img id="img-4" class="img-responsive" src="http://i.imgur.com/tSqCUuO.png" />
      <label for="img-4">Mentors Check</label>
    </div>
    <div class="col-md-2">
      <img id="img-5" class="img-responsive" src="http://i.imgur.com/VmwzHFD.png" />
      <label for="img-5">Receive an email</label>
    </div>
  </div>
  <!-- /.row -->

</div>

Any ideas on how I can get the text labels to sit inline at the bottom?

htmlcsstwitter-bootstrap

Answer №1

Dribbble

To align your img and label on the baseline, apply absolute positioning as shown in this Example.

Updated CSS

.col-md-3 {
  height: 300px;
}
.col-md-3 img {
  position: absolute;
  bottom: 50px;
  width: 70%;
}
.col-md-3 label {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
}

This modification:

  • Sets a fixed height for your .col-md-3 containers
  • Positions the label at the very bottom of its parent .col-md-3
  • Moves the img element 50px above the bottom of its parent .col-md-3

The img width is adjusted to 70% for spacing between images.

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

Receiving the [object HTMLInputElement] on the screen rather than a numerical value

I have an input box where a user can enter a number. When they click a button, I want that number to be displayed on the page. However, instead of seeing the number, I am getting the output as [object HTMLInputElement]. Below is my TypeScript code: let qu ...

javascripthtmltypescriptfunction

Issue with PHP/MySQL registration page failing to save user information to database

As I work on developing my website that includes user registration and login functionality, I encountered an issue where the registration page was not loading properly. Initially, the registration process worked perfectly, but the next day, upon trying to ...

phphtmlmysql

Issues encountered in loading JavaScript with jQuery script

I am facing an issue with my jQuery script not loading correctly. When I click on the calculate button, nothing happens as expected. I made sure to copy and paste jQuery directly into the file for offline use, and also created a personal console due to res ...

javascriptjqueryhtmlcss

Click on the hyperlink to adjust the background size of an inline list item

I created a navigation bar using inline display for the li elements. I want my last column to have a defined height background. However, it is only displaying a background behind the name of the column. Here is the relevant section from style.css: #navi ...

htmlcssbackgroundhref

As soon as a key is pressed in tinyMCE, the tracking continues until reaching the conclusion of the initial <

I am attempting to capture, in real-time, the user input in the .content textarea and paste it into the .intro. I have tried the following code without success: //This code is specifically for tinymce, as I am using tinyMCE as a rich text editor for textb ...

javascriptjqueryhtmltinymce

Is there a way to showcase several items simultaneously on a bootstrap 5 carousel slide?

I currently have a bootstrap 5 carousel with controls that I want to modify. My goal is to create a slideshow where each slide displays 2 items, and I can scroll through one image at a time. Starting from here: https://i.sstatic.net/ROgoL.png And ending h ...

cssbootstrap-5

When using iOS, inserting an iFrame with a source URL (SRC) on a webpage will automatically open the URL

Currently facing a peculiar issue within a Cordova app, specifically on iOS. The scenario is: I have an HTML page with existing content. At a later stage, I fetch additional HTML from a remote source and inject it into the original HTML page. However, whe ...

javascripthtmlioscordovaiframe

What might be causing my direct descendant selector to not work as expected?

I'm struggling with my direct descendant selector. Let's analyze a straightforward example: .myDiv > table tr:first-child td { font-weight: bold; text-align: center; } <div class="myDiv"> <table style="width:100%"> < ...

htmlcsscss-selectorshtml-table

I would like the background image to perfectly fit the dimensions of the parent container

https://i.sstatic.net/PlCYU.png Is there a way to prevent the background image from overflowing and causing a horizontal scroll bar to appear? The layout of the page consists of two columns, with each column taking up 50% of the width. The left column con ...

htmlcssbootstrap-5

Bootstrap 4: In collapsed navbar, li items are shown horizontally beside navbar-brand

I've been troubleshooting this issue for hours. It seems like the navbar is not collapsing correctly in Bootstrap 4, causing the next list item to display to the right of the navbar-brand text instead of below it like the other items. <nav class=" ...

javascriptjquerycsshtmltwitter-bootstrap-4

Keeping datetimepicker current when a date is chosen - a guide

I am currently utilizing the datetimepicker plugin from xdsoft to enable users to select a booking date and time. Check out the documentation for more details. To manage bookings, I have set up a 'fechas' table in my database which stores inform ...

javascriptphphtmljquery

Struggling to create a mobile-friendly design

I've successfully created a dynamic world map using D3.js, but I need some guidance on making it responsive across various screen sizes. You can view the interactive world map here. Credentials to access the map: Username: DXLdemo Password: ...

htmlcssd3.jsresponsive-design

What steps should be taken to populate a grid row if a certain div element is not present?

I am currently using tailwindcss and have this specific HTML code snippet: REPL: https://play.tailwindcss.com/L8McFjGBVC <div class="grid grid-cols-12"> <div class="col-span-4 bg-red-300">1</div> <div class=&qu ...

htmlflexboxtailwind-csscss-grid

Tips for including or excluding a series of comma-delimited values from an input

HTML <div class="wrap_temi"> <ul class="list-inline list-unstyled"> <li class="list-inline-item"> <input type="checkbox" value="amici" autocomplete="off"> Amici </li> <li class="lis ...

javascriptjqueryhtml

Reposition picture "overlays" additional HTML components

I am struggling with rotating an image by clicking on a button as the image overlaps the buttons. Can anyone provide guidance on how to achieve this without overlapping? For reference, here is my code and an example: here (http://jsfiddle.net/jj03b17n/5/) ...

javascriptjqueryhtmlcssrotatetransform

Activate validation checks when the Div is loaded

I have a situation where I have multiple divs on my page, with only one visible at a time due to the use of an update panel. Within the third div, I need to implement validations using jQuery. <script src="http://ajax.aspnetcdn.com/ajax/jquery.valida ...

jqueryvalidationhtmlonload

Troubleshooting Flexbox: Content within a Flex Item is not displaying properly within a scrollable container

I recently embarked on converting one of my websites to flexbox and encountered an issue with vertical scrolling within a flex container. It appears that Firefox displays it correctly, while Chrome and Safari do not. You can check out the code here. . ...

cssgoogle-chromefirefoxflexbox

Resize the Bootstrap select element based on its contents

My HTML code includes a <select> element that is styled using Bootstrap 5. <div class="col-md-12"> <div class="mb-3"> <label asp-for="Schedule.Minutes" class="control-label"></l ...

htmlcsstwitter-bootstrapasp.net-corebootstrap-5

Obtain the chosen option from an HTML select element by utilizing JavaScript

This is my HTML snippet: <div id="detail"> <div class="d_left"> Page <strong>1</strong> of 107 </div> <div class="d_center"> <table> <tr> <td><a href="#">Previous&l ...

javascripthtml

Using the accordion class in Bootstrap 5 will disable the link functionality

When I click on a table row, it expands a hidden table row using the accordion classes. The clickable row also contains a link. In Bootstrap 4, the link was clickable but in Bootstrap 5, clicking the link triggers the accordion instead of following the lin ...

twitter-bootstrapbootstrap-4bootstrap-5