How do you efficiently include several elements within a single column in Boostrap 5?

I've been working with Bootstrap 5 to display a grid of images similar to this link, but the images are not displaying as intended due to some CSS code.

#projects img {
  width: 100%;
  height: 100%;
}

<section id="projects">
            <div class="container text-center">
                <h4 class="fw-bold mb-3 border-bottom border-3">Mis Proyectos</h4>
                <div class="row g-4">
                    <div class="col-md-6">
                        <img
                        src="./images/cardcomponent.png" 
                        alt="card component"
                        class="rounded-3"
                        >
                    </div>
                    <div class="col-md-6">
                        <img
                        src="./images/yardsale.png" 
                        alt="yard sale"
                        class="rounded-3"
                        >
                    </div>
                    <div class="col-md-6">
                        <img
                        src="./images/qrcard.png" 
                        alt="web developer"
                        class="qr card"
                        >
                    </div>
                    <div class="col-md-6">
                      <img
                        src="./images/cardcomponent.png" 
                        alt="web developer"
                        class="rounded-3"
                        >
                    </div>
                </div>
            </div>
        </section>

My goal is to add a title <h6></h6> above each image.

<div class="col-md-6">
    <h6>Title</h6>
    <img
    src="./images/cardcomponent.png" 
    alt="card component"
    class="rounded-3"
    >
</div>

However, I'm encountering issues with including and displaying the titles within each image column, leading to a display like this example, when I actually aim for a result closer to this.

htmlcssbootstrap-5

Answer №1

Hey @Emiliano Acevedo, Thanks for bringing the bootstrap bug to our attention. I'm confident that the team will address those alignment issues in the row column.

Here's a quick solution for the problem. 

<div class="row g-4 align-items-end">
Simply add item alignment to the row element to resolve the issue.

I hope this solution proves helpful.

Check out this CodePen Example for reference

Answer №2

Using the text-center class on a div will center all the text inside it. However, if you only want your <h4> tag to be centered, simply remove the text-center class from the div and add it to the <h4> tag instead. This way, the <h6> tag inside your column will behave as expected. Here's an example:

#projects img {
    width: 100%;
    height: 100%;
}

<section id="projects">
    <div class="container">
        <h4 class="text-center fw-bold mb-3 border-bottom border-3">Mis Proyectos</h4>
        <div class="row g-4">
            <div class="col-md-6">
                <h6>Title 1</h6>
                <img src="./images/cardcomponent.png" alt="card component" class="rounded-3">
            </div>
            <div class="col-md-6">
                <h6>Title 2</h6>
                <img src="./images/yardsale.png" alt="yard sale" class="rounded-3">
            </div>
            <div class="col-md-6">
                <h6>Title 3</h6>
                <img src="./images/qrcard.png" alt="web developer" class="qr card">
            </div>
            <div class="col-md-6">
                <h6>Title 4</h6>
                <img src="./images/cardcomponent.png"  alt="web developer" class="rounded-3">
            </div>
        </div>
    </div>
</section>

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

Creating an HTML template in an Angular service and utilizing it as an HTMLTemplateRef

I'm currently working on a major project that has a specific requirement. As part of this project, I am utilizing a library which allows me to open dialog (modal) popups. In order to do so, I need to configure some options for the modal opening proce ...

htmlangulartemplatesservice

What is the process for adding text before and after a Bootstrap progress bar?

I want to customize the bootstrap progress bar with text at the beginning and end, like this: 5 star ----------------------------------------------- 70% Here is my attempt to achieve this: <link rel="stylesheet" href="https ...

csstwitter-bootstrapbootstrap-4

`Issues encountered with resizing the menu``

Looking to create a unique restaurant horizontal list bar for my application. The goal is to have a horizontal menu that displays 3 options on the screen at a time, with the middle one being the largest and the two flanking it smaller in size. As I scroll ...

javascripthtmlcss

What is the best way to output my PHP code into separate div elements?

I am attempting to place the prints generated by this PHP code into separate HTML divs so that I can customize them using CSS. However, everything is currently being printed into a single div named "body" with the class "hasGoogleVoiceExt". <?php class ...

phphtmlcss

Preventing jquery from continuing its execution after an event has been successfully handled

I am experiencing an issue with a radio button that triggers a jQuery script upon clicking. The script is supposed to render a form where users can enter a comment. Everything seems to be working fine, the event is detected and the form is rendered, but wh ...

jqueryhtmlajax

I am looking to conceal an element as soon as a list item is scrolled into view and becomes active

Is it possible to hide a specific element when the contact section is activated on scroll, and have it visible otherwise? How can this be achieved using Jquery? <ul class="nav navbar-nav navbar-right navmenu"> <li data-menuanchor="ho ...

jqueryhtmlcsstwitter-bootstrapshow-hide

Eliminating the glow effect, border, and both vertical and horizontal scrollbars from a textarea

Dealing with the textarea element has been a struggle for me. Despite adding decorations, I am still facing issues with it. The glow and border just won't disappear, which is quite frustrating. Could it be because of the form-control class? When I rem ...

javascriptjqueryhtmlcss

Is there a way to trigger an image flash by hovering over a button using the mouseover feature in AngularJS2?

When I hover over the 'click me' button, I want an image to appear on the webpage. When I stop hovering, the image should disappear using the mouseover option. This is what I attempted in my app.component.ts and my.component.ts files: Here is t ...

htmlcssangulartypescript

What is the best way to place an "Add row" button directly in front of every horizontal row border within a table?

I would like to create an HTML table where I can insert rows by clicking on a centered "insert row" button placed between each pair of rows. This will help in visually indicating where the new row will be added. Is there a CSS solution to achieve this lay ...

css

Retrieving the selected value from a dropdown menu before it is altered using vanilla JavaScript

I am trying to implement a feature where the previous value of a dropdown is captured when it is changed. Essentially, I need to compare the previous and current values of the dropdown and perform an action based on that information. For example, if Option ...

javascripthtml

The #each helper in Handlebars is used to iterate over an array

I have a function that generates an array as output. I am looking for a way to iterate over this array using the each method. Can anyone provide guidance on how to achieve this? Consider if the handlebars helper produces the following array: details: [{ ...

javascripthtmlhandlebars.js

"Error: The function $(...).autocomplete is not recognized" in conjunction with Oracle Apex

Currently experiencing some frustration trying to solve the issue at hand. The Uncaught TypeError: $(...).autocomplete is not a function error keeps popping up and I have exhausted all resources on Stack Overflow in an attempt to fix it. This problem is oc ...

javascriptjqueryhtmljquery-uioracle-apex

Exploring the Possibilities of Wordpress Search with Multiple Dropdown Options

Is it possible to search across multiple categories? For example, I have 4 dropdown menus: 1. City 2. Area 3. Month 4. Products/Services When a user visits my site, they will see a static page with 4 dropdown lists and a "search" button. After the user ...

phpjavascriptjqueryhtmlwordpress

Combining Images Together in JavaScript

In my current javascript project, I've encountered an issue. Specifically, I'm trying to overlay one image on top of another image using the following code: <div> <img src="1.jpg" style="z-index:1;"/> <img src="2.png" style="z ...

htmlcssimage

Implementing Conditional Display of Span Tags in React Based on Timer Duration

In my current React project, I am facing an issue with displaying a span tag based on a boolean value. I need assistance in figuring out how to pass a value that can switch between true and false to show or hide the span tag. I tried two different methods ...

javascripthtmlreactjs

Guide on How to Include data (PDF Base 64) in angular 6 component

Within my Angular 6 application, I am presenting data (a report) in a new window using the following code snippet. *** The 'result' variable contains Base64 data *** if (result != null) { const pdfWindow = window.open(""); ...

htmlangularembed

What are the steps to resize a YouTube embedded video?

I am currently attempting to use a YouTube video as the background for breadcrumbs on my website. However, I am facing an issue with setting the video width to cover the full screen. The image below shows that the video is displayed in the center of the if ...

htmlcssvideoiframeembed

Slideshow featuring cards with text overlay

I am working with a bootstrap carousel and trying to place a card with text on top of it. No matter what I try, the card is not appearing as desired. Here is an example of what I want to achieve: https://i.sstatic.net/tjW3w.png Below is the code snippet: ...

htmlcsstwitter-bootstrapbootstrap-4

Utilize the attribute selector to apply styling directly within HTML elements

My job requires me to use a CMS that does not give me access to the head-section in order to utilize attribute selectors. I attempted to address this issue by using inline styles. Here is a simplified version of my HTML code: <div> <style typ ...

htmlcss

Achieving dynamic height in a parent div with a sticky header using mui-datatables

Here are the settings I've configured for my mui-datatables: const options = { responsive: "standard", pagination: false, tableBodyHeight: '80vh', }; return ( <MUIDataTable title={"ACME Employee ...

javascriptcssreactjsdatatablesmaterial-ui