引导带|牌

卡是一种灵活且可扩展的内容容器。它包括页眉和页脚选项，各种内容，上下文背景颜色以及强大的显示选项。
它代替了使用面板，孔和缩略图。因为所有这些都可以在称为card的单个容器中使用。

基本卡：卡的基本组成部分是卡体和卡。
例子：

    Bootstrap Card
    
    
    
    
    
    
    
    
    


    
        GeeksforGeeks
        
            A computer science portal for geeks
            
        
    

输出：

页眉和页脚：卡页眉为卡提供页眉，而卡页脚为卡提供页脚。

例子：

  Bootstrap Card
  
  
  
  
  
  

 

  GeeksforGeeks
  
    Header
    Content 
    Footer
  

输出：

卡片标题和链接：卡片标题用于为卡片提供标题，卡片链接用于提供卡片的链接(如果需要)。
例子：

  Bootstrap Card
  
  
  
  
  
  

 

  GeeksforGeeks
  
    
      Card title
      Some example text. Some example text.
      Card link
      Another link
    
  

输出：

卡片图像：在这两个卡片的帮助下，卡片上的图像分别插入card-img-top和card-img-bottom并使用img标签输入图像。
例子：

  Bootstrap Card
  
  
  
  
  
  

 
   

  GeeksforGeeks
  
    
    
      Developer Guy
      Developer Guy love to develope fron-end and back-end 
      See Profile
    
  

  

输出：

底部图像示例：
例子：

  Bootstrap Card
  
  
  
  
  
  

 

  GeeksforGeeks
  
    
      Developer Guy
      Developer Guy love to develope fron-end and back-end 
      See Profile
    
    
  

  

输出：

图像叠加层：在这种情况下，我们只需要使用一个额外的类，即用于卡片图像的同一行代码，即card-img-overlay。
例子：

  Bootstrap Card
  
  
  
  
  
  

 
   

  GeeksforGeeks
  
    
    
    
      Developer Guy
      Developer Guy love to develope fron-end and back-end 
      See Profile
    
    
  

  

Ouput：

卡组示例：
例子：

  Bootstrap Card
  
  
  
  
  
  

 
   

  GeeksforGeeks
  
      
          
              PRIMARY
          
      
        
      
          
              SUCCESS
          
      
      
          
              DANGER
          
      
  

  

输出：

列表组：它创建卡中内容的列表。
例子：

  Bootstrap Card
  
  
  
  
  
  

 
   

  GeeksforGeeks
  

  Bootstrap
  HTML
  JavaScript

  
  
  

  

输出 ：

厨房水槽：它是卡片的名称，它包含了所有内容，它是多种内容的混合搭配，可以制作出您想要的卡片
例子：

  Bootstrap Card
  
  
  
  
  
  

 
   

  GeeksforGeeks
  

  Bootstrap
  HTML
  JavaScript
 

    Cart
    Add Item

  

  

输出：

导航：它将导航栏添加到卡中。
例子：

  Bootstrap Card
  
  
  
  
  
  

 
   

  GeeksforGeeks
  
      
          
              
                  Active
              
              
                  link
              
              
                  Disabled
              
        
        
        
            Title
            This the th test area
            Click me
        
    

  

输出：

药丸形式的另一个例子：
例子：

  Bootstrap Card
  
  
  
  
  
  

 
   

  GeeksforGeeks
  
      
          
              
                  Active
              
              
                  link
              
              
                  Disabled
              
        
        
        
            Title
            This the th test area
            Click me
        
    

  

输出：