The Quintessential Bootstrap 5 Hero

I'm struggling to determine which classes to add or remove in order to achieve the same image positioning as shown in the preview of the Bootstrap Border hero with cropped image and shadows.

My image isn't aligned with the edge of the hero container and it looks even worse on mobile devices. This is what my hero section currently looks like:

<div id="support" class="hero-donate container my-5">
    <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
        <div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
            <h1 class="display-4 fw-bold lh-1">Find out more and support our work</h1>
            <p class="lead">Text</p>
            <div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
                <button type="button" class="btn btn-outline-danger btn-lg px-4 me-md-2 fw-bold">DONATE</button>
                <button type="button" class="btn btn-secondary btn-lg px-4">Volunteer</button>
            </div>
        </div>

        <div class="col-lg-4 offset-lg-1 p-0 overflow-hidden">
            <img class="rounded-lg-3 shadow-lg" src="https://images.unsplash.com/photo-1608535002897-27b2aa592456?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="" width="75%">
        </div>
    </div>
</div>
htmlcssbootstrap-5

Answer №1

Methods for both

  1. The picture in the example is horizontal, so it fits nicely on the right side of the div. Since your image is vertical, add the class: float-end to the image tag.

  2. For mobile view, your code is functioning correctly except for the image alignment issue. To fix this, add w-100 and m-auto to the image tag. Your updated image tag should look like this:

    <img class="rounded-lg-3 shadow-lg float-end m-auto w-100" src="https://images.unsplash.com/photo-1608535002897-27b2aa592456?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="" width="75%">

Here is the functional snippet

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet"/>
<div id="support" class="hero-donate container my-5">
    <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
        <div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
            <h1 class="display-4 fw-bold lh-1">Discover more and support our cause</h1>
            <p class="lead">Text</p>
            <div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
                <button type="button" class="btn btn-outline-danger btn-lg px-4 me-md-2 fw-bold">DONATE</button>
                <button type="button" class="btn btn-secondary btn-lg px-4">Volunteer</button>
            </div>
        </div>

        <div class="col-lg-4 offset-lg-1 p-0 overflow-hidden">
            <img class="rounded-lg-3 shadow-lg float-end m-auto w-100" src="https://images.unsplash.com/photo-1608535002897-27b2aa592456?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="" width="75%">
        </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

Parallax Effect malfunctioning on iPhones

Hey there, I recently created a parallax UI using pure CSS. It seems to work fine on Android and desktop browsers, but when I tested it on iOS or iPhone, the parallax effect doesn't seem to be working correctly. I'm not sure why this is happening ...

htmlcssparallax

HTML: A peculiar table setup with an image displayed on the right side and text aligned to the left side. Strangely, the

Just starting out and seeking assistance <table style="border:none" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="border:none" valign="top" vertical-align:"top"; width="20%"> <div><img class= ...

htmlcss

Incorporating the use of font color in CSS styles and

I am creating a newsletter template using foundation. Within the table, there are 2 <th> elements containing the content "Reservationnumber" and "23425-FF3234". I have multiple instances of these <th>. I want to apply a colored font to them. Wh ...

htmlcss

Google Map not rendering correctly when dynamically implemented for the second time

When this specific HTML code is pasted into an .html document and opened directly in a web browser, it showcases the issue I am experiencing. <!DOCTYPE HTML> <html ng-app="myApp"> <head> <link href="https://netdna.bootstrapcdn.com/bo ...

javascripthtmlangularjsgoogle-mapsangular-ui-bootstrap

Issues with displaying form/button glyphicon when using a fixed table header in Bootstrap

I have a situation where I have a table with a fixed header. In one of the columns, there are delete buttons within a form. The table structure is as follows: <div class="panel panel-default table-responsive fixedHeader"> <!-- Table --> &l ...

htmlcss

What can I do to ensure that the selectInput choices in Shiny are easily accessible and visible to the user?

When running the code provided below, I encountered an issue where the options in the selectInput() were partially blocked by the bottom edge of the wellPanel(). This problem is illustrated in the image below. Users had to adjust the mouse wheel to see all ...

htmlcssrshinyselectinput

Is it possible to enhance the GamepadAPI's functionality?

I've been working on enhancing the built-in GamepadAPI by adding custom controller code. With TypeScript, I created a basic function to trigger a "gamepadconnected" event. // emulate gamepadconnected event function dispatchGamepadConnectedEv ...

htmltypescriptgamepad-api

Tips for creating a vertical Angular Material slider with CSS

Attempting to modify the angular material directive to render vertically has been a challenge. I experimented with using transform:rotate in the CSS, however, it resulted in the slider behaving and rendering differently. md-slider { position: absolute ...

javascriptcssangularjshtmlangular-material

Difficulty with Setting HTML input Character Limit on Oppo F3 Plus when using Chrome Browser

Encountering an issue in the Chrome browser on the OPPO F3 Plus device with a maxlength=100 set on an input type of text, but it is not allowing entry beyond 63 characters. Device Name : OPPO F3 Plus Browser : Chrome v71 For example: <input type="tex ...

htmlvalidation

Focusing on the alignment of an article tag

I am currently facing a challenge in centering the content within an HTML article element. As of now, the content is aligned to the left margin of the page. Below is the snippet of HTML I am working with: <article> <h1>Sign In</h1> ...

htmlcss

Trouble Viewing Image File

I am facing an issue where I cannot upload an image file from my computer onto my HTML file, as it is not showing up in the browser. However, when I link an image file from the web, it works perfectly fine. I have double-checked the file path and ensured ...

htmlcss

Guide on validating an Australian phone number with the HTML pattern

When it comes to PHP, I have found it quite simple to validate Australian phone numbers from input using PHP Regex. Here is the regex pattern I am currently using: /^\({0,1}((0|\+61)(2|4|3|7|8)){0,1}\){0,1}(\ |-){0,1}[0-9]{2}(\ | ...

javascriptphpregexhtml

Limiting the size of images within a specific section using CSS

When using CSS, I know how to resize images with the code snippets below: img {width:100%; height: auto; } img {max-width: 600px} While this method works effectively, it applies to every image on the page. What I really need is for some images to be ...

javascripthtmlcss

Is it possible to create an array that organizes monthly income data from a JSON file?

I'm currently developing an Accounting System where I need to display a bar chart showing the monthly Incomes and Expenses. The data is retrieved from a database using AJAX, and it returns the following JSON: { "results":{ "his ...

javascripthtmlarraysjsonjavascript-objects

What are some creative ways to customize and animate the cursor or caret within an input field?

Just to clarify, I am working with React and Material-UI. I have a task at hand where I need to modify the appearance of the caret within an input element by adding an animation to it. I have managed to change its color using caret-color and set a default ...

javascripthtmlcsssassmaterial-ui

Arrange two divisions vertically in the footer

Despite being a common question, I am facing difficulties with Bootstrap 4, which may be due to some conflicts. I am trying to create two divs placed one above the other, fixed to the bottom, with text centered in both. Here is the code snippet: ...

htmlcsstwitter-bootstrap-3bootstrap-4

Adding a div beside an input element - step by step guide

When creating an input field in my code, I followed these steps: var inputVal = document.createElement("input"); inputVal.setAttribute("type", "checkbox"); inputChek.onchange = select; inputChek.setAttribute("value", title); //inputChek.after(sortDiv); ...

javascripthtmlcss

Components drifting apart following viewport adjustments

Can someone help me with this issue in responsiveness? When I change the viewport, my header and main elements seem to be moving far apart from each other. View the code on JSFiddle <header> <div class="slider"> <img src="picture1" al ...

htmlcssresponsiveelement

Issue with displaying Font Awesome icons in Bootstrap 4 navbar brand

Recently, I've been setting up a local Laravel website to explore the latest features and changes in Laravel 5.6. However, I've encountered an issue while trying to integrate a Font Awesome icon into the navbar-brand of Bootstrap 4. The icon does ...

cssbootstrap-4font-awesome

Updating existing text to create personalized HTML dropdown menus

I have designed a unique set of dropdowns by using divs and checkboxes instead of the traditional elements My goal is to dynamically change the 'select-wrapper--title' text (e.g. the first option) based on the selected option in the dropdown I ...

javascripthtmljquery