WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap 4 - Cards


Cards add a flexible and extensible field for showing content material in a spread of approaches.

A card is a container with mild styling that you may location truely any content into. Plenty of styling alternatives are available which include alignment, padding, colorations, headings, and more.

Basic Card

To create a basic card, follow the .Card and .Card-body lessons to an detail to create the outer card field. Add .Card-name to any heading elements and .Card-textual content to text factors.

Example

<html lang = "en">
    <head>
        <!-- Meta tags -->
        <meta charset = "utf-8">
        <meta call = "viewport" content material = "width = tool-width, preliminary-scale = 1, reduce-to-suit = no">

        <!-- Bootstrap CSS -->
        <hyperlink rel = "stylesheet"
            href = "https://stackpath.Bootstrapcdn.Com/bootstrap/4.1.Three/css/bootstrap.Min.Css"
            integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
            crossorigin = "nameless">

        <title>Bootstrap 4 Example</name>
    </head>

    <frame>
        <div magnificence = "box">
            <h2>Basic Card</h2>
            <div class = "card">
                <div magnificence = "card-frame">
                    <h5 class = "card-title">Welookups</h5>

                    <p class = "card-text">
             Free Online Tutorials Welookups offers tutorials like java educational, android, javascript, ajax, square, python, Hypertext Preprocessor, c++ language etc. For novices and professionals.
                    </p>
                    <a href="#" magnificence = "btn btn-data">More Info</a>
                </div>
            </div>
        </div>

        <!-- jQuery first, then Popper.Js, then Bootstrap JS -->
        <script src = "https://code.Jquery.Com/jquery-three.Three.1.Slender.Min.Js"
            integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin = "anonymous">
        </script>

        <script src = "https://cdnjs.Cloudflare.Com/ajax/libs/popper.Js/1.14.Three/umd/popper.Min.Js"
            integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin = "nameless">
        </script>

        <script src = "https://stackpath.Bootstrapcdn.Com/bootstrap/4.1.3/js/bootstrap.Min.Js"
            integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
            crossorigin = "anonymous">
        </script>

    </frame>
</html>

It will produce the subsequent end result −

Output

Header and Footer

You can upload header for the card through the use of the .Card-header magnificence and footer by way of the use of the .Card-footer magnificence.
<html lang = "en">
    <head>
        <!-- Meta tags -->
        <meta charset = "utf-8">
        <meta call = "viewport" content material = "width = device-width, preliminary-scale = 1, cut back-to-fit = no">

        <!-- Bootstrap CSS -->
        <link rel = "stylesheet"
            href = "https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.Three/css/bootstrap.Min.Css"
            integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
            crossorigin = "nameless">

        <identify>Bootstrap 4 Example</title>
    </head>

    <body>
        <div class = "box">
            <h2>Card Header and Footer</h2>
            <div class = "card">
                <div elegance = "card-header">Card Header</div>
                <div class = "card-body">
                    <h5 class = "card-title">Welookups</h5>
                    <p elegance = "card-textual content">
                         Free Online Tutorials Welookups affords tutorials like java educational, android, javascript, ajax, square, python, php, c++ language and so forth. For novices and specialists.

                    </p>
                    <a href = "#" class = "btn btn-info">More Info</a>
                </div>
                <div magnificence = "card-footer">Card Footer</div>
            </div>
        </div>

        <!-- jQuery first, then Popper.Js, then Bootstrap JS -->
        <script src = "https://code.Jquery.Com/jquery-three.Three.1.Slender.Min.Js"
            integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin = "anonymous">
        </script>

        <script src = "https://cdnjs.Cloudflare.Com/ajax/libs/popper.Js/1.14.Three/umd/popper.Min.Js"
            integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin = "nameless">
        </script>

        <script src = "https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.3/js/bootstrap.Min.Js"
            integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
            crossorigin = "nameless">
        </script>

    </frame>
</html>

It will produce the subsequent result −

Output

List Groups You can create list of content material to the cards by way of using the .List-organization-flush class as proven inside the beneath example −
<html lang = "en">
    <head>
        <!-- Meta tags -->
        <meta charset = "utf-8">
        <meta name = "viewport" content = "width = device-width, preliminary-scale = 1, decrease-to-in shape = no">

        <!-- Bootstrap CSS -->
        <link rel = "stylesheet"
            href = "https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.Three/css/bootstrap.Min.Css"
            integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
            crossorigin = "nameless">

        <name>Bootstrap four Example</title>
    </head>

    <body>
        <div magnificence = "box">
            <h2>List Groups</h2>
            <div magnificence = "card" fashion = "width: 18rem;">
                <div class = "card-header">Card Header</div>
                <ul elegance = "listing-organization listing-group-flush">
                    <li elegance = "list-group-item">Google</li>
                    <li class = "list-organization-object">Youtube</li>
                    <li magnificence = "list-institution-item">Facebook</li>
                </ul>
            </div>
        </div>

        <!-- jQuery first, then Popper.Js, then Bootstrap JS -->
        <script src = "https://code.Jquery.Com/jquery-3.3.1.Narrow.Min.Js"
            integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin = "nameless">
        </script>

        <script src = "https://cdnjs.Cloudflare.Com/ajax/libs/popper.Js/1.14.3/umd/popper.Min.Js"
            integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin = "nameless">
        </script>

        <script src = "https://stackpath.Bootstrapcdn.Com/bootstrap/4.1.3/js/bootstrap.Min.Js"
            integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
            crossorigin = "anonymous">
        </script>

    </frame>
</html>

It will produce the following result −

Output

Contextual Cards

Bootstrap uses contextual lessons which includes .Bg-primary, .Bg-fulfillment, .Bg-data, .Bg-warning, .Bg-danger, .Bg-secondary, .Bg-dark and .Bg-light to trade the heritage shade of the cardboard.

The following example demonstrates this −

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, preliminary-scale = 1, cut back-to-suit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.Bootstrapcdn.Com/bootstrap/4.1.3/css/bootstrap.Min.Css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "nameless">
      
      <identify>Bootstrap 4 Example</identify>
   </head>
   
   <body>
      <div elegance = "field">
         <h3>Contextual Cards</h3>
         <div elegance = "card bg-number one text-white">
            <div elegance = "card-frame">Primary card</div>
         </div>
         <br>
         
         <div elegance = "card bg-fulfillment text-white">
            <div magnificence = "card-body">Success card</div>
         </div>
         <br>
         
         <div elegance = "card bg-information text-white">
            <div magnificence = "card-frame">Info card</div>
         </div>
         <br>
         
         <div class = "card bg-warning text-white">
            <div class = "card-body">Warning card</div>
         </div>
         <br>
         
         <div elegance = "card bg-threat text-white">
            <div elegance = "card-body">Danger card</div>
         </div>
         <br>
         
         <div class = "card bg-secondary text-white">
            <div elegance = "card-body">Secondary card</div>
         </div>
         <br>
         
         <div magnificence = "card bg-darkish textual content-white">
            <div class = "card-frame">Dark card</div>
         </div>
         <br>
         
         <div class = "card bg-light text-dark">
            <div magnificence = "card-body">Light card</div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.Js, then Bootstrap JS -->
      <script src = "https://code.Jquery.Com/jquery-three.Three.1.Slim.Min.Js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.Cloudflare.Com/ajax/libs/popper.Js/1.14.3/umd/popper.Min.Js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "nameless">
      </script>
      
      <script src = "https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.Three/js/bootstrap.Min.Js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "nameless">
      </script>
      
   </frame>
</html>

It will produce the subsequent result −

Output

Card Images (Top and Bottom)

You can area the photograph on the pinnacle of the cardboard through the use of .Card-img-top magnificence or at the bottom by using using .Card-img-backside magnificence to the <img> element as shown inside the under instance −

<html lang = "en">
    <head>
        <!-- Meta tags -->
        <meta charset = "utf-8">
        <meta name = "viewport" content material = "width = tool-width, preliminary-scale = 1, cut back-to-suit = no">

        <!-- Bootstrap CSS -->
        <hyperlink rel = "stylesheet"
            href = "https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.3/css/bootstrap.Min.Css"
            integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
            crossorigin = "nameless">

        <name>Bootstrap 4 Example</name>
    </head>

    <body>
        <div elegance = "field">
            <h2>Image at Top</h2>
            <div class = "card" style = "width:350px;top:400px">
                <img magnificence = "card-img-top" src = "https://a57.Foxnews.Com/static.Foxnews.Com/foxnews.Com/content material/uploads/2018/09/1862/1048/flahighway.Jpg?Ve=1&tl=1"
                    alt = "Card Image Top">

                <div class = "card-frame">
                    <h4 magnificence = "card-identify">HTML</h4>
                    <p magnificence = "card-text">
                       Built inside the 1930’s, the Overseas Highway follows the path of a now obsolete railroad music that when crossed over the Florida Keys. Today, the 113-mile Overseas Highway operates because the southernmost leg of US 1 and extends from mainland Florida to Key West. As the toll road skips from island to island, drivers get a complete view of the dazzling, turquoise waters surrounding them.
                    </p>
                    <a href = "#" elegance = "btn btn-number one">More Info</a>
                </div>
            </div>
            <br>

            <h2>Image at Bottom</h2>
            <div elegance = "card" style = "width:350px;height:400px">
                <div magnificence = "card-body">
                    <h4 class = "card-identify">CSS</h4>
                    <p elegance = "card-textual content">
             At 185 miles lengthy, the Cabot Trail curls around the northern tip of Cape Breton in Nova Scotia. The avenue brings travelers via lush inexperienced forests that in the fall remodel into a breathtaking sea of reds, oranges and yellows because the leaves exchange colors. Along the course, drivers will come across an abundance of eating places, museums, galleries as well as trekking and snowmobiling paths.
                    </p>
                    <a href = "#" class = "btn btn-number one">More Info</a>
                </div>
                <img elegance = "card-img-backside"
                    src = "https://a57.Foxnews.Com/static.Foxnews.Com/foxnews.Com/content/uploads/2018/09/1862/1048/afgagagaga.Jpg?Ve=1&tl=1"
                    alt = "Card Image Bottom">
            </div>
            <br>
        </div>

        <!-- jQuery first, then Popper.Js, then Bootstrap JS -->
        <script src = "https://code.Jquery.Com/jquery-3.Three.1.Slender.Min.Js"
            integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin = "anonymous">
        </script>

        <script src = "https://cdnjs.Cloudflare.Com/ajax/libs/popper.Js/1.14.3/umd/popper.Min.Js"
            integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin = "nameless">
        </script>

        <script src = "https://stackpath.Bootstrapcdn.Com/bootstrap/4.1.3/js/bootstrap.Min.Js"
            integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
            crossorigin = "anonymous">
        </script>

    </frame>
</html>

Card Image Overlay

Add the historical past photograph to a card and area the text on the top of an image by using the use of .Card-img-overlay magnificence.

The following example demonstrates this −

<html lang = "en">
    <head>
        <!-- Meta tags -->
        <meta charset = "utf-eight">
        <meta call = "viewport" content material = "width = tool-width, preliminary-scale = 1, shrink-to-match = no">

        <!-- Bootstrap CSS -->
        <link rel = "stylesheet"
            href = "https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.3/css/bootstrap.Min.Css"
            integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
            crossorigin = "anonymous">

        <name>Bootstrap four Example</identify>
    </head>

    <frame>
        <div class = "container">
            <h2>Image Overlay</h2>
            <div magnificence = "card" fashion = "width:350px;top:400px">
                <img class = "card-img-top"
                    src = "https://a57.Foxnews.Com/static.Foxnews.Com/foxnews.Com/content material/uploads/2018/09/1862/1048/sfshsh.Jpg?Ve=1&tl=1"
                    alt = "Card photo" style = "width:one hundred%">
                <div magnificence = "card-img-overlay">
                    <p elegance = "card-textual content text-white">
                       Deemed a National Tourist Route, the striking Atlantic Roadway is a need to-see. The five-mile path is part of Norwegian National Road 64 and leapfrogs from island to island
                    </p>
                    <a href = "#" elegance = "btn btn-primary">More Info</a>
                </div>

                <div magnificence = "card-body">
                    <h4 class = "card-name">The Atlantic Roadway, Norway </h4>
                    <p elegance = "card-text">
                     connecting the towns of Kristiansund and Molde in midwestern Norway. The street first opened in 1989 and now capabilities 4 view and relaxation areas to accommodate the large amounts of travelers that come to view the picturesque route.
                    </p>
                </div>
            </div>
        </div>

        <!-- jQuery first, then Popper.Js, then Bootstrap JS -->
        <script src = "https://code.Jquery.Com/jquery-3.3.1.Slender.Min.Js"
            integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin = "nameless">
        </script>

        <script src = "https://cdnjs.Cloudflare.Com/ajax/libs/popper.Js/1.14.Three/umd/popper.Min.Js"
            integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin = "anonymous">
        </script>

        <script src = "https://stackpath.Bootstrapcdn.Com/bootstrap/4.1.3/js/bootstrap.Min.Js"
            integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
            crossorigin = "nameless">
        </script>

    </frame>
</html>

It will produce the subsequent result −

Output

Card Groups

Card companies may be used to vicinity more than one cards as single attached detail. The .Card-organization magnificence specifies identical width and height columns and removes left and proper margins among each card.

<html lang = "en">
    <head>
        <!-- Meta tags -->
        <meta charset = "utf-8">
        <meta call = "viewport" content = "width = tool-width, initial-scale = 1, decrease-to-in shape = no">

        <!-- Bootstrap CSS -->
        <link rel = "stylesheet"
            href = "https://stackpath.Bootstrapcdn.Com/bootstrap/4.1.Three/css/bootstrap.Min.Css"
            integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
            crossorigin = "nameless">

        <identify>Bootstrap four Example</identify>
    </head>

    <body>
        <div elegance = "container">
            <h2>Card-Groups</h2>
            <div magnificence = "card-institution">
                <div elegance = "card">
                    <img magnificence = "card-img-pinnacle"
                        src = "https://a57.Foxnews.Com/static.Foxnews.Com/foxnews.Com/content material/uploads/2018/09/1862/1048/NewZealand.Jpg?Ve=1&tl=1"
                        alt = "Card Groups">
                    <div class = "card-frame">
                        <h5 class = "card-name">Milford Road, New Zealand</h5>
                        <p class = "card-textual content">
                    Winding thru Fiordland National Park, the heart of the Southern Alps, site visitors will discover this beautiful 144 mile-lengthy street. The road is a part of State Highway 94 and connects the city
                        </p>
                    </div>

                    <div magnificence = "card-footer">
                        <small class = "textual content-muted">Card Footer</small>
                    </div>
                </div>

                <div elegance = "card">
                    <img class = "card-img-top"
                        src = "https://a57.Foxnews.Com/static.Foxnews.Com/foxnews.Com/content/uploads/2018/09/1862/1048/Italy.Jpg?Ve=1&tl=1"
                        alt = "Card Groups">

                    <div magnificence = "card-frame">
                        <h5 elegance = "card-title">Stelvio Pass, Italy</h5>
                        <p elegance = "card-textual content">
                   Located in northern Italy close to the Swiss border, Stelvio Pass is one of the most visited and threatening roads inside the international.
                        </p>
                    </div>
                    <div magnificence = "card-footer">
                        <small elegance = "text-muted">Card Footer</small>
                    </div>
                </div>

                <div magnificence = "card">
                    <img magnificence = "card-img-pinnacle"
                        src = "https://a57.Foxnews.Com/static.Foxnews.Com/foxnews.Com/content/uploads/2018/09/1862/1048/08-Col-de-Turini-France-1.Jpg?Ve=1&tl=1"
                        alt = "Card Groups">

                    <div magnificence = "card-body">
                        <h5 class = "card-identify">Col de Turini, France</h5>
                        <p elegance = "card-textual content">
If tight turns and heights make you ill, you might want to bypass this avenue. Col de Turini coils through the Alpes-Maritimes in the south of France
                        </p>
                    </div>

                    <div elegance = "card-footer">
                        <small elegance = "text-muted">Card Footer</small>
                    </div>

                </div>
            </div>
        </div>

        <!-- jQuery first, then Popper.Js, then Bootstrap JS -->
        <script src = "https://code.Jquery.Com/jquery-3.3.1.Narrow.Min.Js"
            integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin = "anonymous">
        </script>

        <script src = "https://cdnjs.Cloudflare.Com/ajax/libs/popper.Js/1.14.Three/umd/popper.Min.Js"
            integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin = "anonymous">
        </script>

        <script src = "https://stackpath.Bootstrapcdn.Com/bootstrap/4.1.3/js/bootstrap.Min.Js"
            integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
            crossorigin = "nameless">
        </script>

    </frame>
</html>