Drift BootStrap 4, HTML, jQuery
  • Overview
  • Installation and Setup
    • Setup
    • Folders and Files Structure
  • Stylesheets
    • Overview
    • Sass Variables
    • Layouts & Theme
    • Fonts
    • Colors
    • Margin & Paddings
    • Theme Customization
    • RTL Version
  • Components
    • Alerts
    • Badges
    • Breadcrumbs
    • Buttons
    • Button Group
    • Cards
    • Card Group
    • Collapse
    • Dropdowns
    • Input Group
    • Jumbotron
    • List Group
    • Navbar
    • Navs & Tabs
    • Pagination
    • Progress Bar
    • Scrollspy
    • Typography
  • Classic Version
    • Setup
    • Folders and Files Structure
    • Theme Customizaton
    • RTL Version
Powered by GitBook
On this page

Was this helpful?

  1. Components

Cards

PreviousButton GroupNextCard Group

Last updated 5 years ago

Was this helpful?

<div class="card">

    <!-- Card Image -->
    <img class="card-img-top" src="assets/images/card/skateboard.jpeg" alt="Skateboard">
    <!-- /card image -->

    <!-- Card Body -->
    <div class="card-body">

        <!-- Card Title-->
        <h2 class="card-title">Card title</h2>
        <!-- Card Title-->

        <!-- Card Text-->
        <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>
        <!-- /card text-->

        <!-- Card Button-->
        <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
        <!-- /card button-->

    </div>
    <!-- /card body -->

</div>
<div class="card">

    <!-- Card Body -->
    <div class="card-body">

        <!-- Card Text-->
        <p class="card-text">
            This is some text within a card body. Use it wisely :)
        </p>
        <!-- /card text-->

    </div>
    <!-- /card body -->

</div>
<div class="card">

    <!-- Card Body -->
    <div class="card-body">

        <!-- Card Title-->
        <h2 class="card-title">Titles &amp; Links</h2>
        <!-- Card Title-->

        <!-- Card Sub Title-->
        <h4 class="card-subtitle">Subtitle text</h4>
        <!-- /card sub title-->

        <!-- Card Text-->
        <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>
        <!-- /card text-->

        <!-- Card Link-->
        <a href="javascript:void(0)" class="card-link">Goto Link</a>
        <a href="javascript:void(0)" class="card-link">Another Link</a>
        <!-- /card link-->

    </div>
    <!-- /card body -->

</div>
<div class="card">

    <!-- Card Image -->
    <img class="card-img-top" src="assets/images/card/vegetable.jpeg" alt="Vegetable">
    <!-- /card image -->

    <!-- Card Body -->
    <div class="card-body">

        <!-- Card Title-->
        <h2 class="card-title">Kitchen Sink</h2>
        <!-- Card Title-->

        <!-- Card Text-->
        <p class="card-text lead">
            Mix and match multiple content types...
        </p>

    </div>
    <!-- /card body -->

    <!-- List Group -->
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
    </ul>
    <!-- /list group-->

    <!-- Card Body -->
    <div class="card-body">

        <!-- Card Button-->
        <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
        <a href="javascript:void(0)" class="card-link">Card Link</a>
        <!-- /card button-->

    </div>
    <!-- /card body -->

</div>
<div class="card">

    <!-- Card header -->
    <div class="card-header">
        <ul class=" card-header-pills nav nav-pills" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#tab-pane3" role="tab" aria-controls="tab-pane1" aria-selected="true">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#tab-pane4" role="tab" aria-controls="tab-pane2" aria-selected="true">Link</a>
            </li>
            <li class="nav-item"><a href="javascript:void(0)" class="nav-link disabled">Disabled</a></li>
        </ul>
    </div>
    <!-- /card header -->

    <!-- Tab Content-->
    <div class="tab-content">

        <!-- Tab panel -->
        <div id="tab-pane3" class="tab-pane active">

            <!-- Card Body -->
            <div class="card-body">

                <!-- Card Title-->
                <h2 class="card-title">Tabs In Button Style</h2>
                <!-- Card Title-->

                <!-- Card Text-->
                <p class="card-text">
                    Mix and match multiple content types to create the card you need, or
                    throw everything in there.
                </p>
                <!-- /card text-->

                <!-- Card Link-->
                <a href="javascript:void(0)" class="card-link">Goto Link</a>
                <!-- /card link-->

            </div>
            <!-- /card body -->

        </div>
        <!-- /tab panel -->

        <!-- Tab panel -->
        <div id="tab-pane4" class="tab-pane">

            <!-- Card Body -->
            <div class="card-body">

                <!-- Card Title-->
                <h2 class="card-title">Tabs In Button Style</h2>
                <!-- Card Title-->

                <!-- Card Text-->
                <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>
                <!-- /card text-->

                <!-- Card Link-->
                <a href="javascript:void(0)" class="card-link">Goto Link</a>
                <!-- /card link-->

            </div>
            <!-- /card body -->

        </div>
        <!-- /tab panel -->

        <!-- Tab panel -->
        <div class="tab-pane">

            <!-- Card Body -->
            <div class="card-body">

                <!-- Card Title-->
                <h2 class="card-title">Tabs In Button Style</h2>
                <!-- Card Title-->

                <!-- Card Text-->
                <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>
                <!-- /card text-->

                <!-- Card Link-->
                <a href="javascript:void(0)" class="card-link">Goto Link</a>
                <!-- /card link-->

            </div>
            <!-- /card body -->

        </div>
        <!-- /tab panel -->

    </div>
    <!-- /tab content-->

</div>
<div class="card">

    <!-- Card header -->
    <div class="card-header card-nav">
        <ul class="card-header-tabs nav nav-tabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#tab-pane1" role="tab" aria-controls="tab-pane1" aria-selected="true">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#tab-pane2" role="tab" aria-controls="tab-pane2" aria-selected="true">Link</a>
            </li>
            <li class="nav-item"><a href="javascript:void(0)" class="nav-link disabled">Disabled</a></li>
        </ul>
    </div>
    <!-- /card header -->

    <!-- Tab Content-->
    <div class="tab-content">

        <!-- Tab panel -->
        <div id="tab-pane1" class="tab-pane active">

            <!-- Card Body -->
            <div class="card-body">

                <!-- Card Title-->
                <h2 class="card-title">Card With Tabs</h2>
                <!-- Card Title-->

                <!-- Card Text-->
                <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>
                <!-- /card text-->

                <!-- Card Link-->
                <a href="javascript:void(0)" class="card-link">Goto Link</a>
                <!-- /card link-->

            </div>
            <!-- /card body -->

        </div>
        <!-- /tab panel -->

        <!-- Tab panel -->
        <div id="tab-pane2" class="tab-pane">

            <!-- Card Body -->
            <div class="card-body">

                <!-- Card Title-->
                <h2 class="card-title">Card With Tabs</h2>
                <!-- Card Title-->

                <!-- Card Text-->
                <p class="card-text">
                    Mix and match multiple content types to create the card you need, or
                    throw everything in there.
                </p>
                <!-- /card text-->

                <!-- Card Link-->
                <a href="javascript:void(0)" class="card-link">Goto Link</a>
                <!-- /card link-->

            </div>
            <!-- /card body -->

        </div>
        <!-- /tab panel -->

        <!-- Tab panel -->
        <div class="tab-pane">

            <!-- Card Body -->
            <div class="card-body">

                <!-- Card Title-->
                <h2 class="card-title">Card With Tabs</h2>
                <!-- Card Title-->

                <!-- Card Text-->
                <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>
                <!-- /card text-->

                <!-- Card Link-->
                <a href="javascript:void(0)" class="card-link">Goto Link</a>
                <!-- /card link-->

            </div>
            <!-- /card body -->

        </div>
        <!-- /tab panel -->

    </div>
    <!-- /tab content-->

</div>
<div class="card text-white">

    <!-- Card Image -->
    <img class="card-img" src="assets/images/card/person-walking.jpeg" alt="Person">
    <!-- /card image -->

    <!-- Card Overlay -->
    <div class="card-img-overlay">

        <!-- Card Header -->
        <h2 class="card-title text-white">Card title</h2>
        <!-- /card header -->

        <!-- Card Text -->
        <p class="card-text">
            This is a wider card with supporting text below as a natural lead-in to
            additional content. This content is a little bit longer.
        </p>
        <p class="card-text">Last updated 3 mins ago</p>
        <!-- /card text -->

    </div>
    <!-- /card overlay -->

</div>
<div class="card text-white bg-primary">

    <!-- Card Header -->
    <h4 class="card-header text-white">Header</h4>
    <!-- /card header -->

    <!-- Card Body -->
    <div class="card-body">

        <!-- Card Title-->
        <h2 class="card-title text-white">Header &amp; Footer</h2>
        <!-- Card Title-->

        <!-- Card Text-->
        <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>
        <!-- /card text-->

    </div>
    <!-- /card body -->

    <!-- Card Footer -->
    <div class="card-footer">2 days ago | footer content</div>
    <!-- /card footer -->

</div>