What is the method for inserting a gap between Bootstrap card components?

Can someone help me figure out how to add space between the two card decks using Bootstrap 4 alpha 6? I've tried using mt-20 on the second card deck but it's not working. I also attempted to wrap them in rows, but that didn't work either:

https://i.sstatic.net/yV6OV.png

<div>
<div class="container">
            <div class="card-deck">
                <div class="card text-center">
                    <div class="card-block">
                        <h4 class="card-title">Permits</h4>
                        <p class="card-text">
                            Apply for parking permit<br />
                            View existing permit requests<br />
                            Activate Visitor permits<br />
                        </p>
                    </div>
                    <div class="card-footer">
                        @Html.ActionLink("Permits", "Index", "Home", new { Area = "Permit" }, new { @class = "btn btn-primary" })
                    </div>
                </div>

                <div class="card text-center">
                    <div class="card-block">
                        <h4 class="card-title">Vehicles</h4>
                        <p class="card-text">
                            View and manage your vehicles
                        </p>
                    </div>
                    <div class="card-footer">
                        @Html.ActionLink("My Vehicles", "Index", "Vehicle", null, new { @class = "btn btn-primary" })
                    </div>
                </div>

                <div class="card text-center">
                    <div class="card-block">
                        <h4 class="card-title">Parking Tickets</h4>
                        <p class="card-text">
                            View your parking ticket history
                        </p>
                    </div>
                    <div class="card-footer">
                        @Html.ActionLink("My Tickets", "Index", "ParkingTicket", null, new { @class = "btn btn-primary" })
                    </div>
                </div>
            </div>
    <div class="card-deck mt-20">
        <div class="card text-center">
            <div class="card-block">
                <h4 class="card-title">Funding Options</h4>
                <p class="card-text">
                    Add credit/debit card<br />
                    Top up Account<br />
                    Manage cards
                </p>
            </div>
            <div class="card-footer">
                @Html.ActionLink("Funding Options", "Index", "Funding", null, new { @class = "btn btn-primary" })
            </div>
        </div>

        <div class="card text-center">
            <div class="card-block">
                <h4 class="card-title">Account History</h4>
                <p class="card-text">
                    View all financial transactions on my account
                </p>
            </div>
            <div class="card-footer">
                @Html.ActionLink("Account transactions", "Index", "Activity", null, new { @class = "btn btn-primary" })
            </div>
        </div>
        <div class="card text-center">
            <div class="card-block">
                <h4 class="card-title">User Settings</h4>
                <p class="card-text">
                    Edit personal details<br />
                    Change top-up settings<br />
                    Change password
                </p>
            </div>
            <div class="card-footer">
                @Html.ActionLink("Personal details", "Update", "Account", null, new { @class = "btn btn-primary" })
            </div>
        </div>
    </div>
</div>

csstwitter-bootstrapbootstrap-4

Answer №1

Bootstrap 4 does not have the class mt-20. Instead, Bootstrap 4 utilizes margin classes with the following format:

m{sides}-{size}

Here, size ranges from 0-5, representing a fraction of the default unit of 1rem

  • 0 - no margin
  • 1 - margin of .25rem
  • 2 - margin of .5rem
  • 3 - margin of 1rem
  • 4 - margin of 1.5rem
  • 5 - margin of 3rem

Therefore, you can use classes like mt-3, mt-4, mt-5, etc.

Answer №2

To create some space under the card class, consider adding a bottom margin:

.card{
    margin-bottom: 10px;
}

Answer №3

One response delves into the utilization of mt- in a concise and effective manner.

I would like to contribute by suggesting the use of bootstrap grids to organize the code better, utilizing containers, rows, and columns.

Take a look at the example provided:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dab8b5b5aea9aea8bbaa9aeef4ecf4eb">[email protected]</a>/dist/css/bootstrap.min.css">
  
  <div class="container text-center">
    <div class="row">
      <div class="col">
        card element 1
      </div>
      <div class="col">
        card element 2
      </div>
      <div class="col">
        card element 3
      </div>
    </div>
    <div class="row mt-2">
      <div class="col">
        card element 4
      </div>
      <div class="col">
        card element 5
      </div>
      <div class="col">
        card element 6
      </div>
    </div>
  </div>

By adding mt-2 to the second row, you can create a top margin for better spacing.

Answer №4

After experimenting with laying out cards in a grid using rows or columns, I discovered that it is important to set the margin on the columns to create vertical spacing:

            <div class="col  mb-2">
               <div class="card h-100">
                  ...
               </div>
            </div>

Answer №5

Ensure to conclude the first card with <br> and </div> tags.

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

Choose either immediate offspring or immediate offspring of immediate offspring

I am struggling to create a CSS Selector that follows DRY principles. The selector needs to target elements within a group but not those within a subgroup of the main group. Elements should only be direct children of the main group or wrapped in an addit ...

javascripthtmlcss

Shifting the second column will raise all content and hide certain elements

Whenever I attempt to preview my page on mobile devices, the second column on the right moves under the first column as it should. However, the issue arises when the entire content on my site is pushed up, rendering the text (TAXI) invisible. PC Here&apo ...

htmlcssbootstrap-4bootstrap-5

What are the steps for applying a Bootstrap class to an element?

I keep encountering this error in the console: Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('si col-md-4') contains HTML space characters, which are not valid in tokens. Below is a ...

javascriptjqueryhtmltwitter-bootstrapfirebase

Using Wordpress and JavaScript to dynamically hide a button if a product in the online store does not have an SKU

I'm encountering an issue on my Wordpress site where products with variations are not displaying the inner text on a certain element, despite the fact that the text is present when I inspect the element. Here's the code: const makerBtn = document ...

javascriptcsswordpresshidegetelementsbyclassname

What methods can be used to limit URL abbreviations on my website?

I need a simple solution that I have been struggling to figure out. What I want is for anyone attempting to access any webpage directly on my website to be automatically redirected to the home page. For instance, if someone tries to access www.domain-name ...

phphtmlcss

Having trouble with the display of styles on Material UI Cards?

I am currently attempting to customize the default Material UI classes by using useStyles and applying a classname of titleSection. My goal is to make the titleSection bold and in Roboto font, but unfortunately, those styles are not being applied. Below i ...

cssreactjsmaterial-uistyling

Steps for compiling SCSS to CSS using Angular-CLI and moving it to the assets directory

I am currently working on an Angular 5 project with an assets folder where I store my common CSS file and reference it in index.html. I now plan to create a new folder called "sasstyles" and place some .scss files there. When I compile or run the project ...

cssangularjsangularsass

Why is the right float positioned below the container?

I am struggling to figure out why my float: right; div is appearing below the container div. I need help understanding how to resolve this issue. Can anyone provide an explanation? I faced a similar problem on a different website in the past, but I can&apo ...

htmlcss

Bring fontawesome into the Laravel environment with MDBVue integration

I attempted to integrate fontawesome into my laravel mdbvue setup. Upon installing mdbvue using the command: npm install mdbvue fontawesome was automatically added to my package-lock.json and can be found in the node_modules folder under @fortawesome. ...

csslaravelvue.jsimport

Implemented an HTML hyperlink element precisely positioned

I have the following HTML code. I am trying to fix the position of an anchor tag called "View All" so that it stays in a specific location. However, whenever the value in the dropdown menu changes, the anchor tag moves according to the length of the new se ...

htmlcss

Assistance with changing styles

Hey there, I could really use some assistance. I've created a style switcher, but I'm struggling to figure out how to replace the stylesheet properly. Currently, my code empties the <head> element when what I really need is for it to simply ...

javascriptcssajaxjquery

Setting up CSS Flexbox so that the first child element is the same height as the

I am striving to ensure that when the layout switches to mobile, the image block matches the height of the title and content blocks. The layout is quite complex; it functions correctly in desktop view with the title block at the top full-width. I suspect ...

cssflexbox

Mosaic-inspired image gallery with HTML and CSS styling

Can anyone help me create a couple of styled "blocks" in HTML and CSS similar to the design shown in the image? I've searched for templates but can't find anything that matches my vision, so any assistance would be appreciated. (links not require ...

htmlcssblocktilemosaic

html interactive/expandable tree

I've come across this code which generates an HTML tree, but I'm facing an issue where the tree expands every time I refresh the page. What I want to achieve is to have certain branches expanded and others collapsed when the page is opened, depe ...

javascriptjqueryhtmlcss

It is recommended that the page does not scroll while utilizing both the sidenav and toolbar simultaneously in Angular Material

Using md-sidenav without md-toolbar works fine. The sidenav opens correctly, as shown in the image below. https://i.sstatic.net/PjsPp.png However, when a toolbar is added before the sidenav or its containing section, opening the sidenav causes the page t ...

cssangularjsmaterial-designangular-material

If the URL hash matches the ID of a specific div, then take action on the div's child element

Imagine I have the following HTML structure: <div class=".blog-item-holder"> <div id="AAAA"><div class="inner">AAAA</div></div> <div id="BBBB"><div class="inner">BBBB</div></div> <div id="CCCC">& ...

jqueryhtmlcssurlfragment-identifier

Adjust the loading bar component in Material UI to allow for customizable color changes

I am currently learning how to use material ui. My goal is to customize the loading bar's CSS. I checked the documentation and utilized colorPrimary classes. However, the changes are not appearing as expected. Could you please guide me on how to resol ...

javascriptcssreactjsreduxmaterial-ui

Sass compilation failed due to an error in the CSS code provided

Just starting out with sass, I recently downloaded bulma, installed gem, and sass. My attempt to compile a default sass file using sass style.scss style.css resulted in errors. Here is my directory structure: https://i.sstatic.net/0OZSR.png However, I en ...

csssass

Load and Activate Element

I am utilizing Bootstrap 4 features and some custom settings in my elements. <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-outline-selector make-active"> <input ...

htmlcssbootstrap-4

Can anyone explain why my navbar text is not aligning in the center?

I am struggling to center the text in one of my two navbars. As a newcomer to both navbars and bootstrap, I am having difficulty figuring out why I can't achieve this. Should I be making changes on the bootstrap side or can it be fixed within the < ...

htmlcssbootstrap-4