Is there a way to easily center bootstrap cards without also centering the text within them?

I'm currently using the card code provided by Bootstrap on their site, but I'm having trouble center-aligning the cards on my page without also center-aligning the text within the cards.

Here's what I have at the moment --> https://i.sstatic.net/wKnnw.png

<div class="card col-33" style="width: 16rem; margin-right: 2rem;">
   <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         <a href="#" class="card-link">Card link</a>
         <a href="#" class="card-link">Another link</a>
             </div>
<div class="card col-33" style="width: 16rem; margin-right: 2rem;">
   <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         <a href="#" class="card-link">Card link</a>
         <a href="#" class="card-link">Another link</a>
             </div>
<div class="card col-33" style="width: 16rem; margin-right: 2rem;">
   <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         <a href="#" class="card-link">Card link</a>
         <a href="#" class="card-link">Another link</a>
             </div>

The layout I want is something like this --> https://i.sstatic.net/toWjF.png

Right now, I'm not too concerned about the styling as I can adjust that in CSS later on.

csshtmlbootstrap-4

Answer №1

To center your code, enclose it within a div and assign it a class name such as "centered". Here is an example of CSS you can use:

.centered {
    margin-right:auto; 
    margin-left:auto ; 
}

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

Utilizing Python and Selenium with PhantomJS to convert multiple files into PDFs

I have been working on implementing the code provided in Python + Selenium + PhantomJS render to PDF Instead of saving a single web page as a PDF file, I am trying to iterate through a list of URLs and save each one with a specific name taken from ano ...

htmlpython-2.7pdfselenium-webdriverphantomjs

Safari not updating Angular ng-style properly

I created a simple carousel using Angular and CSS animations which works well in Chrome. However, I recently tested it in Safari and noticed that the click and drag functionality does not work. I've been trying to fix this issue for days and could use ...

javascriptcssangularjsanimationdom

Generate dynamic maps that are exportable to HTML format

I've utilized Leaflet to produce engaging interactive maps in R. However, I'm encountering an issue when trying to export the maps - the background map appears grey after exporting. library(leaflet) library(htmlwidgets) m <- leaflet(data.fra ...

htmlrmapsexportleaflet

Tips for organizing child cards within a parent card using Bootstrap

I'm trying to set up my child card within the parent card to look like the image provided. I'm using Bootstrap 4 and the card_deck class. https://i.sstatic.net/ihWrb.png However, I'm facing difficulties in getting the layout to match the p ...

htmlcsstwitter-bootstrapbootstrap-4

Attempting to position the cross adjacent to the div, but just outside of it

Currently, the issue is that the X anchor is placed inside the div, but I want it to be positioned outside the div and beside it. The image depicts the current appearance. I have attempted the following solution, but I welcome any suggestions or assistance ...

bootstrap-4

Customizing WordPress using CSS overrides in the Pinboard theme

I'm currently customizing a WordPress theme for my website (pinboard theme) and so far, it's been an amazing experience. One of the features of this theme is a built-in slider/carousel. However, I am looking to change the title of the slider from ...

csswordpress

Using JSON within HTML: A guide to sanitizing stringified objects

Is there a way to improve the readability of a string that looks like an object but is actually just a string? It currently does not look very nice and easy to read. Using JSON.parse doesn't work because not every element in the string meets the requi ...

htmljson

Utilize jQuery to alter the presentation in a distinct field

Whenever a checkbox is clicked, it updates a display field. I want to capture the content of this display field and also show it in another display field. Ideally, the second field, which is a total field, would add or subtract the value from the first fie ...

jqueryhtml

Tips on how to break up the display of a Bootstrap website by implementing pagination techniques

I am working with a collection of components containing multiple choice questions styled using bootstrap to adapt to different screen sizes. The tests consist of approximately 200 questions, so I believe implementing pagination (displaying 10-20 questions ...

bootstrap-4bootstrap-5

Utilizing v-data-iterator in Vuetify to display data fetched from an API in a table

After a long day of searching and experimenting, I've finally arrived here. Initially, I attempted to create a simple table with 2 columns using Row and iterate over the object to populate the left column with its keys. However, I hit a roadblock when ...

javascripthtmlvue.jsvuetify.jsdata-conversion

Adjust the fixed navbar position in MaterializeCSS as you scroll

First of all, I apologize for my limited proficiency in English. I have a website with a company logo at the top and a navigation bar below it. My goal is to change the position of the navigation bar to the top when scrolling past the company logo. I att ...

javascripthtmlmaterial-designmaterialize

How can I customize a CSS media class?

In my project, I am using a CSS library that includes the following class: @media only screen and (max-width: 480px) { .nav-tabs>li { margin-bottom:3px; } .nav-tabs>li, .nav-tabs>li>a { display:block !important; ...

htmlcss

SQL inputs with information that updates automatically / autofill SQL input boxes

Is it feasible to create a webpage that can connect to an SQL database, retrieve information from a table, and display it in a text box based on the input provided in another text box? Essentially, I am looking for a way to enable autofill functionality. I ...

phpjavascriptmysqlhtmlsql

Looking for a JavaScript snippet to insert the word "Search" into an empty DIV element with the specified id attribute

I am trying to insert the word "Search" into an empty input field with the id "ReportQuery" using JavaScript. Unfortunately, I do not have access to the HTML code directly. How can I achieve this task through coding? Below is the snippet of code that nee ...

javascriptjqueryhtmlsearch

Problems with select box rendering in Internet Explorer with Materialize CSS

When using materializecss select box in Internet Explorer 9 or higher, scrolling with the mouse button is not working. You must click on the scroll bar inside the select box for it to scroll. This issue does not occur in other browsers. I have attached a s ...

javascriptjqueryhtmlcssmaterial-design

Images displaying correctly in Next.js development environment, but failing to load on Github Pages production site

I am currently using Next.js alongside Tailwind CSS and I'm encountering an issue while attempting to set a background image for a specific div. Oddly enough, the image appears to load correctly in development mode, but fails to display when deployed ...

htmlreactjsnext.jstailwind-cssgithub-pages

get the queryset for a dropdown menu item in Django

Currently, I am in the process of creating an HTML calendar page with a dropdown feature to select different months. Accessing this calendar page can be done through the navigation bar set up in my base.html base.html - Direct access to the calendar page. ...

djangohtmlbootstrap-4

Creating a new row does not result in the creation of a new span displaying the character count message

Every description field should have its own character counter, with different SpanIDs displayed in respective SpanIds for each new row. How can this be achieved? <div class="row"> <div class="col-s ...

javascripthtmljquerysharepoint-2013

Is there a way I can decrease the width of the input field on the left side?

body { background: white; font-family: 'Ubuntu', sans-serif; } .cas { display: inline-block; border: 2px solid #0C8346; background: #0C8346; font-weight: 300; font-size: 20px; padding: 5px; width: 200px; text-align: center; ...

htmlcssbootstrap-4

Refreshing a specific div within an HTML page

I am facing an issue with the navigation on my website. Currently, I have a div on the left side of the page containing a nav bar. However, when a user clicks a link in the nav bar, only the content on the right side of the page changes. Is there a way t ...

javascriptjqueryhtmlcss