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

I need to condense my layout from three columns to just two columns in HTML

The html code for "Date Accessed" is meant to be in one column as a header, while the actual dates should be in another column, but somehow they are all appearing in a single column. I am having trouble figuring out why. <!DOCTYPE html> {% load stati ...

htmlcss

Certain HTML code on a webpage is currently inaccessible to me

Struggling with web scraping on a webpage due to inaccessible code. The part of the page's code that remains out of reach is only accessible through an anchor tag, with the following html: <a class="MTLink" href="#d192633539-47" title="example" &g ...

htmlweb-scraping

Alter the font color of text using JavaScript in an HTML document

I am struggling to change the title color in my HTML code below, but the text color does not seem to be changing. How can I make this adjustment? /** * Generate a HTML table with the provided data */ Highcharts.Chart.prototype.generateTable ...

javascripthtmlcolors

Tips for preventing extra whitespaces and line breaks from being added to the render tree in Blazor applications

Consider the code snippet below <div> @for (int i = 0; i < 10; i++) { <span class="@classes[i]">@i</span> } </div> The desired output is (with each character styled differently) 01234567890 Howev ...

htmlcssrazorblazor

Updating the CSS: Using jQuery to modify the display property to none

I am facing an issue with displaying an element that is defined as display:none in CSS. I tried to use the .show() function in jQuery, but it's not working as expected. Here's the code snippet: CSS .element { position: absolute; display: no ...

javascriptjqueryhtmlcsssettimeout

Creating a visually appealing background image using WordPress and PHP

Currently struggling with adjusting the width of an image that's set as a background in Wordpress. The text is perfectly centered, but the background image remains full size and I want it to match the container size... You can view the image at the t ...

phphtmlcsswordpressimage

Ways to locate CSS file path within a web browser

Currently, I am focusing on the theme development aspect of Magento2. After compiling the .less file, I noticed that two css files are generated: styles-l.css styles-m.css Despite trying to inspect the element and view the applied CSS in the browser, i ...

cssmagento2

Using jQuery to update the CSS class for all li icons except for the one that is currently selected

Utilizing Font Awesome Icons within the li elements of a ul Challenge When a user clicks on the user icon, the color changes from black to yellow. If the user clicks on another icon, that one also turns yellow. Is there a way to remove the existing yell ...

jquerycssfont-awesome

Extracting HTML elements between tags in Node.js is a common task faced

Imagine a scenario where I have a website with the following structured HTML source code: <html> <head> .... <table id="xxx"> <tr> .. </table> I have managed to remove all the HTML tags using a library. Can you suggest w ...

javascripthtmlnode.js

Creating a Multi-Step Checkout System for a WooCommerce Store

Struggling to make my code work - it just won't fire up. I suspect there might be a version-related issue that I'm overlooking. I'm currently using the default checkout setup from the WooCommerce plugin. Instead of buttons, text is showing ...

phphtmljquerywordpresswoocommerce

Ideal C++ tool for displaying a non-changing HTML page

I am looking to develop a simple cross-platform C++ project for displaying HTML pages, like an application that showcases help materials. These pages may contain images and styles (CSS embedded in HTML). I am researching the best way to incorporate the fol ...

htmlc++cssqtzooming

Prevent users from inputting multiple minus signs by setting the input type to number and disabling the

Is there a way to prevent the input type number from accepting "--" as input? I am looking for a solution to disable this behavior. Additionally, the input field seems to allow for various incorrect formats like: -12-12 -- -121- 23-323- ...

htmlreactjs

Is there a way to retrieve the content of a WordPress page minus the HTML tags?

$content = fetch_content(); var_dump($content); <figure class="wp-block-gallery columns-1 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="http://www ...

phphtmlwordpresstags

I am interested in displaying or hiding a table depending on a specific condition in MVC 4

Looking at this MVC 4 Razor code snippet: <h4>You have @Model.Count() items up for sale currently. @Html.ActionLink("Add a new listing by clicking here", "Create")</h4> <br /> <table style="visibility: hidden"> .... I am seeking ...

asp.net-mvchtmlasp.net-mvc-4

The jQuery panel slider magically appears when you click the button, but refuses to disappear

One issue I am facing on my webpage involves a button that triggers a right panel to open using the jquery and modernizr frameworks. The button is positioned at the far right of the screen. When clicked, it slides to the left along with the panel it reveal ...

javascriptjqueryhtmlcss

The toggle checkbox feature in AngularJS seems to be malfunctioning as it is constantly stuck in the "off"

I am trying to display the on and off status based on a scope variable. However, it always shows as off, even when it should be on or checked. In the console window, it shows as checked, but on the toggle button it displays as off Here is the HTML code: ...

javascripthtmlcssangularjstwitter-bootstrap

Top method for tracking changes in numerous textboxes

I'm currently working on a form that is organized into tabs using jQuery. Each tab contains different elements of the form related to a specific section, with a save button at the bottom of each tab. I want to implement a feature where a warning icon ...

jqueryhtmlcssinputtabs

Animating a dotted border path in SVG for a progress bar effect

I am attempting to create an animation for a dotted SVG circle that resembles a progress bar, where it fills itself over a duration of 3 seconds. However, I am facing difficulties in achieving this effect with the dotted border. The current code I have doe ...

javascriptjquerycssanimationsvg

The subfolder and HTML page have identical names and are not functioning properly

I recently updated my webpage by removing the .html extensions using htaccess. My website includes a page named "blog.html" and a subfolder called "blog" with additional html pages inside. RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ ...

html.htaccessurlmod-rewritesubdirectory

Attempting to achieve the effect where the entire row of a table changes color when the mouse hovers

I'm attempting to create a gradient effect for an entire row in a table when the mouse hovers over any cell within that row. Despite using what I believe is the correct CSS code, nothing changes upon mouseover (even though the original gradient appear ...

csshover