Arranging Columns in Bootstrap 4.0

I am attempting to create a layout using Bootstrap 4 that consists of two larger columns on the left and four smaller columns grouped together on the right, with the height of the four columns not exceeding the height of the two larger columns.

However, I am facing difficulties in achieving this layout.

This is the desired layout:

https://i.sstatic.net/3n1c1.png

This is what I currently have:

https://codepen.io/anon/pen/ZrBpze

<section id="mu-featured">
        <div class="container">
            <div class="row">

                <div class="col-md-4 col-sm-6">
                    <img src="img/picture.jpg" alt="" style="height: 235px">
                    <h1>Header</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Illo suscipit facilis ipsum ullam reiciendis odio error
                        iste neque ratione libero rem accusamus voluptatibus, nihil
                        unde maiores sunt nisi. Assumenda, consectetur.</p>
                    <a href="#" class="">Call to action!</a>
                </div>

                <div class="col-md-4 col-sm-6">
                    <img src="img/picture.jpg" alt="" style="height: 235px">
                    <h1>Header</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Illo suscipit facilis ipsum ullam reiciendis odio error
                        iste neque ratione libero rem accusamus voluptatibus, nihil
                        unde maiores sunt nisi. Assumenda, consectetur.</p>
                    <a href="#" class="">Call to action!</a>
                </div>

                <div class="col-md-4 col-sm-6">
                    <img src="img/picture.jpg" alt="" style="height: 85px">
                    <h1>Header</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Illo suscipit facilis ipsum ullam reiciendis odio error
                        iste neque ratione libero rem accusamus voluptatibus, nihil
                        unde maiores sunt nisi. Assumenda, consectetur.  <a href="#" class="">Call to action!</a></p>
                </div>

                <div class="col-md-4 col-sm-6">
                    <img src="img/picture.jpg" alt="" style="height: 85px">
                    <h1>Header</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Illo suscipit facilis ipsum ullam reiciendis odio error
                        iste neque ratione libero rem accusamus voluptatibus, nihil
                        unde maiores sunt nisi. Assumenda, consectetur.  <a href="#" class="">Call to action!</a></p>
                </div>

                <div class="col-md-4 col-sm-6">
                    <img src="img/picture.jpg" alt="" style="height: 85px">
                    <h1>Header</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Illo suscipit facilis ipsum ullam reiciendis odio error
                        iste neque ratione libero rem accusamus voluptatibus, nihil
                        unde maiores sunt nisi. Assumenda, consectetur.  <a href="#" class="">Call to action!</a></p>
                </div>

                <div class="col-md-4 col-sm-6">
                    <img src="img/picture.jpg" alt="" style="height: 85px">
                    <h1>Header</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Illo suscipit facilis ipsum ullam reiciendis odio error
                        iste neque ratione libero rem accusamus voluptatibus, nihil
                        unde maiores sunt nisi. Assumenda, consectetur.  <a href="#" class="">Call to action!</a></p>

                </div>

            </div>
        </div>
    </section>
htmlcssflexboxbootstrap-4multiple-columns

Answer №1

If you're wondering how your design should adapt to smaller screens, the key is nesting elements correctly. While the provided code snippet doesn't address this directly, the concept you're looking for is called "nesting".

Nesting involves placing a .row within a column, and then nesting at least one other col-* inside that row. This structure ensures proper alignment on different screen sizes.

For a slightly different layout, consider the following code snippet. It showcases a variation where small images and text content are separated into different columns, utilizing 

<div class="w-100"></div>
as a divider for small screens, with w-100 defining "width: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

Manipulating the visibility of a template with ng-show and ng-hide

Is it possible to use ng-show and ng-hide in order to display or hide an HTML template, particularly if that template is a separate HTML file? I am attempting to divide my HTML file into two sections and toggle their visibility based on an event. ...

htmlangularjs

What is the proper way to include a URL when submitting an AJAX form?

When I try to call a servlet using HTML, jQuery and Ajax by submitting a form, I keep getting a 404 error saying the resource cannot be found. My project is built with Maven. The Servlet is located in the src/main/java package under : com.mycompany.sample ...

javajavascriptjqueryhtmlajax

Having difficulty with CSS animation and background issues

I can't seem to get my rotating background to work using CSS keyframe animation. I've tried different things but can't figure out what's going wrong. Below is my code: .main-header { width: 100%; Height: 128px; } .main-header, ...

cssanimation

unable to get highcharts to redraw and reflow properly

I am currently working on creating a dynamic page that can display between 1-4 graphs. These graphs need to be able to resize when added or removed from the page. However, I have encountered a major issue with resizing the graphs after resizing the contain ...

javascriptjqueryhtmlcsshighcharts

Employing bootstrap to include oversized images within a compact, fixed div

I am facing an issue with image responsiveness in the middle row of my layout. Despite using Bootstrap 4 and applying classes like img-fluid, the images in my #fullColumn area do not resize properly. The images are dragged into this area by users and are ...

htmlcssbootstrap-4

Trigger the select dropdown when a key is clicked

I am currently working on a project in react where I am utilizing the Select component from material. When I open the dropdown and press a key on my keyboard, the option starting with that key gets automatically selected. This behavior is also observed in ...

javascripthtmlreactjsmaterial-ui

Fade-in effect applied to images upon exposure

Is there a way to fade in an image based on the percentage scrolled, rather than a set number of pixels? I want my website to be responsive and adjust to all screen resolutions. Or perhaps is there a method to have the image fade in when it enters the fiel ...

javascriptjqueryhtmlcssdreamweaver

"Transferring a JavaScript variable to Twig: A step-by-step guide for this specific scenario

When it comes to loading a CSS file based on the user's selected theme, I encountered an issue while trying to implement this in my Symfony application using Twig templates. The code worked flawlessly on a simple HTML page, but transferring it to a Tw ...

javascriptcssajaxsymfonytwig

Conflicting CSS selection elements in WordPress causing theme theme selection conflicts

Despite trying various edits to my custom CSS, such as including ::selection{color: white; background: #2f3f58;}, copying and pasting code from sites like W3Schools and stack overflow, nothing seemes to work. I am using the Hueman theme from , which has a ...

htmlcsswordpresswordpress-themingselection

What is the best way to interact with a button in a HTML file using Selenium?

<div class="dropdown-div u-space-ls u-inline-block" data- reactid=".0.0.0.3.1"><a class="dropdown-div__button js-dropdown button" href="#" data-reactid=".0.0.0.3.1.0"><span class="u-pad-rs" data- reactid=".0.0.0.3.1.0.0">ACTIONS</sp ...

javahtmlselenium

Having trouble getting buttons to wrap onto a new line instead of spilling over the container

Struggling with getting a JSFiddle to work properly with React and other dependencies, I've decided to share the Github repo link to demonstrate the issue: https://github.com/ishraqiyun77/button-issues/ The main problem arises when a group of button ...

cssreactjstwitter-bootstrapbuttonbootstrap-4

Unable to apply border-radius to a specific HTML table

I am facing an issue where the border-radius is not being displayed on a specific HTML table. I am having difficulty in applying rounded corners to the entire table so that the table edges have a 30px curve. Here is an example of what I am looking for: ht ...

htmlcss

modify the color of a box within a grid upon clicking it

I am curious if it is possible to change the color of a box when it is clicked. I am working on coding a "calculator layout" and would like to start with this part 1 2 3 4 5 6 7 8 9 0 This is what I have been working on and struggling with. $(docume ...

javascripthtmljquerycss

One-of-a-kind Version: "Utilizing CSS to Capitalize an

Imagine having the following strings. i and we. me and you. he and she. Is it possible to achieve the desired result using PURE CSS? I and We. Me and You. He and She. If capitalizing the text using text-transform: capitalize is used, it will yi ...

jqueryhtmlcss

Submitting form by clicking a link on the page

To submit a POST request with "amount=1" without displaying it in the URL, I need the site to send this request when any link on the site is clicked. This JavaScript code achieves that with a GET request: window.onload = function () { document.body.oncli ...

javascripthtmlpostget

Is there a way to have a fixed width div positioned in the center of the screen, with two additional divs on either side

I have come across this stunning image: https://i.stack.imgur.com/tUYMc.png It serves as a header for a website - click on it to see the full size. I am trying to replicate this using HTML, CSS, and images, but I'm struggling. It needs to be 100% w ...

htmlcss

Creating a unique icon using Jquery Mobile for a button in a PhoneGap application

Has anyone experienced issues with using a custom icon for a jQuery mobile button? I am having trouble as it is only showing a grey circle instead of the actual icon. The default icons work fine, though. Here is the code snippet from the index.html page: ...

javascriptcssjquery-mobilecordovajquery-mobile-button

how to style a page with a CSS arrow shape

Can someone help me figure out how to create an arrow similar to the one in this button using CSS? https://i.sstatic.net/gQi0l.png I've been able to create triangle-like arrows like the one below #triangle_arrow { top: 3pt; content: ...

csscss-shapes

I believe I am attempting to add some space to a row using CSS, or at least that's what I think I'm trying to achieve

Hey there, I need some help with adding an icon "services" section to my website. CSS is not my strongest suit, so I'm reaching out for assistance. My goal is to create blocks for the icons that don't touch the edge of the page and have a margin ...

htmlcss

Can Bootstrap be used to create distinct spacing between table rows in a DataTable?

How can I achieve the look of separate table rows as shown in the image provided? I am currently using DataTables and bootstrap 5. I am looking to create visually distinct rows where the background is visible in between each row. Click here to view the i ...

htmlcssdatatablesbootstrap-5