What is the best way to align several columns at the center in Bootstrap?

I'm struggling to center-align Card 1 so that it perfectly aligns in the middle of the page alongside the other cards (Card 2, Card 3, Card 4, Card 5).

Despite numerous attempts, I can't seem to find a solution for this issue.

Does anyone know how I can achieve this?

Here is the code snippet:

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,  
  initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="containter">
    <div class="row">
      <div class="col-sm-4 py-2">
        <div class="card card-body h-100 text-center">
          <h5 class="card-title">Card 1</h5>
          <p class="card-text">
            <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
          </p>
        </div>
      </div>
      <div class="col-md-8">
        <div class="row justify-content-center">
          <div class="col-sm-4 py-2">
            <div class="card card-body h-100">
              <h5 class="card-title">Card 2</h5>
              <p class="card-text">
                <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
              </p>
              <button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration: none" href="">Get More</a></button>
            </div>
          </div>
          <div class="col-sm-4 py-2">
            <div class="card card-body h-100">
              <h5 class="card-title">Card 3</h5>
              <p class="card-text">
                <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
              </p>
              <button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration: none" href="">Get More</a></button>
            </div>
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-sm-4 py-2">
            <div class="card card-body h-100">
              <h5 class="card-title">Card 4</h5>
              <p class="card-text">
                <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
              </p>
              <button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration: none" href="">Get More</a></button>
            </div>
          </div>
          <div class="col-sm-4 py-2">
            <div class="card card-body h-100">
              <h5 class="card-title">Card 5</h5>
              <p class="card-text">
                <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                <br>
              </p>
              <button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration:none" href="">Get More</a></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

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

htmlcss

Answer №1

Although I'm not entirely certain of your exact requirements, I have endeavored to create a layout that aligns with the description you provided.

The modifications I implemented include:

d-flex flex column

col-md-8 and col-sm-6

<!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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>

  


 
<div class="container">
    <div class="d-flex flex-column">

        <!-- card -->
        <div class="col-md-8 py-2"> 
            <div class="card card-body"> 
                <h5 class="card-title">Card 1</h5> 
                <p class="card-text"> 
                  <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                </p>  

            </div> 
        </div> 
        
        <div class="col-md-8">
            <!-- Row starts -->
            <div class="row justify-content-center"> 
                <!-- Labor Market Data card -->
                <div class="col-sm-6 py-2"> 
                    <div class="card card-body h-100"> 
                        <h5 class="card-title">Card 2</h5> 
                        <p class="card-text"> 
                            <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                        </p>  
                        <!-- Get More button -->
                        <button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration: none" href="">Get More</a></button>
                    </div> 
                </div> 


                <!-- Publications card -->
                <div class="col-sm-6 py-2"> 
                    <div class="card card-body h-100"> 
                        <h5 class="card-title">Card 3</h5> 
                              <p class="card-text"> 
                                  <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                              </p> 
                                        
                              <!-- Get More button -->
                              <button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration: none" href= "">Get More</a></button>            
                    </div> 
                </div> 
            </div>
            <!-- Row ends -->

            <!-- row starts -->
            <div class="row justify-content-center"> 
                <!--card -->
                <div class="col-sm-6 py-2"> 
                      <div class="card card-body h-100"> 
                          <h5 class="card-title">Card 4</h5> 
                          <p class="card-text"> 
                                <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                          </p> 
                          <!-- Get More button -->
                          <button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration: none" href= "">Get More</a></button>
                                  </div> 
                </div>
                <!-- card -->
                <div class="col-sm-6 py-2"> 
                    <div class="card card-body h-100"> 
                        <h5 class="card-title">Card 5</h5> 
                        <p class="card-text"> 
                            <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                          <br>
                        </p> 
                        <!-- Get More button -->
                        <button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style= "text-decoration:none" href="">Get More</a></button>
                                  </div> 
                </div>     
            </div>
            <!-- row ends -->
        </div>
        

    </div>
</div>




<!-- Container ends here -->

Answer №2

Based on your question, it seems like you want to position Card 1 at the center and top of the page. To achieve this, the code snippet provided below will help accomplish that task.

Here are some modifications I made to your existing code:

  1. You mistakenly typed container as containter.
  2. To align Card 1 in the center of the top row, I placed it in its own row and applied the justify-content-center class to it.
  3. All other cards remain in a separate row.

You can see the updated code with comments explaining the changes:

<!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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>

  <body>
  
    <div class="container">
      <div class="row justify-content-center">  <!-- Centering Card 1 -->

        <!-- Card 1 -->
        <div class="col-sm-8 py-2"> <!-- Adjusted card width to 8 from 4 -->
          <div class="card card-body h-100">
            <h5 class="card-title">Card 1</h5>
            <p class="card-text">
              <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
            </p>

          </div>
        </div>
      </div>  <!-- End of Row for Card 1 -->
      
      <div class="row">  <!-- New row for the remaining cards -->
        <div class="col-md-12">
          <!-- Labor Market Data card starts here -->
          <div class="row justify-content-center">
            <div class="col-sm-4 py-2">
              <div class="card card-body h-100">
                <h5 class="card-title">Card 2</h5>
                <p class="card-text">
                  <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                </p>
                <button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration: none" href="">Get More</a></button>
              </div>
            </div>

            <div class="col-sm-4 py-2">
              <div class="card card-body h-100">
                <h5 class="card-title">Card 3</h5>
                <p class="card-text">
                  <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                </p>
                <button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration: none" href="">Get More</a></button>
              </div>
            </div>
          </div>
          
          <div class="row justify-content-center">
            <div class="col-sm-4 py-2">
              <div class="card card-body h-100">
                <h5 class="card-title">Card 4</h5>
                <p class="card-text">
                  <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                </p>
                <button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration: none" href="">Get More</a></button>
              </div>
            </div>
            
            <div class="col-sm-4 py-2">
              <div class="card card-body h-100">
                <h5 class="card-title">Card 5</h5>
                <p class="card-text">
                  <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                  <br>
                </p>
                <button type="button" class="mt-auto btn btn-lg btn-block btn-outline-primary"><a style="text-decoration:none" href="">Get More</a></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

Thank you for your attention!

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

AJAX (Vanilla JavaScript): Sending Image through HTTP Request

I am a beginner with ajax and prefer not to use frameworks. I attempted to use PHP to determine if a file is set and display either true or false, but it didn't work as expected. I'm unsure of where I went wrong. Below is my HTML and JS code: & ...

javascriptphpajaxhtml

Encountering an issue when attempting to store image links in the database using PDO

One idea that I have is to create an image uploader system that sends the image to the 'upload' folder and saves the link to the database. I encountered errors in my 'images.php' file. Can anyone assist me with resolving these issues? ...

phphtmlajaxfile-uploadpdo

What is the best way to extend the final column of a table across the entire width?

Here's the code I'm working with: .frm-find-people table td:nth-child(1) { padding: 5px 15px; width: 100px } .frm-find-people table td:nth-child(2) { border: 1px solid red; } <form class="frm-find-people"> <table> ...

htmlcss

Changing color based on AngularJS condition using CSS

My HTML code looks like this: <div> <i class="glyphicon glyphicon-envelope" style="margin-top: -50px; cursor:pointer; color: #1F45FC" ng-click="createComment(set_id)"> </i> Route <center> ...

javascripthtmlcssangularjs

The table is too large for the parent div in which it is placed, causing

Check out this example I have for putting a table in a div and making it fill the div: ex1_jsfiddle table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; height: 100%; table-layout: fixed; } td, th { border: 1px sol ...

htmlcss

Styling will_paginate Links in Rails 3 - A Guide

When it comes to coding layout, how should the link be styled? <a href="#" class="class1 class2 class3"><span>Previous</span></a> <a href="#" class="class1 class2 class3"><span>Next</span> In my search for a solu ...

htmlcssruby-on-rails-3viewwill-paginate

Ways to create a line break within an <input> element with type="text"

https://i.stack.imgur.com/fCh87.png Is there a method to transform the Description field so that it displays as two lines instead of just one line? <label>Description</label> <input type="text" name="description" size=&q ...

html

Tips for generating a document and adding information from an HTML webpage?

My desktop has an html file which requires input. How can I save this input to a file on my computer? Do I need to use a different language like python or javascript, and if so, how do I do it? Additionally, is there a way for javascript to launch an app ...

javascriptpythonhtmlfileserver-side

Automate Chrome browser to continuously refresh until desired item is located using Selenium and Chromedriver

I am attempting to create a Python script using selenium that will continuously refresh the current Chrome page until a specific item, identified by driver.find_element_by_partial_link_text("Schott"), is found. This is what I had in mind: while not drive ...

pythonhtmlgoogle-chromeseleniumselenium-chromedriver

Extracting text from an HTML file and passing it to an Express.js server: A beginner

Currently, I'm attempting to retrieve the values from an HTML text field and store them in variables. I require HTML to capture these values and return the response within the .html file. HTML: <body> <form> ...

javascripthtmlnode.jsexpress

Javascript window.scroll function malfunctioning in some browsers while running in localhost

Check out this codepen link where everything is working, but unfortunately not locally: https://codepen.io/LoudDesignStudios/pen/RwxPJKY <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> < ...

javascripthtmlcss

Is there a way to collect multiple optional phone numbers dynamically using DOM manipulation?

I have a piece of code here where I am looking to dynamically add additional phone numbers as an optional field. Can anyone help me figure out how to achieve this? <div class="col-12 row border my-2 py-2"> <di ...

javascripthtmldombootstrap-5

Implementing hover effect triggered by keyboard input

Is there a way to create a hover effect on a div when a specific key is pressed on the keyboard using jQuery? <div id="d-up" class="button"></div> Appreciate any help with this! Thank you. ...

javascriptjqueryhtmlcss

The best approach to incorporating interactive animation in next.js

My vision is to develop a character creation application using next js. The app should empower users to customize the character using sliders and gender selection buttons. The ultimate goal is to have a 2D animated version of the character that dynamicall ...

javascriptcssnext.jsfrontendcss-animations

Sending data from Angular to the DOM

Is there a way to dynamically pass a property to an HTML tag using Angular? <div class="my-class" data-start="10"> I am trying to figure out how to pass the value of data-start dynamically. This is for an Angular 5 application. Any advice would be ...

htmlangularangular-directive

Tips for locating a webpage element with Selenium?

click here for image driver=webdriver.Chrome() driver.get("https://compass.tinkoff.ru/") driver.maximize_window() driver.implicitly_wait(20) elem = driver.find_element(By.XPATH, '//button[text()="Open Full Map"]').click() tim ...

pythonhtmlselenium-webdriverelement

What could be the reason my checkbox won't check using jQuery?

Currently, I am using kojs within my Magento 2 project. I have implemented a method that successfully shows and hides an input box based on user interaction. However, despite the function working as expected, the checkbox does not display its checkmark. D ...

htmljquerymagento

Adjust the size using padding alone

My CSS specifies font size of 14px, line height of 14px, and padding of 7px on the top and bottom. The total should be 28px. When I apply these styles in a div, it results in a height of 28px. However, when applied to a ul li a element, the height becomes ...

csshtml-lists

"Enhanced Web Interactions with JavaScript Animations

I've been diving into my JavaScript project lately. I'm currently focusing on creating some cool animations, particularly one that involves making a ball bounce up and down. My code seems to work flawlessly for the downward bounce, but I'm f ...

javascripthtmlcss

Leveraging a JQuery plugin to generate dynamic HTML content

Recently, I came across a fantastic JQuery plugin that Stack Overflow graciously provided for everyone to use :) Auto-size dynamic text to fill fixed size container However, I encountered a little challenge while trying to implement this on an HTML eleme ...

jquery.nethtmlasp.net-mvc-2