The self-align class in Bootstrap flexbox is not functioning correctly

I'm currently experimenting with creating a unique blog post layout using Bootstrap. My goal is to have the blog image on the left side, the title on the right side, and the author's name below the title. However, I've encountered an issue where the author text is appearing on the right side instead of at the bottom as intended.

Check out the blog image here

Here is the code snippet I am working with:

        <div class="blog">
            <div class="row">
                <div class="col-md-6 d-flex align-items-center">
                    <img src="images/photo/blog-1.png" alt="">
                    <h4>13 of My Favorite UI/UX Goodies</h4>
                    <p class="flex-column align-self-end">By <span>Danny Sapio</span></p>
                </div>
            </div>
        </div>
htmlcssbootstrap-4flexbox

Answer №1

If you want to display the information in two columns, follow these steps:

<div class="content">
    <div class="row">
         <div class="col-md-6 d-flex align-items-center">
              <img src="images/photo/content-1.png" alt="">
         </div>
         <div class="col-md-6 d-flex align-items-center">
               <h4>10 Ways to Improve Website Usability</h4>
               <p class="flex-column align-self-end">By <span>Alice Smith</span></p>
         </div>
    </div>
</div>

Give it a shot and let me know if this layout meets your needs.

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

What is the best method to connect a favicon in a Ruby on Rails application?

Here is what I am attempting. <%= image_tag 'favicon.ico', icon="rel" type="image/x-icon" %> ...

htmlruby-on-railsfavicon

I am experiencing an issue where my ajax code is unable to display the

After spending countless hours trying to make this work, I find myself stuck. I've set up a simple guestbook page and have created this code to generate a JSON file: <?php /* Constants for database settings */ define("DBHOST", "localhost"); defin ...

phphtmljsonajaxwidget

How can I set the initial Number of SMS to 1 when the characters are less than or equal to 160?

I am working on a jQuery code that displays the current number of characters being typed, the remaining characters, and also the number of SMS. The rule is that any value between 0 and 160 represents 1 SMS, while any value above that but less than 321 repr ...

javascriptjqueryhtml

Refreshing data causes the data to accumulate and duplicate using the .append function in Jquery

I am currently working with a dynamic table that is being populated using AJAX and jQuery. Everything seems to be functioning correctly, however, I am encountering an issue when trying to reload the data as it just continues to stack up. Below is the func ...

javascriptjqueryhtmlajax

Issue with Wordpress css rendering on Internet Explorer

My webpage is functioning well in Chrome and Firefox, but I'm facing compatibility issues with Internet Explorer. I've identified several bugs related to tables and layout, however, I'm struggling to resolve the font and text-transform prob ...

csswordpressinternet-explorer

Updated INNER header and footer - unrelated to the answered questions

After observing, the inner-header and inner-footer div scroll along with the area that contains the select list. How can I make that area scroll down while keeping the inner-header/footer fixed within the content? I hope my query is understandable. Thank ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

Guide on setting the BackColor of a table cell based on a database value dynamically

In the project I am currently working on, there is a request to change the background color of specific table cells based on their values. In order to achieve this, I am handling the RadGrid_ItemDataBound event and attempting to set the BackColor property ...

cssvb.netcellradgrid

What is causing the unexpected underline in the font of the password field in Bootstrap 4 Form?

Issue with underlining in the password field font within a bootstrap 4 modal https://i.sstatic.net/zUEvo.jpg <form method="post"> <div class="form-group"> <label for="username"><u>Username:</u></label> ...

formsbootstrap-4

Instructions on how to invoke a function defined in a JavaScript module (type=module) from an HTML document

I've been facing difficulties with using JavaScript modules... I have an HTML file and a JS module. In the javascript file, I have a function defined that I want to call from my HTML page. Here is my code: index.html <html> <head> < ...

javascripthtml

Is it possible to display the <input type="text"> and the following <div> element on the same line instead of having space between them?

Could you please advise on how to adjust the layout to eliminate the space between the input type="text" and the following div element? When I set the width of the input type="text element to 180px and the width of the subsequent div to 20px, the div overf ...

javascriptjqueryhtmlcss

If every single item in an array satisfies a specific condition

I am working with a structure that looks like this: { documentGroup: { Id: 000 Children: [ { Id: 000 Status: 1 }, { Id: 000 Status: 2 ...

htmlangulartypescript

Is it possible to enlarge the window screen using css?

After using zoom at 90%, everything was working fine until we introduced high charts. The hovering property doesn't display in the correct position. Looking for a solution to show a zoomed window on a small screen, like a laptop screen. Does anyone h ...

htmljquerycss

How can I include JavaScript in an HTML document?

My folder structure is as follows: Inside webapp/WEB-INF/some.jsp, I also have a javascript file located in the same directory at webapp/WEB-INF/js/myform.js. I referenced it in some.jsp like this: <script type="text/javascript" src="js/myform.js"> ...

javascriptajaxhtml

validating user input on a sign-in form on the server side

<form method="POST" onsubmit=" return formSubmit() " action="log-it-reports.php"> <div class="userimage"> <img class="userlogo" src="image/userlogo.png" alt="Picture- User Profile picture"> ...

phphtmlauthentication

Retrieving the final item from an ng-repeat loop that has been sorted using the orderBy function

I need assistance in creating a list of terms and their definitions, each categorized under a header based on the first letter of the term. A Apple B Banana Currently, I am using the following code: <div ng-repeat="definition in definitions"& ...

javascripthtmlangularjsangularjs-ng-repeatangularjs-orderby

How to keep Vuetify component at the top of the v-layout?

https://i.stack.imgur.com/cKdsk.png I am in the process of creating a website using vuetify and nuxt. My goal is to specify the max-width property for the expansion panel UI component (https://vuetifyjs.com/en/components/expansion-panels). Here is my curr ...

cssvue.jsvuetify.js

How can I customize the appearance of tab buttons in a QtabWidget using PySide?

Looking for a way to customize the tab buttons on a QtabWidget in PySide. I've managed to style other elements of my custom widget, but can't figure out how to style the QtabWidget tabs. My attempt: self.tabWidget = QtGui.QtabWidget(Form) self. ...

pythoncssqtstylespyside

Demonstrate how to pass a newline character from Ruby on Rails to JavaScript

I am working with a .js.erb file that is activated by a JavaScript function. Within this js.erb file, I have the following snippet of code: event = <%=raw @event.to_json %> $('#preview-event-body').html(event.body); The value of event.bo ...

javascripthtmlruby-on-railsline-breakscarriage-return

HTML tables tend to have difficulty separating data effectively

Currently, I am encountering an issue while working with a HTML table. I am extracting data from a JSON array: {"key":["1","2","3"],"values":["4","5","6"]}. Instead of placing ...

htmljqueryarraysjson

Keep the nested ul with absolute positioning open until the pointer is moved outside the element

I am working on a navigation menu where the last list item (li) contains a nested ul for a dropdown menu. My goal is to display this nested menu when hovering over the parent li and hide it when moving away from the menu. However, I am running into an issu ...

jquerycss