Is there a way to align all the content in a Bootstrap card to the center?

Need help centering content in a bootstrap card for my semester project. Can't seem to get it right!

If anyone can assist, I would really appreciate it.

Also hoping to increase the height of the card if possible.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5855554e494e485b4a7a0f140b9">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="card mt-5 container p-5 card-w ">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="https://via.placeholder.com/600" class="card-img" alt="apples">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title h1 pl-5 mx-2 d-flex">Apple, Empire</h5>
        <p class="card-text pl-5 mx-2 lead font-weight-bold d-flex">1.94$/kg</p>
        <div class="container d-flex alignmentcard">
          <div class="d-flex mx-3">
            <a href="#" class="btn btn-white">-</a>
            <p class="pt-2 lead">1</p>
            <a href="#" class="btn btn-white">+</a>
            <button class="buttonshad buttonstyling bg-primary text-light mx-5">Add to cart</button>
          </div>
        </div>
        <div class="container pt-4">
          <p>
            <a class="mx-5" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                          More details
                        </a>
          </p>
          <div class="collapse" id="collapseExample">
            <div class="card card-body">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quos ullam, earum commodi autem fuga, aliquam maiores dolorem libero inventore, molestiae omnis nam ipsam error consequatur ut nisi eveniet dolorum!
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

htmlcssbootstrap-5

Answer №1

Consider enclosing your entire div with a <center></center> tag. This will center all the content within the div. Here's how it would look:

<center>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7b5b8b8a3a4a3a5b6a797e2f9e6f9e4">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="card mt-5 container p-5 card-w ">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="https://via.placeholder.com/600" class="card-img" alt="apples">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title h1 pl-5 mx-2 d-flex">Apple, Empire</h5>
        <p class="card-text pl-5 mx-2 lead font-weight-bold d-flex">1.94$/kg</p>
        <div class="container d-flex alignmentcard">
          <div class="d-flex mx-3">
            <a href="#" class="btn btn-white">-</a>
            <p class="pt-2 lead">1</p>
            <a href="#" class="btn btn-white">+</a>
            <button class="buttonshad buttonstyling bg-primary text-light mx-5">Add to cart</button>
          </div>
        </div>
        <div class="container pt-4">
          <p>
            <a class="mx-5" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                          More details
                        </a>
          </p>
          <div class="collapse" id="collapseExample">
            <div class="card card-body">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quos ullam, earum commodi autem fuga, aliquam maiores dolorem libero inventore, molestiae omnis nam ipsam error consequatur ut nisi eveniet dolorum!
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</center>

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

Organize the HTML table upon importing

In my code, I am populating a table with data retrieved from a JSON object. Here is the JavaScript snippet: if (jsonObj[0].array !== 'undefined' && jsonObj[0].array.length > 0) { for (var i = 0; i < jsonObj[0].array.length; i++ ...

jqueryhtmltablesorter

Toggling a div overlay through various user interactions such as clicking, pressing a button, or hitting the escape

I've created a simple div overlay that appears when a user clicks inside an input box: HTML <html> <body> <input id="search" type="text" placeholder="Search..."> </body> </html> CSS #overlay { position: fixed; ...

jqueryhtmlcssshow-hide

Tips for choosing multiple values from a dropdown menu in Bootstrap CSS version 3

I'm looking to implement a way to select multiple values from a dropdown menu without using the CTRL key. Currently, I am utilizing Bootstrap CSS for styling. Here is the code for my dropdown: <select multiple class="dropdown-menu"> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Showing the values of two distinct select boxes in a URL

Here are both select boxes, the goal is to display selected values from both in the URL. This can be achieved by displaying them like this: e.g www.example.com#135+#140 OR www.example.com#135&140 (The order of values doesn't matter as long as bot ...

javascriptjqueryhtmlselectparameters

Processing .dat files using JavaScript

Currently, I am attempting to utilize JavaScript to upload a file named example.dat. Initially, I believed that the correct approach would be using fileReader; however, it appears that this method is unable to process this specific format. The objective i ...

javascripthtmldataviewphaser-framework

Zoom out the slider when scrolling

Take a look at this link and as you scroll down the page, notice how the image transitions to iPhone. Can anyone provide insight on how this effect is achieved? ...

javascriptjqueryhtmlcss

Looking for a way to customize the background-color and border of the <tr> element in DataTables 1.9.4? Learn how to enhance the styling of your tables with these

Would it be feasible to emphasize the border of a <tr> and add a background-color to the same <tr> within the table? ...

javascripthtmlcssdatatables

Navigating the ropes of push-pull functionality in Bootstrap 5

How can I utilize push and pull in Bootstrap version 5.0.0-beta2? In Bootstrap 3, my code looks like this: <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <d ...

javascripthtmltwitter-bootstrapbootstrap-5

The issue of CSS and PHP header include file not adjusting to device size and exceeding the full width of the screen

This included code is a snippet from a header file for a website. <head> <link rel="shortcut icon" href="favicon.ico"> <meta charset="utf-8" /> <title>Test Site | Foo The Bar </title> <link rel="stylesheet" href="csss_stan ...

phpcssmobile

Style the labels on the axis of Frappe Charts with colors (potentially utilizing the appropriate CSS selector)

Is it possible to style the x and y axis labels in a Frappe chart with different colors? https://i.stack.imgur.com/A3vUq.png While trying to identify the CSS selectors using Chrome DevTools, I found that a single text element (representing an x axis labe ...

javascripthtmlcss

Learn how to implement icons within Textfield components using Material-UI and TypeScript in React

I have successfully created a form with validation using TypeScript Material UI and Formik. Now, I am looking to enhance the visual appeal by adding a material UI Icon within the textfield area. Below is a snippet of my code: import React from 'reac ...

cssreactjstypescriptmaterial-uiformik

Is anyone else experiencing issues with the jQuery slide-in not working on a particular website? How can I determine which version of jQuery is compatible with this site?

Essentially, I am looking to have a div box slide in on the page as it loads. This method has worked successfully on other websites and HTML previews that I have tested it on so far. However, for some reason, it does not seem to work on this specific websi ...

javascriptjqueryhtml

Editing an XML file on the browser and saving it in its original location on the local file system

Seeking assistance with editing an XML file directly from the browser on a local file system and saving it back to its original location. I have conducted extensive research using Google, but have not been able to find a suitable solution. Any help or gu ...

javascripthtmljquery

Can I use npm's jQuery in an old-school HTML format?

I am looking to incorporate jQuery into a project without having to rely on the website or CDN for downloading the library. As someone new to npm, I am curious to know if following these steps would be advisable or potentially problematic down the line. Wh ...

javascriptjqueryhtmlnpm

Tips on moving down the `<li><span>` elements with the jQuery `.slidedown()` method

I'm struggling to articulate my question clearly, so please bear with me. Essentially, I have a jquery script that reveals content within a div nested in an li. When I click on the header, the content drops down and visually pushes the next header do ...

jqueryhtmlcss

Positioning images within a relatively positioned div using absolute positioning

I have come across multiple discussions on this topic, but I am still struggling to make the following code snippet function correctly: .container { position: relative; width: 100%; } .left { position: absolute; left: 0px; } .right { positio ...

htmlcsscss-position

I'm curious if there is a method to validate HTML elements within AngularJS. You can check out my app on Plunker [here](https://jsfiddle.net/4jttdczt/)

I'm a newcomer to angularjs and I am attempting to test HTML elements, but my tests are failing. Specifically, I would like to test the value or text contained within an HTML element. Can anyone provide guidance on how I can achieve this? Below is my ...

htmlangularjsunit-testingjasminekarma-runner

The CSS transition fails to function correctly when rendering a React element within an array

When rendering a React component within an array using CSS transitions, I noticed that the elements in the array re-order and change style. Surprisingly, only the elements moving up have transitions applied, while the ones moving down do not. I expect all ...

javascriptcssreactjscss-transitions

Displaying a large image within a small div using Bootstrap 4

I have a specific image with dimensions of 244px by 751px, and I am trying to place it inside a div container that is 132px by 132px. I want the image to maintain its aspect ratio without being stretched. Despite using the img-fluid class, the image does n ...

cssbootstrap-4

Encountering an unanticipated reference error while attempting to paste the data

// Modify the layout function document.addEventListener('DOMContentLoaded', function() { function modifyLayout(productId) { // Referencing the original card and detailed card const originalCard = document.querySelector(&ap ...

javascripthtmlbootstrap-5