Positioning of text and links in Bootstrap 4.3.1

My content doesn't fully align within the div, and the link appears on the right instead of centered at the bottom as shown in the previous example. How can I resolve this?

The non-functional section:

        <section class="row">
            <header class="col-12">
                <hr class="privacy-hr">
                <h1><!--Tables, buttons and forms in Bootstrap-->Tables, buttons and forms in Bootstrap</h1>
                <hr class="privacy-hr">
            </header>

            <article class="col-12 col-lg-6 col-xl-7 d-flex">

                <div class="alert alert-light d-flex flex-wrap" role="alert">
                    <div class="flex-grow-1 align-self-start">
                        ...
                    </div>

                    <div class="flex-grow-1 align-self-end">
                        ...
                    </div>
                </div>
            </article>

            <article class="col-12 col-lg-6 col-xl-5 d-flex mb-3">
                <img alt="grid" src="img/headings.webp" width="100%" height="100%">
            </article>
        </section>
    

The functional section:

        <section class="row">
            <header class="col-12">
                <hr class="privacy-hr">
                <h1><!--Typography-->Typography</h1>
                <hr class="privacy-hr">
            </header>

            <article class="col-12 col-lg-6 col-xl-7 d-flex">
                ...
            </article>

            <article class="col-12 col-lg-6 col-xl-5 d-flex mb-3">
                ...
            </article>
        </section>
    

The entire code snippet includes HTML, CSS, and JavaScript files for a website showcasing Bootstrap tutorials.

Answer №1

Recently, I modified the "flex-grow-1" class to use style="flex-basis=100%;"

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

Tips on adjusting a position that shifts with changes in window size

Working on a website for my grandpa, I'm planning to include a small biker character that runs across the screen. When hovered over, he stops and advises "wear a helmet." The animation works well, but there's an issue with the positioning when th ...

Adjusting the content of mat-cards to fill in blank spaces

I have encountered an issue with the alignment in a list using mat-card. Here is my current layout: https://i.stack.imgur.com/VKSw4.jpg Here is the desired layout: https://i.stack.imgur.com/8jsiX.jpg The problem arises when the size of content inside a ...

What is the best way to implement backup style attributes for a React JS component?

Is there a method to implement fallback style properties for a component? For example: var inlineStyle = { display: '-webkit-box', display: '-webkit-flex', display: '-moz-box', display: '-moz-flex', ...

Icons on Google Calendar events - Mini images beside your schedule

I'm in the process of developing a website where I plan to integrate Google Calendar. I want to include a small icon next to specific events to denote certain details. While the "categories" feature in Google Calendar allows me to assign highlight col ...

Adjust the height of the container div for the carousel according to the length of the text displayed

My image carousel features description content positioned on the right for wide-screen windows. However, I want the description to shift below the images when the browser window reaches a certain breakpoint. The challenge I am facing is that the height of ...

Personalize the hover effect of CardActionArea

I'm attempting to personalize the hover effect of material-ui's CardActionArea for a specific component in my React application. Unfortunately, I am struggling to locate detailed documentation on how to style it effectively. Even after experimen ...

Accessing the clandestine div via direct hyperlink

I have incorporated a toggle plugin from this website to display hidden divs. Each hidden div is identified by a unique id. Is there a method to show a specific div using a direct link? For instance, by entering domain.com/page.php#HiddenDiv2, it should ...

Apply rounded corners to the table row

Currently, I am utilizing a datagrid to display information. I have been attempting to implement border radius on all the table rows, but it doesn't seem to be working. Does anyone have insight into how I can apply border-radius to all rows in the t ...

What is the best way to display my index.html file while utilizing PHP Slim REST Api?

Recently I began diving into PHP Slim to create a REST API, and now I'm looking to integrate a client interface with it. One issue I've encountered is not being able to serve my index.html (the client's homepage) properly. Despite following ...

The show.bs.modal event has been triggered when the .show() method is used on elements within the

Recently, I discovered that the event show.bs.modal is triggered not only when the modal itself is shown, but also every time you call the .show() method for an element within the modal. To attach the event handler, you would typically use the following c ...

I have noticed that the brand section of the navigation bar changes to black when I hover over it, but I have been unable to locate any

I'm currently working on a Rails application that has a navbar-top with a brand element. However, I've encountered an issue where the background of the brand element turns black when I hover over it. Despite inspecting the browser console, I coul ...

Javascript code has been implemented to save changes and address resizing problems

Code Snippet: <script> function showMe(){ document.querySelector('#change').style.display = ''; document.querySelector('#keep').style.display = 'none' document.querySelector('#change1').style.d ...

Tabindex malfunction in Bootstrap dropdown menu when nested within a form and pressing Enter key

Within my form, I have integrated a Bootstrap 3 dropdown menu situated between two text input fields. The dropdown's role="menu" attribute allows for navigation using the up/down arrow and Enter keys. However, after making a selection in the dropdown ...

Adjusting the flex columns to be mobile-friendly for various screen sizes, I noticed that the HTML text is spilling over into the adjacent section and the columns appear to

Hi everyone, I've been diligently working on my portfolio website and I'm thrilled that it appears responsive on mobile devices, my Macbook Air, and both of my desktop monitors. However, I've encountered an issue on my Lenovo laptop where th ...

The <hr> line in Bootstrap is placed in a peculiar manner

Take a look at the fiddle here: https://jsfiddle.net/mv5ut6sw/ On my website, I have a set of links displayed in a <div> at the top. To visually separate these links from the rest of the page, I want to add horizontal lines above and below the conta ...

Interactive Radial Menu Using Raphael JS

Greetings and thank you for taking the time to consider my predicament. I am currently working on creating an SVG menu using raphael, but unfortunately, geometry has never been my strong suit. Below is a visual representation of what I have managed to cre ...

Create a responsive Bootstrap 4 button group without the need for any additional custom CSS styling

I'm currently working on a div containing a button group. Below is the code snippet: <div id="main"><!-- Full-width container with no padding or margin --> <div class="btn-toolbar" role="toolbar"> ...

Injecting variable styles into my VueJS component

I am currently working on developing a custom progress bar to visualize the percentage of completed tasks. The approach I am taking involves using v-bind:styles and passing {width: dynamicWidth + '%'} to regulate the progression of the bar. To ac ...

What could be causing the header's height to remain unchanged when using a percentage for its size?

I'm having trouble creating a header that takes up 20% to 40% of the body. When I try using percentages, it doesn't work but it works fine with pixels. Can someone explain why percentages aren't working for this? *{ margin:0; padding: ...

Bootstrap is unable to function properly without jQuery, throwing an error message that states: "Bootstrap's JavaScript

Attempting to create a Bootstrap interface for a program. Added jQuery 1.11.0 to the <head> tag, however upon launching the web page in a browser, jQuery throws an error: Uncaught Error: Bootstrap's JavaScript requires jQuery Various attempts ...