Crafting centered and uniform width flex elements in Bootstrap 4

As someone still new to bootstrap, I've been exploring two main layout options: flex and grid. Right now, I'm working with the flexbox method, but I've hit a roadblock in terms of width.

My aim is to design three rows (although my code only includes one for simplicity) where each row features two equal-width boxes. One box will contain an image, while the other will hold text. Additionally, I want these boxes to be responsive so that they stack on top of each other when the screen size is small. My current assumption for achieving responsiveness involves using d-md-flex. Here's what I have so far:

        <!--Row 1-->
        <div class="d-flex flex-column mb-3 text-white">
            <div class="d-flex flex-row justify-content-between align-items-center">
                <div class="text-center"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" class="img-fluid w-100" alt="Responsive image"></div>
                <div class="text-center"><p class="m-0">INTRODUCTION: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac rhoncus sem. Vestibulum consectetur
                    arcu est, at malesuada dolor posuere in. Cras tincidunt est eget ullamcorper mattis. Sed interdum ultricies venenatis. Nam
                    nunc neque, imperdiet vitae auctor sed, rhoncus quis enim. Maecenas sit amet purus aliquet, gravida purus sit amet, maximus
                    ligula. Praesent ut enim arcu. Nunc sit amet orci velit. Sed blandit consectetur suscipit. Vestibulum interdum pharetra
                    elit, nec pharetra arcu pretium quis. In vel sapien felis.</p></div>
            </div>

Unfortunately, I'm struggling with the sizing of the image turning out too small and positioned to the left, while the text dominates most of the space in the row. I've experimented with flex-grow/shrink and flex-fill without any success. Any suggestions on how to address this issue and make it more responsive? Your help would be greatly appreciated!

htmlcssbootstrap-4flexbox

Answer №1

            .parent {
            display : flex;
            border  : solid 1px;
            }

            .child {
            flex : 1;
            }
            <head>
                  <meta name="viewport" content="width=device-width, initial-scale=1">
                  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
                  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
                  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
                </head>
                <div>Using Flex</div>
                            <div class="parent">
                                <div class="child bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
                                <div class="child bg-warning"><p class="m-0">INTRODUCTION: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac rhoncus sem. Vestibulum consectetur
                                    arcu est, at malesuada dolor posuere in. Cras tincidunt est eget ullamcorper mattis. Sed interdum ultricies venenatis. Nam
                                    nunc neque, imperdiet vitae auctor sed, rhoncus quis enim. Maecenas sit amet purus aliquet, gravida purus sit amet, maximus
                                    ligula. Praesent ut enim arcu. Nunc sit amet orci velit. Sed blandit consectetur suscipit. Vestibulum interdum pharetra
                                    elit, nec pharetra arcu pretium quis. In vel sapien felis.</p>
                                    </div>
                            </div>
                            <div class="parent">
                                <div class="child bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
                                <div class="child bg-warning"><p class="m-0">Row 2</p>
                                    </div>
                            </div>
                            <div class="parent">
                                <div class="child bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
                                <div class="child bg-warning"><p class="m-0">Row 3</p>
                                    </div>
                            </div>
                            
                            <div>Using Grid</div>
                                                <div class="row border border-dark">
                                <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
                                <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-warning"><p class="m-0">INTRODUCTION: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac rhoncus sem. Vestibulum consectetur
                                    arcu est, at malesuada dolor posuere in. Cras tincidunt est eget ullamcorper mattis. Sed interdum ultricies venenatis. Nam
                                    nunc neque, imperdiet vitae auctor sed, rhoncus quis enim. Maecenas sit amet purus aliquet, gravida purus sit amet, maximus
                                    ligula. Praesent ut enim arcu. Nunc sit amet orci velit. Sed blandit consectetur suscipit. Vestibulum interdum pharetra
                                    elit, nec pharetra arcu pretium quis. In vel sapien felis.</p>
                                    </div>
                            </div>
                            <div class="row border border-dark">
                                <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
                                <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-warning"><p class="m-0">Row 2</p>
                                    </div>
                            </div>
                            <div class="row border border-dark">
                                <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
                                <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-warning"><p class="m-0">Row 3</p>
                                    </div>
                            </div>

Answer №2

Feel confident in your ability to achieve this.

To create three rows, consider using display: flex; along with flex-direction: column;. By incorporating 3 items, they will stack vertically with the first on top, followed by the second, and concluding with the third. For a more intricate layout, you can nest 3 additional flex boxes and arrange the content accordingly.

For further guidance, please refer to: Let me know if this resource proves beneficial!

This cheat sheet has been invaluable to me during CSS projects—it's truly a game changer.

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

Issue with Jquery's .html() function not functioning properly when trying to select HTML

I am currently working on a piece of code that looks like this: $price = $(element) > $('.main_paket_price').attr('name'); alert($price); Basically, I am trying to select an element inside element which has the class main_paket_pri ...

javascriptphpjqueryhtmlcss

What is the best way to adjust a horizontal list of inline elements to stack vertically when the div container is resized?

Here is the issue I'm facing (notice how the yellow tiles are overflowing): (view image here) because my reputation points are not enough. The screenshot above illustrates how the small yellow rectangles are extending beyond the boundaries of the gr ...

htmlcsslayout

How to ensure a div within an anchor tag occupies the full width in HTML and CSS?

In my code, I am working on creating multiple small boxes with images and centered text inside. The goal is to have these boxes clickable, where clicking the image will take you to a specific link. On desktop, I want a hover effect that darkens the image b ...

javascriptjqueryhtmlcss

jquery add to table id, not to a table within

Having trouble adding a table row to a specific table ID without it appending to other tables with different IDs nested inside. I've searched for a solution but can't seem to find one. Can someone help me figure out what I'm doing wrong? Her ...

javascriptjqueryhtmlappend

Is it allowed to modify <li> tag only when it contains a <strong> child element?

Is it possible to use SCSS to change the background color of a li element based on whether its child is a strong tag or not? li { margin-left: 3px; margin-bottom: 3px; border: solid transparent; background-color: #fff; border-top-left-radius: ...

htmlcss

What is causing my JS/JQuery code to only function in the console of a web browser?

I am having trouble with the $(element).scroll(function(){}); function. When I put it into a js file, it does not work properly, but when I enter it directly into the console (just the scroll func), it works fine. My goal is to implement scrolling paginat ...

javascriptjqueryhtmlpaginationscroll

Creating a customizable range input for pixel values: a step-by-step guide

I am looking to design a pixel range input. Here is an example: let slider = document.querySelector("input"); slider.addEventListener("change", () => { console.log(slider.value); }); <input type="range" min="5px" max="50px"> However, the r ...

javascripthtml

Is it possible to use Selenium with Python for copying and pasting

Is there a way to use control + A in Selenium Python to select text and then retrieve the highlighted text? ...

javascriptpythonhtmlselenium-webdriverweb-scraping

Exploring the Images directory

I hate to admit it, but I'm really struggling with this question. It's frustrating and I've searched everywhere for an answer. Currently, I'm using WAMP on Localhost with PHPstorm. The issue I'm facing is accessing the images di ...

phphtmlimagepathdirectory

The appearance of my HTML is distinct on Chrome for Windows and Safari for OSX

I have designed a prototype of some HTML code, but my website appears differently on Safari compared to how it looks on Chrome. While it displays correctly on Chrome, on Safari (both on OSX and mobile phones) the alignment seems off and randomly centered i ...

htmlcssmacosgoogle-chromesafari

Fresh sheet with a view through the window

I need to print a table and two popup windows when an action is triggered, but I am facing issues with the page-break in CSS. None of the solutions I have attempted so far seem to work. Currently, the two pop-up windows overlap with the table data, and I w ...

htmlcss

What is the best way to surround the initial x words within an element with a span tag?

Is there a way to style the first 10 words of a paragraph in a different color when the content is constantly changing? I can't manually add a span in the HTML. My approach involves using JavaScript to iterate through all instances of .overview__text. ...

javascripthtmlsplitslice

Is it possible to retrieve event.data beyond the onMsg callback function in JS SSE?

My current project involves using three.js to display accelerometer data in real-time and in 3D on a web browser. To transfer data from the remote server to the client side, I am utilizing server-sent-events (SSE). While I have successfully implemented th ...

javascripthtmlserverthree.jsserver-sent-events

What is the best way to incorporate a percentage-based width scrollbar?

Help needed: I want to implement a scroll feature for the parent div but here's the catch - the width of the text inside the div needs to be in percentage. So, if there is a long name, it should scroll within the parent div. HTML: <div id="list"& ...

htmlcss

Is there a way to automate the clicking of a button on this webpage if using .click() is not effective?

Currently, I am developing an extension that facilitates purchasing products from Flipkart during flash sales. However, on the product page, I am unable to click the "Buy Now" button using JavaScript as it returns undefined. Here is the code for the Buy No ...

javascripthtmlreactjsgoogle-chrome-extension

Showing dataframes in a Django template

Currently, I am developing a statistics portal using Django and attempting to present a Dataframe in my template with the following code: View.py: def display_table(request): engine = create_engine('postgresql://postgres:alphabeta@localhost:5432 ...

pythondjangopandastemplatesbootstrap-4

Reducing the speed of the bootstrap spinner

I've been experimenting with Bootstrap and implemented the grow spinner effect. You can find more information about it here: https://getbootstrap.com/docs/4.2/components/spinners/ Is there a way to customize the speed of the animation and slow it dow ...

animationbootstrap-4spinner

Enhancing button images with gradient effects on hover

I'm currently working on adding a color gradient effect to a PNG graphic used as a button. I specifically want the color gradient to appear only when the user hovers over the image, and not just for background images like most solutions seem to provid ...

htmlcss

The data in MongoDB is organized using unique identifiers called ObjectId

I am currently working on a MEAN Crud project and encountering some issues. Despite the data being received in the mongodb, it is displaying as an objectId instead of the actual content. You can see this issue in the image below: https://i.stack.imgur.com ...

htmlangularjsnode.jsmongodbexpress

Problem encountered while generating a torus shape using webGL

I am currently developing a program that aims to create 3D parametric shapes using webgl. The current code I have works successfully for rendering a sphere, but when I try switching the equations for a torus, only the upper half of the torus is being displ ...

javascripthtmlgraphicsopengl-eswebgl