The cards are not occupying the row as planned

The layout includes a navbar, side panel, and main panel for displaying data. I have nested rows and am trying to display 3 cards in the last nesting that fill the entire remaining width, but they are currently stuck to the left side:

<!doctype html>
<html>

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

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <link href="css/sidebar.css" rel="stylesheet">

  <title>Sidebar + Main Panel</title>

</head>

<body>

  <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Sidebar + Main Panel</a>
    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

    <ul class="navbar-nav px-3">
      <li class="nav-item text-nowrap">
        <a class="nav-link" href="#">Sign out</a>
      </li>
    </ul>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
        <div class="sidebar-sticky pt-3">
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link active" href="#">
                                    SidebarItem1
                                </a>
            </li>
            ...
            </ul>
      </nav>

      <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
        <div class="row" style="background:black;">
          <div class="card-deck mb-3 text-center">
            
            <!-- Cards Go Here -->
          
          </div>
        </div>
      </main>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>

</html>

I am attempting to center rows of 3 cards in the Main panel space, but currently, they appear shifted to the left side. You can see it more clearly with the black background applied. The layout is meant for desktop viewing, without responsiveness.

csstwitter-bootstrapbootstrap-4

Answer №1

To center the card deck class, adjust the margin left and right values to auto:

.card-deck {
    margin-left: auto;
    margin-right: auto;
}

Answer №2

To ensure that the three cards in the row are centered with a black background, you must include a horizontal margin within the 

div class="card-deck mx-auto mb-3"

Horizontal margin set to auto in Bootstrap is achieved with mx-auto

Alternatively, this can also be accomplished using Vanilla CSS

.card-deck {
margin-left: auto;
margin-right: auto;
}

Tip: If there is only one instance of .card-deck on the page, consider assigning it an id instead - such as id="card-deck"

Answer №3

If you want to center the 'card-deck' elements, try adding the class 'justify-content-center' to the parent row or applying the style 'margin: 0 auto;' directly to the 'card-deck' class.

Good luck with your project!

Answer №4

Your code has several issues, particularly with the sidebar. Although you didn't ask for help on that specific issue, it's crucial to address it first as it's negatively impacting your design.

To center align your pricing table, you can simplify your structure by removing the row inside main and utilizing card-deck instead (reference: Pricing table simple).

<!doctype html>
<html>

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

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13717c7c67606761726353273d253d23">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <link href="css/sidebar.css" rel="stylesheet">

  <title>Sidebar + Main Panel</title>


</head>

<body>

  <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Sidebar + Main Panel</a>
    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

    <ul class="navbar-nav px-3">
      <li class="nav-item text-nowrap">
        <a class="nav-link" href="#">Sign out</a>
      </li>
    </ul>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
        <div class="sidebar-sticky pt-3">
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link active" href="#">
                                    Sidebar Item 1
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                                     Sidebar Item 2
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                                     Sidebar Item 3
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                                    Sidebar Item 4
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                                    Sidebar Item 5
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                                    Sidebar Item 6
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">     
                                    Sidebar Item 7
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">     
                                   Sidebar Item 8
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">                                       Sidebar Item 9
                                </a>
            </li>
          </ul>
      </nav>

      <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4" style="background-color: #000">
        
        <div class="card-deck mb-3 text-center">
        <div class="card mb-4 shadow-sm">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">Free</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
                <ul class="list-unstyled mt-3 mb-4">
                    <li>5 users included</li>
                    <li>2 GB of storage</li>
                    <li>Email support</li>
                    <li>Help center access</li>
                </ul>
                <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
            </div>
        </div>
        <div class="card mb-4 shadow-sm">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">Pro</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title pricing-card-title">$25 <small class="text-muted">/ mo</small></h1>
                <ul class="list-unstyled mt-3 mb-4">
                    <li>20 users included</li>
                    <li>10 GB of storage</li>
                    <li>Priority email support</li>
                    <li>Help center access</li>
                </ul>
                <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
            </div>
        </div>
        <div class="card mb-4 shadow-sm">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">Enterprise</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title pricing-card-title">$99 <small class="text-muted">/ mo</small></h1>
                <ul class="list-unstyled mt-3 mb-4">
                    <li>Unlimited users included</li>
                    <li>50 GB of storage</li>
                    <li>Phone and email support</li>
                    <li>Help center access</li>
                </ul>
                <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
            </div>
        </div>
    </div>
          
      </main>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187a77776c6b6c6a7968582c362e3628">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

</body>

</html>

Answer №5

To achieve a full-width layout, remove the div with the card-deck class and keep only the inner col-md-4. If you prefer to center your cards while maintaining background all around, just add the style margin:0 auto to your .card-deck class.

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 technique for vertically aligning text within two divs placed side by side?

Thank you for taking the time to read this. I have a piece of code similar to the one below. While using line-height works when there is only one line of text, it becomes problematic when the comments section contains multiple lines. I am wondering what w ...

htmlcss

How can the radio button's checked property be bound to a boolean attribute of a component in Angular 2?

Is there a way to connect the checked property of a radio button to a boolean variable in a Component class? I would like the radio button in the template to be pre-selected if the boolean flag is true. I attempted to use <input type="radio" [(ngModel) ...

javascripthtmlcsstypescriptangular

Combining CSS, jQuery, and HTML into a single .html file would allow for seamless integration

I've been searching extensively, but I haven't been able to locate exactly what I need. My goal is to merge my jQuery and CSS into a single .html file, but I'm struggling to get the jQuery functionality to work. Although I have experience wi ...

javascriptjqueryhtmlcss

Checkbox malfunctioning when iterated with Angular's ng-repeat directive

Hey! I'm currently working on creating checkboxes using the Angular ng-repeat directive. However, I've run into an issue where the checkboxes are not being checked/unchecked when clicked. My code also includes Bootstrap CSS. Here's a snippet ...

javascriptjqueryangularjstwitter-bootstrapcheckbox

Three images intersecting one another

I am facing an issue with the transparency of one specific image. The images on the left and center look fine, but the one on the right is not hidden behind the center image. I have tried using overflow: hidden and z-index, but haven't had any success ...

htmlimagecss

Display Google Maps and YouTube videos once user consents to cookies

I recently installed a plugin on my WordPress site called Cookie Notice, which I found at this link. So far, I've been impressed with how user-friendly and lightweight it is. Due to the latest GDPR regulations, I now need to figure out a way to hide ...

javascripthtmlcsswordpress

How to apply styles to a child component using CSS modules in a parent component

For the styling of a Material UI component (Paper) within a Menu component, I am referencing this documentation. To style my components using CSS modules with Webpack as the bundler, here's an example: // menu.js import React from 'react'; ...

javascriptcssreactjsmaterial-uistyling

place an image next to a div element

Currently, I have a table-like structure with two columns that I am struggling to make mobile responsive. Take a look at the code snippet below: setTimeout(function() { odometer.innerHTML = '1925' }) .fiftyFiftySection { back ...

javascripthtmlcss

It can be extremely challenging to use Bootstrap classes with ReactJS

When utilizing a Bootstrap class like class='col-6' to create a grid system, it is important to note that it applies relatively to the <div id='root'> and not the actual body element where the React application is rendered. Withi ...

twitter-bootstrapreactjsapibootstrap-4

Ensure that the div stays in the same position regardless of the screen resolution

On my webpage, I have a page header with a select menu that needs to be properly positioned on top of the background image. How can I ensure it stays in place when the screen resolution changes? Here is how it looks on a larger resolution: <div c ...

htmlcss

Tips for seamlessly hiding display images with HTML

In my quest to create a basic image slider, I've managed to achieve it using a combination of JavaScript and HTML. Take a look at the code provided below. I've included all the necessary codes for clarity's sake. However, the issue arises w ...

htmlcss

Is there a problem with the layout or indexing?

My website features a div that animates in using a jQuery click function, appearing over other divs that have animated in on $(document).ready(). Strangely, this div shows up behind the others only on the home page of my website and not on any other pages, ...

jquerycssanimationindexing

The visual content I have does not fill up the entire screen, which results in some empty spaces in the layout

Whenever I insert an image, I strive to have it fill the entire space but end up with white gaps. This is my code: <div style="background-image: url('../assets/img/food-with-ingredients.jpg'); -webkit-background-size: cover; -moz-back ...

cssbootstrap-5

How can we use CSS and JavaScript to transform <td> elements into a visually appealing bar graph?

Is there a way to visually represent a percentage in an HTML table cell using either CSS or JavaScript? I want to create a bar graph effect next to the percentage value, and I'm unsure which method would be easier. The web page is built using a combin ...

phpjavascripthtmlcss

Adjustable dimensions and proportions for the following image

I'm currently working on a blog page using next.js and I've encountered an issue with displaying images. Each post has a main image of varying dimensions and aspect ratios, making it difficult to maintain consistency when scaling for smaller scre ...

cssnext.js

${IDHERE} element's text color not changing when tab is switched

One dilemma I encountered involves displaying a percentage on a webpage with 2 tabs. The percentage is originally shown on the tab that is open when the page loads. The JavaScript code I used is quite straightforward: adaPercentColor(percent, ada) { ...

javascripthtmlcssangular

The expression `Object.prototype.toString.call(currentFruit) === "[object Date]"` checks if the object referenced by `current

Hi, I'm just starting to learn JavaScript and I have a question about an if condition that I came across in my code. Can someone please explain what this specific if condition does? Object.prototype.toString.call(currentFruit) === "[object Date]& ...

javascripthtmljquerycssjquery-events

How to centrally align grids in a material-ui react application

I'm trying to center Grid items horizontally inside a Grid container, while also adding some spacing between the items. Here's the code I have so far: import React from "react"; import { makeStyles } from "@material-ui/core/styles& ...

cssreactjsmaterial-uigrid

List of assorted strings in an ArrayList

I recently purchased the book "Head First Java" and decided to tackle the exercise called Sink a Startup. As I progressed through the book, it introduced me to ArrayLists and demonstrated how they can be used in classes and methods. However, when I repla ...

javastringarraylistbootstrap-4integer

How to refresh the page when pausing the YouTube iframe API

I'm encountering an issue with my code where I am trying to refresh the page when exiting or pausing full screen mode. Exiting full screen is working as expected, however, pausing using the YouTube iframe API's "onstatechange" event does not seem ...

javascripthtmlbootstrap-4youtubeyoutube-api