Merging two separate rows into one in Bootstrap 4

I have a layout with 2 rows, each row consisting of 3 columns. Each column is assigned the classes .col-lg-4 .col-md-4 .col-sm-12. I am looking to combine two vertically aligned columns (the one containing the image and the one above) into a single column. Is this even possible?

https://i.sstatic.net/Kmgjh.png

Code:

<div class="container">
        <div id="services">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <p><i class="fa fa-bandcamp" aria-hidden="true"></i></p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum voluptate vitae vel necessitatibus in ut modi eligendi labore, fuga quaerat libero dignissimos, optio dolore, facere, nostrum quidem culpa laboriosam eveniet.</p>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <p><i class="fa fa-bandcamp" aria-hidden="true"></i></p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ipsam quibusdam illum porro labore adipisci asperiores totam aut eaque excepturi aliquid, esse inventore laborum dolorem ipsum error harum vero, quasi.</p>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">

                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <p><i class="fa fa-bandcamp" aria-hidden="true"></i></p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, aliquam ipsa veritatis optio nihil expedita quia dolore sint officiis cumque. Ab quae, aspernatur saepe vitae reiciendis incidunt commodi dolorem amet!</p>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <p><i class="fa fa-bandcamp" aria-hidden="true"></i></p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam fugit nisi fuga dolore expedita. Amet libero quas provident assumenda vitae inventore nisi maxime beatae distinctio porro. Enim dicta qui quos!</p>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <img src="assets/imgs/cats4-compressor.jpg" alt="Image" id="services-image">
                </div>
            </div>
        </div>
    </div>
htmlcsstwitter-bootstrapwebbootstrap-4

Answer №1

If you want to create a layout with nested columns, follow this structure...

https://www.example.com/layout-example

     <div class="row">
            <div class="col-lg-6">
                <div class="row">
                    <div class="col-md-4 col-sm-12">
                        <p><i class="fa fa-star" aria-hidden="true"></i></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis dignissim semper.</p>
                    </div>
                    <div class="col-md-4 col-sm-12">
                        <p><i class="fa fa-heart" aria-hidden="true"></i></p>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                    </div>
                    <div class="col-md-4 col-sm-12">
                        <p><i class="fa fa-gift" aria-hidden="true"></i></p>
                        <p>Suspendisse potenti. Cras efficitur risus eget quam pulvinar, et vestibulum turpis faucibus.</p>
                    </div>
                    <div class="col-md-4 col-sm-12">
                        <p><i class="fa fa-clock-o" aria-hidden="true"></i></p>
                        <p>Vestibulum id ligula in purus vehicula ultricies. Integer aliquam ornare velit eu eleifend.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12">
                <img src="//placehold.it/500x300" alt="Image" id="nested-image">
            </div>
     </div>

Answer №2

Perhaps bootstrap's push/pull/offset properties could be what you're after as they allow you to customize how the grids are presented.

.col-lg-4 {
  background-color: gray;
  height: 200px;
  border: 1px solid black;
}

.col-sm-4 {
  background-color: darkred;
  height: 400px;
  border: red 1px solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-sm-8">
    <div class="row">
      <div class="col-lg-4 col-lg-push-4">
        Hello
      </div>
      <div class="col-lg-4 col-lg-push-4">
        Hello
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4 col-lg-push-4">
        Hello
      </div>
      <div class="col-lg-4 col-lg-push-4">
        Hello
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    hello
  </div>

</div>

Give it a try! (expand the width of the screen if they stack) https://jsfiddle.net/xnp3wwbh/

Answer №3

To improve the layout of your grid, consider rearranging how you've structured it. Try dividing the initial two columns into col-sm-8 and col-sm-4, then proceed to separate the rows within the col-sm-8 section.

Answer №4

In my opinion, the most effective approach is to arrange all 6 'squares' in a single row and split each column into thirds (col-md-4).

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

Styling paragraph elements using CSS in JavaScript

I need help applying CSS styling to a paragraph that is being extracted using JavaScript. Here's the current code I have: var info = "<p>" + meeting.summary + "</p>; I attempted to add some styling with the following cod ...

javascripthtmlcss

Automatically populate a div with content from a file

As I am completely new to the world of HTML, I find myself in need of quickly putting together something for work just as a proof of concept. I apologize if this question has been answered previously, but honestly, I wouldn't even know how to start se ...

javascriptjquerycsshtml

Display tables based on selected changes with dynamically changing options

My HTML structure displays rows with active and inactive statuses based on a select change, and it's currently functioning correctly. However, the project requirements have changed, allowing for more status options besides just active and inactive. I ...

javascripthtmlangularjs

Issue with jQuery functionality when page is loaded through AJAX request

My index page currently has jQuery and a js file for a slider plugin loaded. I am using an on click event to load an external page using .load. Here is the code snippet: //jQuery loaded from Google CDN here (in head) jQuery( document ).ready(function() { ...

javascriptjqueryhtmlajax

Adding text with jQuery

Currently, I am utilizing the Jquery text editor plugin known as JqueryTE. While adding some functions to it, I have encountered a roadblock. Specifically, I am attempting to insert additional text into the source of the textarea but have been unsuccessfu ...

javascriptjqueryhtml

Could you explain the significance of the code "a[href*=#]:not([href=#])"?

I'm a bit confused about the meaning of this code. Can someone explain it to me? a[href*=#]:not([href=#]) Appreciate the help! ...

htmlcsscss-selectors

Issue with Mat-AutoComplete arising while utilizing a formArray

After adding a form array to account for multiple rows, I had to modify my definition from: shoppingCartList Observable<any[]>; to shoppingCartList: Observable<any[]>[] = [];. However, this change resulted in an error in my filter function whic ...

javascripthtmlangularangular-materialmat-autocomplete

Update an element's margin-right value with jQuery

I have designed a basic <ul> list in HTML and applied different margin-right values to each of the <li> elements using CSS (jsFiddle). Here is the HTML code: <ul> <li>First</li> <li>Second</li> <li& ...

javascriptjqueryhtmlcssmargin

Hosting images with an online service on jsfiddle: A guide

Exploring the world of HTML canvas and honing my skills in HTML and CSS through jsfiddle, I am eager to incorporate my own images. While sites like Google Drive provide free image hosting, I wonder if I can utilize them with drawImage(); Is there a way to ...

javascripthtmlimage

Utilizing effective CSS media queries within an Angular application

According to what I've read, it is not recommended in Angular to use the CSS hidden element to hide an element like this: .container{ background-color : powderblue; height : 50px; width : 100% } @media (max-width: 400px){ .container{ ...

cssangularmedia-queries

Adding a luminous glow effect to the <a> tag upon selection

Currently, I am working on integrating a navigation bar into a test site. I have noticed that some navigation bars highlight the current selected page by adding a bar underneath or creating a glowing effect around the <a> tag. I am unsure of the corr ...

css

Utilizing AngularJS HTML5 mode with UI Router on an Apache server

A few days ago, I enabled html 5 mode on my Angular (1.5.8) app using the following code: $locationProvider.html5Mode({enabled:true,requireBase:true}).hashPrefix('!'); Later, I came across a guide on configuring an Apache server for html5 mode ...

angularjshtmlapachemod-rewriteangular-ui-router

Tips on confirming the completion of my form when the next button is pressed

I am working on a multi-step form with a jQuery script to split the forms. The first form has only one button - the next button, which takes the client to the next form. However, when I click on the next button in the first form, it moves to the next form ...

javascriptjqueryhtmlforms

Checking for duplicate entries in an array created with the Angular form builder

I am currently utilizing angular6 reactive form with form builder and form array. The issue I am encountering is duplicate subject entries from the drop down in the form array. How can I implement validation to prevent duplicate entries in the form array? ...

javascripthtmlangularangular-reactive-formsangular-formbuilder

Get rid of any fonts that are causing rendering delays on amp pages

Encountering issues with Google Lighthouse and AMP Pages https://i.sstatic.net/EXiha.png I have attempted various solutions but none seem to be working <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400, ...

htmlcssfontsamp-htmllighthouse

The upper spacing is malfunctioning

Why is my margin-top not working when margin-left is functioning as expected? p.ex1 { margin-top: 15px; margin-left: 35px; } <div class="footer2"> <p class="ex1"> ABOUT US </p> <hr> <div class="footer"> &l ...

css

"Learn the process of connecting an HTML5 element to Angular 2 source code while in a saving mode

In this Angular2 implementation, I have created some HTML code for user access. However, I am facing an issue where the data is not binding at the Angular2 source code side. HTML Code <form class="form-horizontal" novalidate [formGroup]="EmployeeForm" ...

htmlangular2-forms

Steps for showing an alert notification when the form field is empty

Within my script, there is a Bootstrap form where I am facing an issue. If the user fails to select a language and leaves the value blank or as "Select Language," I want to display an alert message prompting them to choose a language before proceeding to t ...

phpjqueryhtmlcssbootstrap-4

Currently utilizing Yii framework to customize the appearance of a DIV element by specifying the CSS properties within the View, and subsequently storing the CSS file

I am looking for a way to allow users to customize the properties of a parent div, such as color, background, and other CSS styles, directly from the WordPress theming dashboard interface. Can someone please guide me in the right direction? ...

jqueryhtmlcsswordpressyii

What is the best way to transfer data to a different section of my HTML webpage using PHP?

Can data be passed from an array to another part of the html code that is not in the same file? In file item.php and index.php, there is an array with objects. The goal is to include item.php as many times as the count of items in the array and send diffe ...

phphtml