Aligning Elements in the CSS Bootstrap Grid

Struggling to achieve perfect center alignment of an HTML element using the Bootstrap grid framework. Here's the current code:

                <div id="rentals" class="container pb-4">
                <div class="row pt-5 mt-5 mb-4">
                    <div class="col text-center appear-animation" data-appear-animation="fadeInUpShorter">
                        <h2 class="font-weight-bold mb-1">Container Rentals</h2>
                        <p>Here are the containers we rent</p>
                    </div>
                </div>


                <div class="pricing-table mb-4">

                <div class="col-md-4"></div>

                    <div class="col-md-4">
                        <div class="plan">
                            <div class="plan-header">
                                <h3>Short Term (6-12 Months)</h3>
                            </div>
                            <div class="plan-price">
                                <span class="price"><span class="price-unit">$</span>99</span>
                                <label class="price-label">per month</label>
                                <label class="price-label">Minimum 6 months contract upfront</label>
                                <label class="price-label">Additional delivery cost (charged for round trip) upfront</label>
                            </div>
                            <div class="plan-features">
                                <ul>
                                    <li>20’ Standard Shipping Container</li>
                                    <li>One Trip Condition</li>
                                    <li>14 Gauge Steel Walls</li>
                                    <li>Wood Floors</li>
                                    <li>Lockable Cargo Double Doors</li>
                                </ul>
                            </div>
                            <div class="plan-footer">
                                <a href="#" class="btn btn-dark btn-modern btn-outline py-2 px-4">Apply Now</a>
                            </div>
                        </div>
                    </div>


                    <div class="col-md-4">
                        <div class="plan">
                            <div class="plan-header">
                                <h3>Long Term (12+ Months)</h3>
                            </div>
                            <div class="plan-price">
                                <span class="price"><span class="price-unit">$</span>89</span>
                                <label class="price-label">per month</label>
                                <label class="price-label">Minimum 12 months contract upfront</label>
                                <label class="price-label">Additional delivery cost (charged for round trip) upfront</label>
                            </div>
                            <div class="plan-features">
                                <ul>
                                    <li>20’ Standard Shipping Container</li>
                                    <li>One Trip Condition</li>
                                    <li>14 Gauge Steel Walls</li>
                                    <li>Wood Floors</li>
                                    <li>Lockable Cargo Double Doors</li>
                                </ul>
                            </div>
                            <div class="plan-footer">
                                <a href="#" class="btn btn-dark btn-modern btn-outline py-2 px-4">Apply Now</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4"></div>


                </div>
            </div>

The current layout is depicted below:

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

In this illustration, you'll notice that the first box is centered perfectly while the second one is not. How can I achieve proper centering using the Bootstrap grid system?

htmlcssbootstrap-4grid

Answer №1

There are 4 instances of col-md-4 divs that require organizing. Various methods can be employed to tackle this issue.

In the following example, unnecessary columns have been removed as a starting point for you to refine. Additionally, a Bootstrap row class has been added to the parent div with a pricing-table class to ensure responsiveness in your code. (Note: A row class was utilized in the top #rentals div but not in the lower section)

This is just a template for improvement: You could either insert additional content into a third col-md-4 within the row, or if extra content isn't available, consider switching to col-md-6 columns to center both plan divs on the page.

<!doctype html>
<html lang="en></html>

Answer №2

To optimize the grid layout, it is necessary to eliminate two instances of col-md-4: one from the top and another from the bottom. Additionally, include a line of code that reads 

<div class="row justify-content-center">
above the grid. This row aligns with Bootstrap's default class called Justify-content-center. For further guidance, refer to the following link: enter link description here

<div id="rentals" class="container pb-4">
        <div class="row pt-5 mt-5 mb-4">
            <div class="col text-center appear-animation" data-appear-animation="fadeInUpShorter">
                <h2 class="font-weight-bold mb-1">Container Rentals</h2>
                <p>Here are the containers we rent</p>
            </div>
        </div>
        <div class="pricing-table mb-4">
            <div class="row justify-content-center">

                <div class="col-md-4">
                    <div class="plan">
                        <div class="plan-header">
                            <h3>Short Term (6-12 Months)</h3>
                        </div>
                        <div class="plan-price">
                            <span class="price"><span class="price-unit">$</span>99</span>
                            <label class="price-label">per month</label>
                            <label class="price-label">Minium 6 months contract upfront</label>
                            <label class="price-label">Delivery cost additional (charged for round trip) upfront</label>
                        </div>
                        <div class="plan-features">
                            <ul>
                                <li>20’ Standard Shipping Container</li>
                                <li>One Trip Condition</li>
                                <li>14 Gauge Steel Walls</li>
                                <li>Wood Floors</li>
                                <li>Lockable Cargo Double Doors</li>
                            </ul>
                        </div>
                        <div class="plan-footer">
                            <a href="#" class="btn btn-dark btn-modern btn-outline py-2 px-4">Apply Now</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="plan">
                        <div class="plan-header">
                            <h3>Long Term (12+ Months)</h3>
                        </div>
                        <div class="plan-price">
                            <span class="price"><span class="price-unit">$</span>89</span>
                            <label class="price-label">per month</label>
                            <label class="price-label">Minium 12 months contract upfront</label>
                            <label class="price-label">Delivery cost additional (charged for round trip) upfront</label>
                        </div>
                        <div class="plan-features">
                            <ul>
                                <li>20’ Standard Shipping Container</li>
                                <li>One Trip Condition</li>
                                <li>14 Gauge Steel Walls</li>
                                <li>Wood Floors</li>
                                <li>Lockable Cargo Double Doors</li>
                            </ul>
                        </div>
                        <div class="plan-footer">
                            <a href="#" class="btn btn-dark btn-modern btn-outline py-2 px-4">Apply Now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer №3

Here is the code snippet:

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>

<body>

  <div class="container" id="rentals">
    <div class="row">
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="plan">
                        <div class="plan-header">
                            <h3>Short Term (6-12 Months)</h3>
                        </div>
                        <div class="plan-price">
                            <span class="price"><span class="price-unit">$</span>99</span>
                            <label class="price-label">per month</label>
                            <label class="price-label">Minium 6 months contract upfront</label>
                            <label class="price-label">Delivery cost additional (charged for round trip) upfront</label>
                        </div>
                        <div class="plan-features">
                            <ul>
                                <li>20’ Standard Shipping Container</li>
                                <li>One Trip Condition</li>
                                <li>14 Gauge Steel Walls</li>
                                <li>Wood Floors</li>
                                <li>Lockable Cargo Double Doors</li>
                            </ul>
                        </div>
                        <div class="plan-footer">
                            <a href="#" class="btn btn-dark btn-modern btn-outline py-2 px-4">Apply Now</a>
                        </div>
                    </div>
        </div>

        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="plan">
                        <div class="plan-header">
                            <h3>Long Term (12+ Months)</h3>
                        </div>
                        <div class="plan-price">
                            <span class="price"><span class="price-unit">$</span>89</span>
                            <label class="price-label">per month</label>
                            
                            <label class="price-label">Minium 12 months contract upfront</label>
                            <label class="price-label">Delivery cost additional (charged for round trip) upfront</label>
                        </div>
                        <div class="plan-features">
                            <ul>
                                <li>20’ Standard Shipping Container</li>
                                <li>One Trip Condition</li>
                                <li>14 Gauge Steel Walls</li>
                                <li>Wood Floors</li>
                                <li>Lockable Cargo Double Doors</li>
                            </ul>
                        </div>
                        <div class="plan-footer">
                            <a href="#" class="btn btn-dark btn-modern btn-outline py-2 px-4">Apply Now</a>
                        </div>
                    </div>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        </div>
    </div>
</div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVofoAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>

View the code in action here:https://jsfiddle.net/pjszxret/8/

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

Can you explain the meaning of the tag "&" ">" "*" in the context of useStyles functions?

After experimenting with React and Material-UI, I came across an interesting pattern in the code. When using the useStyle function, developers often create a class called 'root' and utilize the tag & > *. I tried to research the meaning be ...

cssreactjssassmaterial-ui

Please refrain from refreshing the page multiple times in order to receive updated data from the database

Currently, I have created a countdown timer from 00:60 to 00:00. However, once the timer reaches 00:00, I am looking to refresh the page only once in order to retrieve a new value from the database. Does anyone have any suggestions on how to achieve this ...

javascriptphpjqueryhtml

Maintain the proportion of the browser window when reducing its size

<html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <img src="spacer--1200x800.png" width="1200" height="800" /> </body> </html> This section contains CSS ...

javascripthtmlcss

Exploring the process of constructing this form with the assistance of Bootstrap

Create Dropdown Form https://i.sstatic.net/rqJtS.png I am looking to create a form that allows for updating team scores based on kills. I am struggling to divide the form into 2 sections for input, as demonstrated. I am using only bootstrap for styling, ...

htmlformsbootstrap-5

What is the process for adjusting the color of a particular date in the <input type=Date> field?

Is there a way to modify the styling, such as color, of the input type date in HTML 5? In HTML 5, we can display a calendar using <input type=date>. For example, if March 23rd is a holiday and I want to highlight this specific date in red, how can I ...

jquerycsshtmldatecalendar

Exploring cross-browser compatibility with the use of CSS3 and JavaScript

Starting a new project to create a fresh website. It seems like many people are leaning towards CSS3 and AJAX, neglecting browsers without JavaScript support. They resort to workarounds like enabling CSS3 through JavaScript in older browsers. Is this the ...

javascriptcssbrowsercompatibility

Currently at the beginning stages of mastering CSS and encountering difficulties with the display property

I am facing an issue with my code .name-bar, .email-bar { border-color: gray; border-style: solid; display: inline-block; } .email-bar { margin-top: 5px; } .div-one, .div-two { border-color: gray; border-style: solid; width: 200px; h ...

htmlcssdisplay

How do I enable automatic playback for a vimeo video using the embed tag?

Currently, I am facing a challenge with the following embed tag in my HTML file: <embed src='{{"https://player.vimeo.com/video/{$videouri}?autoplay=true"}}'width="300" height="361" /> I am experiencing difficulties when trying to use the ...

phphtmllaravelvimeo

How can I display the Bootstrap 5.3.0 Collapsible button on this basic website?

I've been struggling to implement a Bootstrap Collapsible on my web page using Bootstrap version 5.3.0. I've tried different approaches but I can't seem to get it to work. All I need is a Collapsible that contains a few links, which should b ...

javascripthtmlbootstrap-5

Incorporate additional form element functionalities using radio inputs

Recently, I created code that allows a user to duplicate form elements and add values by clicking on "add more". Everything is functioning properly except for the radio inputs. I am currently stuck on this issue. Does anyone have any suggestions on how I c ...

javascriptjqueryhtml

Encountering a syntax error when attempting to generate a div dynamically with jQuery

I am in the process of creating a view application form using Bootstrap after submitting a form. Initially, I created it utilizing two 'div' elements. Now, I am exploring how to dynamically generate a div upon clicking a button: <i> Sectio ...

javascriptjqueryhtmlcssjson

Boxes that change and adapt to the user's input

Need guidance on a tricky problem! I am working on a form to input various cities that the user wants to visit. The form currently consists of one form box and a submit button. My goal is to allow the user to enter multiple cities by clicking an "Add 1 ...

javascriptphphtml

Issue encountered when toggling flip switch in Jquery Mobile

I am trying to create a calculator for my app using Jquery Mobile, but I am facing an issue with the flip toggle switch. Here is my script: <script type="text/javascript"> function dosis() { $peso = $('#peso').get(0).value $dosis = ...

javascripthtmljquery-mobile

Employing jQuery to save the href value as a fresh variable

There is an anchor tag with id 'item-1' that needs to be stored in a new variable called 'href'. The tag looks like this: <a id='item-1' href='#something'> To achieve this using jQuery, what approach should be ...

jqueryhtmlfrontend

Sending jQuery variables to PHP

Is it possible to transfer a jQuery variable to a php file? Let's take a look at the code in my_js.js: function updates() { $.getJSON("php/fetch.php", function(data) { $.each(data.result, function(){ var s_id = this[& ...

phpjqueryhtml

Deleting entries from a selection of items in a list generated from an auto-fill textbox

I have successfully implemented an auto-complete Textbox along with a styled div underneath it. When the client selects an item from the Textbox, it appears in the div after applying CSS styling. Now, I am looking to create an event where clicking on the s ...

javascriptjqueryhtmlcssjquery-ui

Unresponsive Radio Buttons in HTML

Have you ever encountered the issue where you can't seem to select radio buttons despite them having a confirmed name attribute? Here is an example of the HTML code: <div id="surveys-list" class="inline col-xs-12"><div> <div class="i ...

javascriptjqueryhtmlcssradio-button

The webpage functions properly when viewed locally, but only displays the background color when accessed online

My friend created a website using Microsoft Publisher a while back, and upon revisiting it recently, discovered that it doesn't load properly on the latest versions of Chrome and Firefox. When viewed locally, everything appears to work fine, but onlin ...

html

Problem with JavaScript and Basic HTML5 Canvas

I'm trying to dive into learning about using a canvas, but I just can't seem to get this basic code to work. Does anyone know what I might be doing wrong? Link to jsfiddle <canvas id="ctx" width="500" height="500" style="border:1px solid #00 ...

javascripthtmlcanvas

Dealing with a syntax error in JavaScript (Codecademy)

I have been working my way through the JavaScript course on Codeacademy and for the most part, I've been able to figure things out on my own. However, I've hit a roadblock with my code and can't seem to get it right. Here is the code I&apos ...

javascriptjqueryhtmlsyntax-error