The bootstrap media bottom functionality is malfunctioning

When I try to use the media bottom bootstrap component, the text remains top-aligned even after applying the media-bottom class. Is there something wrong with this component? Are there any efficient workarounds available?

Thank you!

Check out the fiddle here: https://jsfiddle.net/2yrrf6zx/2/

Here's the HTML code snippet:

<div class="media">
  <div class="media-left media-bottom">
    <a href="#">
      <img class="media-object pull-left" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg">
    </a>
  </div>
  <div class="media-body">
    <p>Title</p>
    <h4 class="media-heading">text</h4>
  </div>
</div>
htmlcsstwitter-bootstrap

Answer №1

Make sure to place the media-bottom class on the text, not the image. To properly implement this, use the HTML structure below:

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object pull-left" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg">
    </a>
  </div>
  <div class="media-body media-bottom">
    <p>Title</p>
    <h4 class="media-heading">text</h4>
  </div>
</div>

View Example on Fiddle

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

Methods for Obtaining the Base URL Together with href Links

Currently, I find myself at this location: localhost/magento/dresses/adidas-t-shirt.html In my file, I have written the following: <a href="my/hello/">Click Here</a> When I click on Click Here, I am directed to: localhost/magento/dresses/ ...

phphtmlmagento

Execute JavaScript code following the completion of loading and running an external script

My goal is to dynamically load and run a third-party JavaScript file (from a different domain) and then execute some of my own code afterwards. One option I'm considering is using jQuery's $.getScript: $.getScript('https://login.persona.org ...

javascriptjquerybrowserhtml

Anchor from HTML/Javascript to different section is not functioning as expected

I am having trouble with creating a 'scroll down' link on my webpage. I cannot seem to find a solution specific to my issue. My code looks like this: <a href="#apply-profile">scroll down</a> When clicked, this link should take users ...

javascripthtmlfirefox

What is the process for generating an Electronic Program Guide for television?

Welcome to the forum! I'm a front-end developer at a company for 6 months now, currently working on a TV app. It's my first experience in this field and I'm facing some challenges, particularly with creating an epg for the app. Unfortunately ...

javascriptcssvue.jstelevisionepg

Is it possible to use CSS to target the nth-child while also excluding certain elements with

How can I create a clear break after visible div elements using pure CSS? Since there isn't a :visible selector in CSS, I attempted to assign a hidden class to the div elements that should be hidden. .box.hidden { background: red; } .box:not(.hid ...

jquerycss

What is the way to determine the length of a list in a velocity template?

Is there a way to determine the size of a list in a velocity template? I am currently working with version 1.4 of Velocity. List<String> list = new ArrayList<String>(); ...

javahtmllistvelocity

What do you call the syntax %< ... >%?

Observed zoomInAnimation : true, zoomOutScale : false, templateLegend : "<ul class=\"<%=type.toLowerCase()%>-legend\"><% for (var j=0; j<sections.length; j++){%><li><span style=\"background-color:<%=section ...

javascripthtml

The "Open in new tab" feature seems to be missing for links when using Safari on iOS

My webapp contains links structured like this: <a href="/articles/">Articles</a> I am using JavaScript to control these links within my app: $(document).on("click", 'a', function(ev) { ev.preventDefault(); ev.stopPropagat ...

javascriptioshtmlsafari

Tips for Incorporating HTML Code into an ASP Button's Text Attribute

How can I add a symbol to a button's text without it showing as blank? The symbol in question is an arrow, which you can find here. <asp:button id="btnAdd" runat="server" class="next"/> CSS: .next { content = &#10095; width:50px; } ...

htmlcss

Guide to utilizing Bootstrap v4 SCSS edition in a Bower project

Recently, I have been using the SASS/SCSS version of Bootstrap #3.3.6 but I just found out that they released version 4. While there is a lot of information on how to use Bootstrap v4 (non SCSS) in projects, I'm having trouble finding resources on ho ...

csstwitter-bootstrapsassbower

Guide on making a color legend with JavaScript hover effects

On my website, there is a dynamic element that displays a table when values are present and hides it when there are no values. The values in the table are color-coded to represent different definitions. I wanted to add hover text with a color key for these ...

javascriptjqueryhtmlcsshover

Can different table headers be inserted under a Colspan?

I have been attempting to insert text above each column in Colspan without success. https://i.sstatic.net/MxQPj.png shows the image of how I want the columns in colspan to be displayed as 1 2 3 4 5 O, but I am unsure of how to achieve this. Here is an exam ...

htmlcssbootstrap-4html-table

Ways to eliminate gaps between div elements with CSS

I am currently working on a webpage that consists of one main div housing two inner divs (left_menu and content), along with an additional footer div outside the main container. When viewing the page, there seems to be a noticeable gap between the footer ...

htmlcss

Is it still necessary to include -webkit- and -moz- prefixes for widely recognized CSS3 properties?

I'm currently in the process of tidying up a CSS file, and I'm contemplating whether it's now acceptable to remove vendor-specific properties if they have been standardized (or at least partially standardized). For instance, should I contin ...

cssvendor-prefix

Setting minimum date on Bootstrap datepicker in Asp.net core: A quick guide

This form uses the native bootstrap datepicker input. I'm trying to establish a minimum date that the user cannot select by clicking, but my current method is ineffective. What is the correct approach to make this function properly? Here is the cod ...

htmlasp.net-corebootstrap-4

Having trouble dynamically applying css properties on the element

I am facing an issue where I want to display a popup without the scroll bar showing up. The popup is being displayed using an iframe. var addPartnerDialog = App.addDialog("AddExistingPartner", 500, 250); $(addPartnerDialog.getId()).css('overfl ...

javascriptjqueryhtmlcssdom

Adjusting the background position as the background size is set to cover

I'm trying to create a moving background effect on a slider with a background image. The background image changes position as the slider transitions between slides, creating a dynamic visual experience. Here's an example of how I implemented thi ...

css

What is the best way to attach two separate event listeners to a single button?

I'm attempting to have one button trigger two different functions, but I haven't been successful so far. I tried adding the second event listener as indicated by the // part, but it didn't work. The two functions should be executed sequentia ...

javascripthtmldom

AngularJS: Utilizing $http to fetch XML data instead of JSON

Looking to extract data from a website using angularjs / javascript. I am familiar with the $http object in angularjs which can make get requests. I have used it before to retrieve json, but I'm wondering if I can use it for XML (HTML) as well? (I th ...

javascripthtmlxmlangularjs

Building CSS Using TagBuilder in .NET Core

Can you provide guidance on utilizing the Tag Builder CSS Class? I am interested in integrating it into a style class .custom-image { max-width: 100%; max-height: 100%; padding: 0; background-color: white; } TagBuilder image = new TagBuilder("img"); Wh ...

c#css.netasp.net-core.net-core