What is the best way to align bootstrap grid columns perfectly centered beneath a set of three columns?

I'm attempting to create a container grid layout similar to the one shown below using Bootstrap 4. The layout consists of three evenly spaced boxes at the top, followed by two additional boxes centered and evenly spaced below them:

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

Below is the code I have written:

        <!-- ======= Services Section ======= -->
    <section id="services" class="services">
      <div class="container">

        <div class="section-title">
          <span>Services</span>
          <h2>Services</h2>
          <p>We specialize in providing the following services.</p>
        </div>

        <div class="row">
          <div class="col-lg-4 col-md-6 d-flex align-items-stretch" data-aos="fade-up">
            <div class="icon-box">
              <div class="icon"><i class="bx bxl-dribbble"></i></div>
              <h4><a href="">Service one</a></h4>
              <p>Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi</p>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0" data-aos="fade-up" data-aos-delay="150">
            <div class="icon-box">
              <div class="icon"><i class="bx bx-file"></i></div>
              <h4><a href="">Service two</a></h4>
              <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</p>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="300">
            <div class="icon-box">
              <div class="icon"><i class="bx bx-tachometer"></i></div>
              <h4><a href="">Service three</a></h4>
              <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
            </div>
          </div>

            <div class="col-lg-4 col-lg-offset-2 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="450"></div>
            <div class="icon-box">
              <div class="icon"><i class="bx bx-world"></i></div>
              <h4><a href="">Service four</a></h4>
              <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</p>
            </div>
          </div>

            <div class="col-lg-4 col-lg-offset-2 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="450"></div>
            <div class="icon-box">
              <div class="icon"><i class="bx bx-slideshow"></i></div>
              <h4><a href="">Service five</a></h4>
              <p>Quis consequatur saepe eligendi voluptatem consequatur dolor consequuntur</p>
            </div>
          </div>

        </div>

      </div>
<!-- ======= End of Services Section ======= -->

This is the visual representation of my code:

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

I'm unsure of where I might be making a mistake. Any guidance would be appreciated.

cssbootstrap-4

Answer №1

There were a couple of errors that needed fixing:

  1. Cards 4 and 5 were not positioned correctly within the row element.
  2. Cards 4 and 5 were missing content, which caused them to extend beyond the card boundaries.

To resolve these issues, add d-flex justify-content-center to the row class to center the cards properly.

Refer to the code snippet below for the corrected implementation.

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

What is the best way to access bootstrap col and row styles without needing to import the entire framework?

I am currently in the process of developing a react app using styled-components and I am looking to design a component that mimics the functionality of the col col-x classes from bootstrap. Additionally, I also want to create another component for the row ...

cssreactjstwitter-bootstrapbootstrap-4

Displaying a submenu upon hovering within its designated CSS region

I'm encountering an issue with my submenu. It's supposed to appear when hovering over the parent menu li, but it also shows up when the mouse hovers over its area. Let's take a look at some images. First screenshot below shows that it works ...

javascriptjqueryhtmlcsshover

Adjust the color of the font icon within a button when hovering over it

On the bottom of my website (still in development) , there are 3 buttons with an arrow icon preceding the text. The arrow is created using an icon font and I would like it to change color (along with the button text) when hovered over. Any suggestions on ...

csshovercss-selectors

Increase scrolling speed? - Background abruptly moves after scroll

I'm facing a minor issue. I want to create a parallax background effect similar to what can be seen on nikebetterworld.com. In my initial attempt, I managed to achieve some functionality, but I believe it can be improved. As I scroll, the background p ...

javascriptjquerycss

Picture with predetermined size to occupy entire container

Seeking assistance! I am looking to pixelate an image after a jQuery event without using plugins like pixelate.js as they are not suitable for my project. Is it possible, through CSS or JavaScript, to automatically change the image to a smaller version wi ...

javascriptjquerycsspixelate

The functionality of Intersection Observer causes text to appear over the header

Hey everyone, I've been working on a scrolling animation to make text appear when it's at least 50% visible. So far, I have an animated header with an Onscroll Event and Intersection Observer for the text. It's all working well, except for ...

javascripthtmlcssoverlappingintersection-observer

CSS: The enigma of :nth-child - what eludes my understanding?

I have 2 divs which are similar to 2 td's in a table. My goal is to have 2 red divs, followed by 2 blue divs and so on. However, my current code doesn't seem to be working. Can someone point out what I am missing: <style> .irow :nth-child( ...

htmlcsscss-selectors

What is the reason behind Bootstrap's size classes becoming ineffective after 5?

Consider this: <div class="container m-5"> is effective, while <div class="container m-9"> does not produce the desired result. It appears that any number greater than 5 does not function as expected. What could be the rea ...

csstwitter-bootstrap

Using the .slider class on concealed div elements

Explaining this may be a bit tricky, but here we go... I have multiple hidden divs that switch with each other when a link is clicked using $(document).ready(function(){ $('a').click(function () { var divname= this.name; $("#"+divname ...

jquerycss

React - Separate colors for different containers

I have been struggling with this issue repeatedly, yet I still haven't found the most efficient solution for it. Imagine having 2 DIVs, A and B, both nested inside a container with columns assigned to each. What would be the optimal way to fill a back ...

htmlcssreactjsbackground-color

Tips for creating a hidden tab that only appears when hovered over

When hovering over the link tag .cat-link a.navlink, each subcategory tab .subcategories div is displayed. However, I would like to hide all tabs initially and have them appear only when hovered over with the mouse. Once the mouse is removed, I want the t ...

javascriptjqueryhtmlcss

What is the best way to darken the background when an alert is displayed and disable the dimming effect when the alert is closed?

Here's the JavaScript snippet I'm using: reset.addEventListener("click", function(){ document.querySelector("#body").classList.add("darkenPage"); myReset(); alert("Reset Successful!!"); document.querySelector("#body").classList.re ...

javascripthtmlcss

HTML/CSS Top Bar: Position two contents at opposite ends of the top bar

I am attempting to design a top bar with the following layout Tel:4949494949 social media icons In the center, I want to display contact information and on the right side, my social media icons. However, ...

htmlcssnavbar

Reduce the size of your CSS files using Gulp through the .pipe method

Is it feasible to incorporate a plugin like clean-css to minify CSS every time a page is refreshed or saved? How can I chain it through pipes to ensure that the minified file ends up in the dist folder? Thank you for any assistance! Presented below is the ...

cssgulpbundling-and-minificationgulp-clean-css

What is the best way to iteratively fade in data from a MySQL database one by one?

How can I load data from a MySQL database and display it one by one with a fade-in effect? Let's say I have a total of 40 images stored in the database. First, I want to display each image like this: <li class="img" style=" list-style: none; flo ...

javascriptphpjquerycss

My element's padding being overlooked by Tailwind CSS

In the process of developing a comment/response mechanism through MPTT, I am utilizing indentation to clearly designate replies and their respective levels. The comment.level attribute is being employed to establish the padding value. Consequently, a comm ...

htmlcsstailwind-css

Unable to reset iframe style height in IE8 using JavaScript

I am encountering an issue with resetting the height of an iframe using JavaScript. Here is the code snippet I am working with: var urlpxExt = document.getElementById('urlPx'); urlpxExt.style.height = "200px"; While this approach works well in m ...

javascriptcssdom-events

Is it possible to have dual images as the background for an HTML div?

Is it possible to use two images for a DIV background in CSS? I have one image that is just the background color and another that is a logo. Here's the code snippet I am currently using: .header{ background-attachment: scroll; background-clip ...

csshtml

Is there a way to customize the hamburger icon for the navigation bar in Bootstrap 4?

Struggling to update the icon in the Navbar for bootstrap 4. Here's my current HTML: <nav class="navbar fixed-top navbar-expand-md navbar-custom"> <a class="navbar-brand" href="#"> <img src="images/logo.svg" width="60px" style="m ...

htmlcsstwitter-bootstrap

The input field cannot accommodate the lengthy value in the Mat Select option

When a user selects a value in my mat select, it doesn't display well in the selection box. The text wraps when the selection is opened, but once a choice is made, it gets cut off without proper spacing between the ellipses and the dropdown arrow. Th ...

htmlcssangulartypescript