Is the media-heading situated at the base of the picture?

Wondering if it's possible to create a horizontal list of images with the image-heading under each image using Bootstrap 3. I couldn't find any information on this in the documentation.

<h5 class="media-heading pull-left">One</h5>
<img class="media-object pull-left" src="{% static "/img/one.jpg" %}" alt="..." />
<h5 class="media-heading pull-left">Two</h5>
<img class="media-object pull-left" src="{% static "/img/two.jpg" %}" alt="..." />
<h5 class="media-heading pull-left">Three</h5>
<img class="media-object pull-left" src="{% static "/img/three.jpg" %}" alt="..." />
csstwitter-bootstraptwitter-bootstrap-3

Answer №1

Check out this solution:

<div class="thumbnail">
      <a href="/w3images/fjords.jpg">
        <img src="/w3images/fjords.jpg" alt="Fjords" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>

Answer №2

Check This Out:

div {
    width: 100px;
    display: inline-block;
    position: relative;

}

img {
    width: 100%;
}

h5 {
    position: absolute;
    bottom: -20px;
    width: 100%;
    margin:0;
    text-align: center;
    background: #CCC;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div>
    <h5 class="media-heading pull-left">One</h5>
    <img class="media-object pull-left" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg" alt="..." />
</div>
<div>
    <h5 class="media-heading pull-left">Two</h5>
    <img class="media-object pull-left" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg" alt="..." />
</div>
<div>
    <h5 class="media-heading pull-left">Three</h5>
     <img class="media-object pull-left" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg" alt="..." />  
</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

AngularJS and CSS: A Guide to Effortlessly Toggle Sliding List Elements

I am in the process of developing a drop-down menu that can be clicked. Using my custom AngularJS directive, I have successfully implemented functionality to load menu items dynamically. While I have made significant progress, I have encountered a small i ...

javascriptcssangularjstypescript

Accessibility issues detected in Bootstrap toggle buttons

I've been experimenting with implementing the Bootstrap toggle button, but I'm having an issue where I can't 'tab' to them using the keyboard due to something in their js script. Interestingly, when I remove the js script, I'm ...

javascriptjqueryhtmltwitter-bootstraptoggle

Is there a way to manipulate the placement of an image within a div using CSS?

Teaching myself HTML has been quite the journey. Right now, I'm in the process of building a website purely for its aesthetic appeal, and I seem to be hitting a roadblock with the CSS/div element. As of now, it appears like this. When the h1 is remove ...

htmlcsspositioningdivider

Tips for eliminating extra blank space under the footer on an HTML website

Just beginning my journey with bootstrap and I am encountering an issue on my website where there is space after the footer when resizing to a mobile size. I've tried setting margin: 0; padding: 0; but it hasn't resolved the problem. Here's ...

htmlcsstwitter-bootstrap

Creating a chic look for your conditional statement: If Else Styling

While it may not be possible to directly style PHP code, you can definitely style the HTML output that PHP generates. I'm curious if there's a way for me to apply styles to the output of an IF ELSE statement. if ($result != false) { print "Y ...

phphtmlcss

When the page is launched, creating a rectangle at a precise location on the area map

I have successfully implemented the maphilight jquery plugin with hover and onclick features from here. It works great. Is there a way to automatically draw a rectangle on the areamap image at a defined position and size when the page loads, without requi ...

phpjqueryhtmlcssshapes

Can someone show me how to code a function that transforms my paragraph into an image when I hover over it?

< p id="p1" onmouseover="this.style.color='transparent';flipPara()"> < p id="p2" onmouseover="spookyPara()"> function spookyPara() { document.getElementById("p1").attribute = "All_Images/ghost.png"; } I currently have this code sn ...

javascripthtmlcssimagefunction

What is the best way to incorporate a div below an image in Ubergallery?

I have integrated the jquery ubergallery into my website, and I am trying to add a new div below the main photos for additional content such as share buttons and comments. I tried using the code that worked with colorbox, but since ubergallery uses colorbo ...

phpjqueryhtmlcsscolorbox

Troubleshooting CSS Animation Failure in Internet Explorer 11

My mouse over / mouse out animation works perfectly in Firefox and Chrome, but it's not functioning in IE. Can anyone suggest why this might be happening when it was working fine before? var actual = 1; var over = 0; var over2 = 0; function scrol ...

javascriptcsscss-animations

Centered at the bottom of the screen lies a Bootstrap button

As a beginner with bootstrap, I am currently exploring new concepts and experimenting with different features. One thing I am attempting is to center a bootstrap button at the bottom of the screen. Here is my current code: .bottom-center { position: a ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-3

Ways to troubleshoot an unusual margin issue in a static column of an HTML table

I have been exploring various resources to create an HTML table with a fixed first column using CSS only. Despite my efforts, the fixed column is consistently appearing lower than the rest of the content, and I'm unsure why. Check out the code I&apos ...

htmlcss

Tips for perfectly aligning all elements in a row within a card design

Hi there, I'm trying to figure out how to align the content of this card in a single row instead of stacked on top of each other. Here's the code snippet: <div class="container"> <form onSubmit={submitHandler}> ...

cssreactjsmaterial-ui

Writing and altering content within the <code> element in Chrome is unreliable

Utilizing a WYSIWYG Editor with contenteditable functionality allows users to input "code snippets" using a <code> element. Here is an example: <div contenteditable="true"> <p> This is a paragraph with an <code>inline s ...

javascripthtmlcsscontenteditable

Displaying a Facebook tab exclusively within the Facebook platform

Hello Everyone I have been utilizing woobox to generate Facebook tabs for my pages and I have a query: I have created an HTML page on my personal server, which I am using as a Facebook tab (created with the help of woobox). Now, is there a method whe ...

phphtmlcssfacebook

What steps should I take to prevent my <mat-card> from expanding whenever messages are shown in Angular 9?

I have a <mat-card> containing a login form on my page. However, when error messages are displayed, the vertical size of the <mat-card> changes and I need it to remain the same. Is there a way to prevent this from happening? Below, you will ...

cssangularbootstrap-4angular-materialng-bootstrap

Using the Strikethrough Feature in React

Is it possible to apply a strikethrough effect to a checkbox's label text when toggled on and off? In my system development process, I've utilized various methods. What modifications should be made in the fComplete method for this feature to wor ...

javascripthtmlcssreactjs

"Exploring the versatility of using variables in jquery's .css

I’m facing an issue where I need the rotation of a div to be based on the value stored in "anVar." This is what I currently have: function something() { $('.class').css('-webkit-transform:rotate('anVar'deg)') } The desi ...

javascriptjquerycssvariablesrotatetransform

Can this actually work? Overflow-y set to visible and overflow-x set to scroll/auto

We are facing a challenge within our team that we are struggling to resolve. Our Grid control has been customized by us. When the icon next to the column name is clicked, a pop-up div (referred to as divFilter) appears, allowing for filtering options to be ...

htmlcsspositionoverflowpositioning

I need assistance in making my Gradient design compatible with different browsers

Currently, I am using this Gradient style: background: -moz-linear-gradient(center top , #FFFFFF 0px, #DDDDDD 100%) repeat scroll 0 0 transparent; However, I need a multi-browser compatible version of it. Can anyone help me with that? ...

cssgradient

Is there a way to adjust the height of an image to be responsive in tailwind css?

<!-- this is the section with the services description and an image of an egg --> <!-- this is the first section with the description --> <div class="flex flex-1 flex-col items-center lg:items-start p-4"> &l ...

htmlcsstailwind-css