Bootstrap 3 使用 Flexbox 吗？

Bootstrap 3使用浮动来代替 flexbox 来处理布局，然而， Bootstrap 4使用flexbox来处理布局。 flexbox 布局可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。因此，出于灵活设计的目的，我们使用 Bootstrap 4 代替 Bootstrap 3。

方法：

• 我们为 GFG 的在线 DSA 课程和区块链课程创建了一张简单的卡片。引导类d-flex定义了一个 flexbox 容器。
• flexbox 容器中的直接 HTML 元素称为 flex 项。
• flex-direction指定了 flexbox 容器中弹性项目的方向。
• 我们使用flex-row类在 flexbox 容器中水平移动弹性项目。
• justify-content类指定 flex 项目在 flexbox 容器中沿flex-direction的对齐方式。
• 我们使用justify-content-end来根据 flex -direction水平或垂直对齐 flexbox 容器末端的弹性项目。
• 我们使用align-items-center来根据 flex-direction 水平或垂直对齐 flexbox 容器中心的弹性项目。这将适用于justify-content属性的相反轴。  

Bootstrap CDN：我们需要在 HTML 头元素中添加以下 CDN 文件。

示例：在此示例中，我们使用 flexbox 使用 flex 属性将卡片垂直对齐并水平向右对齐。

HTML

    
    
    
    
    
    
        .bg-container {
            background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20211108163509/GeeksforGeeksSchoolAGFGInitiativeForSchoolStudents.png"
            );
            background-size: cover;
            height: 100vh;
        }
 
        .card {
            background-color:#19f7ecea;
            padding: 20px;
            width: 600px;
            height: 200px;
            border-radius: 15px;
            margin-right: 30px;
        }
 
        .main-heading {
            color: rgba(0, 0, 0, 0.849);
            font-family: "Bree Serif";
            font-size: 30px;
        }
 
        .paragraph1 {
            font-family: "Roboto";
            font-size: 15px;
        }
 
        .paragraph2 {
            font-size: 25px;
        }
 
        .button-container {
            text-align: center;
            margin: 10px;
        }
 
        .button {
            border-radius: 10px;
            background-color:#19f7ecea;
            padding: 5px;
            margin-top:40px;
            width: 250px;
            font-size: 20px;
            font-family: "Roboto";
        }
      


    
        
            
              Data Structure in C++ by Jitendra Kumar
            
            
              This course designed for beginners who wants to
              improve their programming skills and get ready
              for placement.
 
 
            12000/-
 
 
            
                Register Now
            
        
        
            
              Blockchain Technology
              by Vinod Kumar
            
            
              This course designed for college student
              who wants to know about basic knowledge
              of Blockchain.
            
 
 
            20000/-
 
 
            
                
                  Register Now
                
            
        
     

输出：