Tips for effectively incorporating CSS classes with Booststrap and Wagtail

Currently, I am utilizing a Bootstrap theme and trying to place up to three cards horizontally on a page at one specific location. Here is the HTML code:

<div class="container">
    <h1 class="text-center">{{ self.title }}</h1>
    <div class="card_deck;" style="display: table;">
        {% for card in self.cards %}    
            <div class="card;" style="display: table-cell; padding:20px;">
                A card content will go here
            </div>
        {% endfor %}
    </div>
</div>

I have two inquiries regarding this scenario:

  1. How can I centrally align the cards on the page?

  2. What would be the most suitable approach for managing the CSS? Considering that I do not wish to alter the default styling of Bootstrap's card and card_deck elements, should I keep the styles within the div tag itself?

cssbootstrap-4wagtail

Answer №1

To ensure the card is centered on the page, follow these steps:

<div align='center' class='row'>
  <div class="row">
    <div class="col-sm">
      then paste the cards in here
    </div>
    <div class="col-sm">
      then paste the cards in here
    </div>
    <div class="col-sm">
      then paste the cards in here
    </div>
  </div>
</div>

  1. If you want to add a new CSS class to it, you can do so by following these steps:

    then paste the cards in here

    Then proceed to style as follows: .myNewCss{ style here }

Answer №2

To dynamically apply bootstrap classes to your cards based on the number of cards you have, you can use a class on each card like col-12/self.cards.length. This is because Bootstrap utilizes a 12-section grid system. For example, if you have 2 columns, you would use col-6 (as in 12/2). So, with 3 cards, you'd use col-4; with 4 cards, col-3, and so forth.

Below is a JavaScript example that demonstrates this concept:

const cards = [{
  text: 'card1 text'
}, {
  text: 'card2 text'
}, {
  text: 'card3 text'
}]

const card = document.querySelectorAll('.card');
card.forEach((c, i) => {
  c.classList.add(`col-${12/cards.length}`)
  c.innerHTML = cards[i].text
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h1 class="text-center">{{ self.title }}</h1>
  <div class="card_deck row">

    <div class="card" style="padding:20px;">

    </div>
    <div class="card" style="padding:20px;">

    </div>
    <div class="card" style="padding:20px;">

    </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

The incorrect indentation issue occurs when the text wraps around

I am looking to automatically indent wrapped contents based on the first line. To achieve this, I implemented the following HTML and CSS code: li { padding-left: 10px; text-indent: 10px; } .Slides { width: 20em; //Display wrap-around } <div cla ...

htmlcss

What is the best way to align an element next to another using id or class?

I am looking to align the search element next to either "Media Heading 1" or "Media Heading 2" based on their id/class. For instance: Assume I have an element with the class of "media-item-1" and I aim to position the search div alongside that element us ...

javascriptjquerycsstwitter-bootstrap

Are you ready to create a Modal Factory?

For a while now, I have been utilizing modals in various front-end frameworks to communicate with users in my applications. Typically, the process involves defining the modal's html and then rendering it through a click event. As my apps continue to ...

javascriptjqueryhtmlcss

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

Tips for preventing changes to the HTML code using the inspect tool

Seeking to prevent recommended videos from appearing when pausing or ending a YouTube video, I resorted to a CSS and JS modification. I successfully placed an image over the video during these events, achieving the desired outcome. However, upon inspectin ...

htmljquerycssyoutubeyoutube-api

Implementing a customized login form with Django UserForm and Bootstrap 4 styling

Hey there! I'm trying to integrate Bootstrap's login view into my UserForm but have encountered some issues. Here is the template I'm using: <body class="text-center"> <form class="form-signin" action="" method="post"> {% c ...

djangodjango-formsdjango-viewsbootstrap-4

Demonstrate the smooth transition of background colors

I am attempting to add a subtle animation to the background-color in my navbar, as it currently appears suddenly. I want the transition to be smooth and gradual. Check out the JSFiddle demo here: https://jsfiddle.net/3f0czkpt/ The jQuery ...

jquerycssbootstrap-4css-transitions

There appears to be an empty void on the website

If you could kindly click on this link & use CTRL + F to search for the text "Info", you will see a visual representation similar to the image below. There seems to be quite a bit of empty space below these texts. I experimented with padding, display: ...

htmlcss

What is the best way to programmatically insert new rows into a table

I am currently working with the foundation 5 framework (not sure if this is relevant). I need to ensure that each CELL is treated as a distinct item/value when passing information to another page, and I am unsure of how to approach this issue. It should cr ...

javascripthtmlcsszurb-foundation

Tips for changing the order of a child element within a parent element that is positioned above its own parent element

I have a unique setup with two parent elements, one black and one red. Each parent element contains its own child element - the black parent has a gray div child, while the red parent has a pink div child. There are some constraints to consider: I am no ...

htmlcss

What could be causing the lack of space between the elements of form-inline?

Check out the demo here: http://jsfiddle.net/sunnycpp/MPACc/4/ Here is the same code pasted below: HTML <div class="container"> <debug-bar ng-controller="parentController"> <debug-bar ng-controller="childController"> <deb ...

csstwitter-bootstrapangularjs

Utilize the attribute selector to apply styling directly within HTML elements

My job requires me to use a CMS that does not give me access to the head-section in order to utilize attribute selectors. I attempted to address this issue by using inline styles. Here is a simplified version of my HTML code: <div> <style typ ...

htmlcss

Hiding HTML Labels with Jquery

I have a label that I want to hide initially and then display with the resultant values when the Submit event of the dialog box occurs. The label should not be visible at first, which is correct. However, even after clicking the submit button, it is not sh ...

jquerycsslabel

The slideUp and slideDown functions are not functioning properly

Whenever a user clicks on image-exp, I want description-exp to slide down while other description-exp slides up. I am currently using a Bootstrap template available at this link. To demonstrate the issue, I created a JSFiddle that can be accessed here. H ...

jquerycsstwitter-bootstrap

How do I align the output of a <script> using CSS?

I'm facing some issues trying to center an external script on my webpage. It involves a Google widget using Google Maps to provide directions to our office. Below is the code snippet I am working with: <asp:Content ID="Content1" ContentPlaceHolder ...

htmlcss

Implementing a pop-up notification at the center of the display for empty fields

I am currently working on a task that requires me to display a pop-up message at the top-middle of the screen stating "please fill in all fields before submitting". This custom box should be stylable using CSS. Although the solution seems simple, I am str ...

javascripthtmlcsspopupwindow

Utilizing Next.js Image Component to Apply CSS for Width and Height Settings

Currently, I am utilizing the Image component provided by Next.js, which requires setting specific width and height values. To address this, I am incorporating Tailwind CSS utility classes to establish the desired dimensions. https://i.sstatic.net/A28fB.j ...

htmlcssimagenext.jstailwind-css

After incorporating some movement effects into my menu, suddenly none of the buttons were responding

While working on my website and trying to add a close menu button, I encountered an issue where all the menu buttons stopped functioning. Here is the HTML code snippet: <div id="openMenuButton"> <span style= "font-size:30px;cu ...

javascripthtmlcss

Exploring Bootstrap: the ins and outs of customizing styles

How can one determine which bootstrap styles need to be overridden when customizing the appearance? Is there a trick to identifying where to set styles in order for them to take precedence over bootstrap styles? For instance, I've been struggling fo ...

htmlcssbootstrap-4

The map fills the entire vertical space of the page

I'm striving to make my map occupy the entire height of the page, while still staying beneath the navigation bar. The screenshot below shows what I'm aiming for. How can I achieve this so that regardless of the device, it always fills the full h ...

htmlcss