Is there a way to position two bootstrap col divs in alignment with a third col div situated to the left?

I'm attempting to achieve the desired layout shown in this result: https://i.sstatic.net/B3EDr.png

Here is the code I have been working with:

<div class="container">
    <h1>Welcome Dennis,</h1>
    <div class="col-12 card card-body mb-2">
        <div class="row">
            <div class="col-md-3">
                <div class="col-md-6 text-center d-flex">
                    <img class="mx-auto my-auto" src="img/foot.png">
                </div>
            </div>
            <div class="col-md-8 card card-body mb-2">
                <p class="text-center">Center aligned text on all viewport sizes.</p>
            </div>

            <div class="col-md-8 card card-body mb-2">
                <p class="text-center">Center aligned text on all viewport sizes.</p>
            </div>
        </div>
    </div>
</div>

The resulting layout can be seen here: https://i.sstatic.net/AvZCD.png

I am aiming to have two columns stacked under each other next to the foot. Despite trying various approaches, I haven't achieved the desired outcome yet.

htmlcssbootstrap-4

Answer №1

When you place the col-3, col-3, and col-8 all within one row that is only set to span col-12, the third col-8 has no choice but to wrap under its siblings.

Think of it as two columns: col-4 and col-8 (which adds up to 12), and inside the col-8 column, stack the cards for the text and buttons.

For example:

<div class="container">

<h1>Welcome Dennis,</h1>

<div class="row">
    <div class="col-12 card card-body mb-2">

        <div class="row">

            <!-- Foot Image Column -->
            <div class="col-md-4 text-center">
                <img class="mx-auto img-fluid" src="img/foot.png">
            </div>

            <!-- Text and Buttons Column -->
            <div class="col-md-8">

                <!-- Within this column are stacked cards -->

                <div class="card card-body mb-2">
                    <p class="text-center">Center aligned text on all viewport sizes.</p>
                </div>

                <div class="card card-body">
                    <p class="text-center">Center aligned text on all viewport sizes.</p>
                </div>

            </div>
        </div>

    </div>
</div>

I hope this explanation clarifies things for you!

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

Update of a window occurs automatically

When a user clicks a link on a web page, I open a new window. $('#visit').click(function () { window.open(getHostName() + "/visits" , 'VisitsReport'); }); Within the web page $(document).ready(function () { var initializeVis ...

javascriptjqueryhtmltwitter-bootstrap-3bootstrap-table

Achieving alignment between a button and input field using Bootstrap CSS

Struggling to align my buttons next to the inputs in my project, particularly due to my inexperience with bootstrap CSS and CSS in general. Could someone please point me in the right direction? Link to the issue Unfortunately, my Search and New buttons a ...

htmlcsstwitter-bootstrap

Is it necessary to add a line break after a span element generated by react, next, or bootstrap

There is a strange issue plaguing my code - I'm enclosing some text in a span tag and it's causing an unexpected line break. It's unclear whether React.js, Next.js, or Bootstrap is the culprit, but I can't seem to get rid of the pesky l ...

cssreactjsbootstrap-4next.js

What is the best way to display a particular section of a website (<td>...</td>) within a UIWebView?

I have searched high and low for a solution to my issue, but have come up empty-handed. What I am attempting to accomplish is to only load a specific td from a webpage into a UIWebview. Currently, my code looks like this: - (void)viewDidLoad { [supe ...

htmliosuiwebview

Create animations for SVG paths and polygons that move along specified paths

I am trying to animate both a path and a polygon in an SVG arrow along the same path. Currently, I have successfully animated the path using CSS, but I am struggling to figure out how to move the polygon along the path at the same pace. <svg id="La ...

cssanimationsvg

Guide on redirecting to a different URL when the query string contains a particular keyword

Currently, I am facing an issue with the code below that is used for redirection based on URL string matching. The error message "Warning: Use of undefined constant" is being thrown and the code fails to work if the string is case sensitive. Can anyone a ...

phphtmlstring

Deleting various classes (jQuery)

Is there a more effective alternative to rewriting the following code snippet? $('element').removeClass('class1').removeClass('class2'); I am unable to utilize removeClass(); because it would eliminate ALL classes, and that ...

jquerycss

What is the best method for organizing data in rows and columns?

I attempted to use my map function to iterate over the data and display it, but I struggled to format it into rows and columns. The requirement is for 5 fixed columns with dynamically changing rows, making array indexing impractical. Here is the code snip ...

javascripthtmlcssreactjstailwind-css

Square-shaped picture with Bootstrap 4 design

I need help making images of different sizes appear as squares in a preview on my webpage. /* This is the CSS code which sets automatic height: */ .preview-img { width: 100%; height: auto; object-fit: cover; } How can I adjust the image height bas ...

cssimagebootstrap-4image-resizing

What is the proper way to add my image to CSS?

I'm encountering an issue while trying to insert my picture - I keep receiving a 404 error even though I believe my path is correct. Here are my files: main-menu phone.png _menu.scss Within my _menu.scss file, the following code is p ...

cssimagesasspath

Reverse the color of H1 text within a vertical div

Is it feasible to reverse the coloring of a segment within an h1 element using a div, horizontally? Refer to the illustration shown in the image below. https://i.sstatic.net/QAKwD.jpg ...

javascripthtmlcss

Using Bootstrap for Fixed Headers and Section Anchors

Despite my best efforts, I am struggling to resolve an issue with my fixed bootstrap navbar and internal links. I have experimented with various solutions, including using a JavaScript onscroll event listener and applying styles directly in the markup. How ...

javascripthtmlcssbootstrap-4

Reverting the box color changes in the opposite order of clicking them using HTML, CSS, and Jquery

As someone new to front end development, I am experimenting with creating multiple boxes using HTML, CSS, and jQuery. My goal is to have the boxes change color to blue when clicked, then revert back to their original color in the reverse order they were cl ...

jqueryhtmlcss

Is it unwise to conceal the horizontal scrollbar?

My webpage includes a jquery slideshow using the jquery circle plugin, featuring the "shuffle" option. var slideshow = $('#slider').cycle({ fx: 'shuffle', shuffle: { top: 0, left: 1300}, .... When the images move out ...

jqueryhtmlcssscrollbar

Determine the width of two inline input fields

Showing two inputs side by side: +------------+ +--------------------------+ | ID='inputA'| | ID='inputB' | +------------+ +--------------------------+ +------------------------------------------+ A ...

javascripthtml

When a button is undersized, the click event may not register

In my angular application, I have developed a directive for a tinyMCE editor. Upon setup, I have implemented two handlers: one for the blur event to hide the toolbar and another for the click event to show it. Additionally, I have created another directive ...

csstinymce

The Chrome extension for the New Tab Page is taking the spotlight away from the address bar

It appears that with the latest version of Chrome, extensions that previously had the ability to override Chrome's New Tab Page and take focus away from the Omnibox no longer have this capability. Is there a different method now to give focus to an i ...

javascripthtmlgoogle-chrome-extension

What is the best way to invoke the datepicker function on all rows of table data that share the 'datepicker' class?

Hey there! I'm working with a table that features a JavaScript function for a datepicker, as well as the ability to add and delete rows. The challenge I'm facing is that each new row created has the same ID as the previous one. How can I ensure t ...

javascriptjqueryhtml

What are the steps to designing a Vertical Curve UI?

Is there a way to replicate the unique vertical curve on the login page, as shown in the image below? I've come across horizontal SVGs that can achieve this effect, but I'm struggling to find resources on implementing it vertically. How is this ...

htmlcssuser-interfaceuser-experience

Is this code in line with commonly accepted norms and standards in Javascript and HTML?

Check out this Javascript Quiz script I created: /* Jane Doe. 2022. */ var Questions = [ { Question: "What is 5+2?", Values: ["7", "9", "10", "6"], Answer: 1 }, { Question: "What is the square root of 16?", Values: ["7", "5", "4", "1"], Answer: ...

javascripthtmlprotocols