The alignment issue with Bootstrap4's align-self-baseline

Is there a way to attach tag buttons to the baseline of the parent div using CSS? If this method is not appropriate, can you suggest an alternative approach?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container">
    <div class="row">
        <div class="col-12 mb-4">
            <div class="card bg-light">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-7 blog-card-doc">
                            <div class="row d-flex ">
                                <div class="col-md-12">
                                    <a class="h3" href="#">Blog Post</a>
                                    <p>
                                        <i class="small">2018-03-05</i>
                                    </p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt nulla nec mi aliquet, commodo laoreet nisi placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam id finibus est.</p>
                                </div>
                                <footer class="col-md-12 blog-card-tags align-self-baseline">
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a class="btn btn-sm btn-outline-success" href="#">blog-tag</a>
                                    </div>
                                </footer>
                            </div>
                        </div>
                        <div class="col-md-5 text-center">
                            <a href="#">
                                <img height="300" src="http://via.placeholder.com/300x300" width="300">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
javascripthtmlcssflexboxbootstrap-4

Answer №1

This problem stems from a height issue. The row should have a height:100%. To position the bottom of the column relative to the adjacent column, use align-self-end. For the cross-axis alignment relative to the adjacent column, utilize align-self-end in baseline.

Explore more here

<div class="container">
    <div class="row">
        <div class="col-12 mb-4">
            <div class="card bg-light">
                <div class="card-body">
                    <div class="row h-100">
                        <div class="col-md-7 blog-card-doc">
                            <div class="row h-100">
                                <div class="col-md-12">
                                    <a class="h3" href="#">Check out this Blog Post</a>
                                    <p>
                                        <i class="small">Published on: 2018-03-05</i>
                                    </p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt nulla nec mi aliquet, commodo laoreet nisi placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam id finibus est.</p>
                                </div>
                                <footer class="col-md-12 blog-card-tags align-self-end">
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a class="btn btn-sm btn-outline-success" href="#">Tagged as: blog-tag</a>
                                    </div>
                                </footer>
                            </div>
                        </div>
                        <div class="col-md-5 text-center">
                            "<a href=\"#\">
                                <img height="300" src="http://via.placeholder.com/300x300" width="300">
                            </a>";
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </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

Selection of two options is maintained in the dropdown menu with data toggle

Having an issue with my dropdown menu that has a data toggle for tabs. Once I select an item, it remains blue and stays selected. Any solutions? https://i.sstatic.net/BZqoL.png Snippet of the code causing the problem: <ul class='nav nav-tabs& ...

htmlcsstwitter-bootstrapbootstrap-4

What could be causing the float left and right to not function properly in this situation?

Having trouble positioning a search box on the left and arrows on the right side of a container. The float property isn't working as expected and the arrows are too close to the search box. I've also tried using left:0px and right:0px but no luck ...

htmlcssbootstrap-4

Unable to locate three.js library

Hey there, I'm currently working on creating the "get started" application from the three.js website. For reference, you can check out their guide at . Here's a snippet of the HTML code I've put together: <!DOCTYPE html> <html lan ...

javascriptnode.jsthree.js

Obtain the rotational value in 3D CSS using JavaScript by extracting it from the matrix3d()

My element has been 3D transformed in the following way: .foo { transform: rotateX(-30deg) rotateY(35deg); } Now, I am looking to retrieve these values using JavaScript. Extracting the 3D matrix is simple: var matrix = $('.foo').css('tr ...

javascriptcssmatrix3dcss-transforms

I am looking to optimize my WordPress posts to load in increments as the user scrolls down the page, similar to how Facebook does

I am looking to implement a feature on my WordPress post where the content loads a few at a time as the user scrolls, similar to Facebook. Specifically, I would like my webpage to automatically load 10 posts and then continue loading 10 more as the user re ...

phpjavascriptjquerywordpress

What is the best way to retrieve route data based on route name in VueJs?

When working with VueJs, I have found that I can easily access the data of the current route. However, I have encountered a situation where I need to access the data of a different route by its name. Let's say I have defined the following routes: [ ...

javascriptvue.jsvuejs2vuexvue-router

Transforming JSON data from JavaScript to Python JSON format

I am working with JavaScript JSON data: var data = '{a: 10, b: 20}' Now I need to convert this into Python JSON. Any suggestions on how to achieve this? Current Scenario: I have a script that extracts text from a website. The data on the webs ...

javascriptpythonjson

The requested URL cannot be loaded due to the Access-Control-Allow-Methods in the preflight response not allowing the PUT method

When making an Ajax request using AngularJS, I encountered a problem with the $http method. It works well with both get and post requests, but throws an error with put. Response Header : Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type ...

javascriptangularjsajax

Merging SCSS and CSS into a unified file using WebPack

Trying to grasp webpack as a beginner is proving to be quite challenging for me. I'm struggling with the concept of merging multiple scss and css files together using webpack, after transpiling the sass. Unlike gulp, where I could easily transpile sa ...

javascriptnpmwebpackwebpack-2

Passing a value to a component to delete a table row in ReactJS using Material UI

My task is to delete a specific table row after clicking. I have two components and have already written a function, handleDelete(), to remove a row from the table. The issue is that whenever I click, it always deletes the last row instead of the one I cli ...

javascriptreactjsuitableviewmaterial-ui

Transition the image to a see-through effect, resembling a gradient

Is it possible to have an image fade to transparency using CSS3? I know I can achieve this effect with a PNG image, but changing the transparency levels requires graphic designer intervention each time. Can CSS3 offer a solution without having to change im ...

cssgradient

Error: Unable to execute setState in React Native

Why am I receiving an error stating that this.setState is not a function? I'm having trouble understanding why my code isn't working as expected. import React from 'react'; import axios from 'axios' import { StyleSheet, Text ...

javascriptreactjsfunctionreact-nativesetstate

Tips for aligning a picture to the left side using Bootstrap's Grid System

I'm having trouble positioning my picture on the left side of the cards, as I am still learning how to use bootstrap <div class="row"> <div class="col-sm-6 col-lg-3"> <div class="card"&g ...

htmlcssbootstrap-4

Position form elements flush with div containers

.quantity-button { height: 35px; width: 35px; padding-bottom: 1px; margin-bottom: 3px; font-weight: 600; font-family: Raleway; color: white; background-color: #AA95B9; border: 2px solid black; border-radius: 5px; cursor: pointer; display: -webkit-flex; dis ...

htmlcssformslayout

Angular forms not recognizing is-invalid class functionality

I was trying to learn angular forms, and I noticed that when I applied the is-invalid class to an input tag, the border color did not change to red. Can anyone explain why this is happening? <div class="container-fluid"> <h1> ...

htmlangularbootstrap-4

Angular and Bootstrap project with an advanced dropdown menu featuring multiple levels

Looking to create a multi-level drop-down menu using TypeScript without relying on jQuery? Bootstrap CSS framework may not have exactly what you need. https://i.sstatic.net/iruev.png Wondering how to implement a multi-level dropdown in your Angular proje ...

htmlcssangulartypescriptbootstrap-4

AngularJS - Creating a dynamic wizard experience using UI-Router

I have set up my routes using ui-router in the following way: $stateProvider .state('root', { url: "", templateUrl: 'path/login.html', controller: 'LoginController' }) .state('basket&a ...

javascriptangularjs

Having difficulty displaying closed captions on HTML5 videos

I'm currently attempting to enable closed captions for an HTML video. Here is the code I am using: <video width="320" height="240" id="video" controls> <source type="video/mp4" src="file.mp4" > <track id="video1" src="file1.srt" labe ...

htmlvideocaptionsclosed-captions

Experiencing difficulties with knockout bindings

I have a situation where I have multiple tabs labeled A, B, and C, and upon loading the 'C' tab, the model properties should data-bind to tab 'C'. I am encountering an issue with data binding. These three tabs (A, B, C) are located ins ...

javascriptjqueryknockout.jsknockout-mvc

Analyzing an HTTP response containing a Content-Type header specifying image/jpeg

Currently, I am developing my first web application and the task at hand involves loading an image from a database and sending it to the client for display. On the server side, I have the following code: res.setHeader('Content-Type', pic.mimetyp ...

javascriptajaxexpress