What is the best way to center and restrict the content on a page using Bootstrap?

I am trying to achieve a similar effect in Bootstrap 5 as the following CSS code:

margin: 0 auto;
width:60%;

In Bootstrap, this code aligns items to the left of the page rather than center. How can I limit the width to the middle 60% and then distribute the content evenly across 2 columns?

Edit: Here is the HTML code (style.css only contains text-align and colors):

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c1e1313080f080e1d0c3c49524d524c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

    <link rel="stylesheet" href="style.css">

    <title>Bootstrap</title>
</head>

<body>
    <div class="container-fluid">
        <header class="row">
            <div class="col-12" id="header_id"></div> <!--header_id is just for a background image-->
        </header>
        <section class="row">
                <article class="col-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates animi ratione esse, aut
                    vel iusto voluptas voluptatum illo suscipit veniam, laudantium qui, quidem nihil eaque repellendus
                    ducimus facilis velit sequi.</article>
                <article class="col-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates animi ratione esse, aut
                    vel iusto voluptas voluptatum illo suscipit veniam, laudantium qui, quidem nihil eaque repellendus
                    ducimus facilis velit sequi.</article>
                <article class="col-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates animi ratione esse, aut
                    vel iusto voluptas voluptatum illo suscipit veniam, laudantium qui, quidem nihil eaque repellendus
                    ducimus facilis velit sequi.</article>
                <article class="col-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates animi ratione esse, aut
                    vel iusto voluptas voluptatum illo suscipit veniam, laudantium qui, quidem nihil eaque repellendus
                    ducimus facilis velit sequi.</article>
                <article class="col-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates animi ratione esse, aut
                    vel iusto voluptas voluptatum illo suscipit veniam, laudantium qui, quidem nihil eaque repellendus
                    ducimus facilis velit sequi.</article>
        </section>
        <footer class="row">
            <div class="col-12 align-center static-bottom">LICENCE</div> <!-- align-center is just for aligning text -->
        </footer>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17747865725725392e3924">[email protected]</a>/dist/umd/popper.min.js"
        integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee8c81819a9d9a9c8f9eaedbc0dfc0de">[email protected]</a>/dist/js/bootstrap.min.js"
        integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/"
        crossorigin="anonymous"gt;</script>
</body>

</html>
htmlcssbootstrap-5

Answer №1

It seems like you gave the auto class a shot.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12707d7d66616660736252273c223c20">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f1d10100b0c0b0d1e0f3f4a514f514d">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43202c312603716d7a6d71">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad8d5d5cec9cec8dbcafa8f948a9488">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

<div class="col-md-auto mb-4 text-center">
    <div class="card bg-light mb-3 shadow-sm h-100 mx-auto" style="max-width: 18rem;">
      <div class="card-header"><span class="reportTitle">Test</span></div>
      <div class="card-body">
          <p class="card-text">Look I'm Centered</p>
      </div>
      <div class="card-footer">
          <div class="d-flex justify-content-between align-items-center">
                      <div class="btn-group">
                          <a href="#"  type="button" class="btn btn-sm btn-outline-primary" target="_blank">App</a>
                      </div> 
          </div>
      </div>
    </div>
    </div>

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

Utilize Bootstrap columns to maximize vertical space efficiency

I recently came across a bootstrap layout like this: https://i.sstatic.net/VXBCF.png In this setup, there is a single .row that contains 8 .col-lg-3 divs. However, I noticed that there is excessive vertical whitespace present, which not only looks undesi ...

htmlcsstwitter-bootstrap

Differentiating CSS Styles for Odd and Even Table Elements

I am trying to implement a style where every other row in my table (myrow) has a different background color. However, currently it is only showing the color specified for odd rows. .myrow, .myrow:nth-of-type(odd) + .myrow:nth-of-type(even) ~ .myrow: ...

htmlcss

Creating a Cross-Fade Effect in easySlider 1.7 using the Jquery Plugin

Want to achieve a cross-fade effect in easySlider 1.7 Jquery Plugin? Check out this tutorial Easy Slider 1.7 for guidance. Appreciate any help, thanks! ...

jquerycssjquery-pluginseasyslider

Troubleshooting: Ruby on Rails and Bootstrap dropdown issue

Having some issues with implementing the bootstrap dropdown functionality in my Ruby on Rails application's navigation bar. I have made sure to include all necessary JavaScript files. Below is the code snippet: <div class="dropdown-toggle" d ...

javascriptcssruby-on-railsrubytwitter-bootstrap

Guide on generating a child element in a React application using server response

I have developed a react application with multiple nested routes. One of the nested routes utilizes a backend API that returns complete HTML content. My goal is to display this HTML content with the same styling in my UI without directly manipulating the ...

htmlreactjsreact-dom

I am experiencing issues with the functionality of the jQuery function

I am currently diving into the world of jquery. I put together a script, but unfortunately it's not functioning as expected. 1 Here is a snippet of my HTML code <ul id="recur" class="elasticstack"> <li id=<?=$item['id']?> ...

phpjqueryhtml

The animation on my jQuery script seems to be malfunctioning

I'm encountering an issue with a div element that is partially off the screen and should move out when a button is clicked. I've shared my script here, but it seems to not work as intended when the button is pressed. The visualization in jsfiddle ...

jqueryfacebookhtml

What steps should I take to address the issues with my quiz project?

I've been working on a new project that involves creating a quiz game. I came across some code online and decided to customize it for my needs. However, I'm encountering some issues with the functionality of the game. Right now, the questions ar ...

javascripthtmlbuttondom-events

Struggling to implement a Datepicker in the date column of a table created using HTML and JavaScript

I am encountering an issue while creating a table in html and javascript. I am unable to use a Datepicker in the date column when inserting a new row, even though it works fine when using in normal html code. Below is the javascript function: //Script fo ...

javascriptphpjqueryhtmlcss

How can one conceal all li elements except for one during a loop on Vue.js version 2.6.11?

To provide a better understanding of the problem, I have included screenshots of the layout. Static Layout Layout when question was clicked There are multiple questions that will be displayed through a loop. Each question is contained within an li tag. ...

javascripthtmlvue.jsvuejs2bootstrap-5

Necessary Selection from Dropdown

I've created a contact form with both optional and required fields. One of the mandatory fields is a drop-down menu, which looks like this: <div> <select name="favFruit[]" size="1" required> <option value="apple">Apple&l ...

jqueryhtmljquery-validateselectlist

Having trouble getting the Pokemon modal to show both the type and image?

HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First JS App</title> <lin ...

javascripthtmlbootstrap-4bootstrap-modal

What is the best way to incorporate code into a page with numerous conflicting CSS styles, without resorting to Scoped CSS?

Struggling to incorporate tab code into a page with conflicting CSS? Even after attempts to edit classes and labels, the original code fights back against the new additions. While scoped CSS seems like the perfect fix, it's not widely supported yet. ...

htmlcssmerge

Swapping values between HTML tables and arrays with the power of JavaScript

I have a unique table structure that I need help with: https://i.sstatic.net/fr7oJ.png My current table has 2 rows and multiple columns, but I want to change it to have 2 columns and multiple rows like this: https://i.sstatic.net/uhkp9.png To create th ...

javascripthtmlcsshtml-tabletranspose

Is there a way to repurpose a JavaScript object that gets sent back to the client upon page loading?

Upon initial page load, an AJAX request fetches a list of JavaScript objects which display only one value each. The page includes buttons to expand each item and reveal the remaining values. Originally, I used another AJAX call to retrieve individual objec ...

javascripthtmlnode.jsajaxexpress

Displaying a JQuery notification when hovering over a link

I am having trouble getting an alert to pop up when I hover over a hyperlink using JQuery and Javascript. The hyperlink is inside an anchor within the main section of the HTML. Any assistance would be much appreciated. Here is my current code snippet: &l ...

javascriptjquerycsshtml

Something is off with the CSS height property

I am facing an issue with setting the height of a div inside another div. To better illustrate my problem, here is the code snippet: .prodContent1 { position: absolute; background-color: #e1e1e1; border: 1px solid #ddd; width: 100%; box-sizi ...

htmlcssheight

Tips for creating stylish diagonal backgrounds using Bootstrap 5

Is there a way to achieve diagonal styled backgrounds, like the examples shown below, while using Bootstrap 5 and (s)css? It would be ideal if this could be seamlessly integrated with other Bootstrap background utilities as outlined in the documentation h ...

htmlcsstwitter-bootstrapsassbootstrap-5

The browser fails to implement styling prior to a demanding workload

Is it possible to refresh a section of my webpage that contains numerous DOM elements? My ideal approach would be to hide the section using visibility: hidden;, then redraw it, and finally set visibility back to visible;. However, I've encountered an ...

javascripthtmlcssgoogle-chromedom

Using Python in Django to seamlessly add products to the shopping cart

Seeking guidance in creating a simple function that can capture the product ID and insert it into the user's shopping cart upon clicking the "add to cart" button. I have already set up the shopping cart table and the product table but am struggling to ...

pythonhtmldjangofunctionshopping-cart