How can I make a bottom space after using margin: auto

Admin 1
Viewed 77

I am learning Bootstrap v5.0. I am trying to create a webpage with Bootstrap. I need a help now. I am trying to make a bottom space between two columns on small screens. For Big screen my design is as I need.

I need help on Education section of my code.

* {
    /* margin: 0;
    padding: 0;
    box-sizing: border-box; */
    font-family: 'Open Sans', sans-serif;
    color: #ffffff;
}
/* ==================== Header ==================== */
header {
    background: #9b59b6;
}
.header-title-box {
    background: #8e44ad;
}
/* ==================== About Container ==================== */
.about-container {
    background: #2ecc71;
}
/* ==================== Education Container ==================== */
.education-container {
    background: #34e7e4;
}

/* ==================== Header ==================== */
/* ==================== Header ==================== */
/* ==================== Header ==================== */
/* ==================== Header ==================== */
/* ==================== Header ==================== */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="images/png" href="./images/favicon.jpg">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/style.css">
    <title>Project Finishing</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
</head>
<body>
    <!-- =================================== Header =================================== -->
    <header id="home">
        <div class="container-fluid">
            <div class="row vh-100">
                <div class="col-md-9 m-auto py-4 text-white text-center header-title-box">
                    <p class="display-1">Dabananda Mitra</p>
                    <h6>Studying Computer Science and Engineering at ISTT</h6>
                    <h6>Dream: Software Engineer at Google, USA</h6>
                </div>
            </div>
        </div>
    </header>
    <!-- =================================== Navbar Section =================================== -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navMenu" aria-expanded="false" aria-controls="navMenu" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navMenu">
                <ul class="navbar-nav m-auto text-uppercase">
                    <li class="nav-item">
                        <a href="#home" class="nav-link">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="#package" class="nav-link">Packages</a>
                    </li>
                    <li class="nav-item">
                        <a href="#reviews" class="nav-link">Reviews</a>
                    </li>
                    <li class="nav-item">
                        <a href="#about" class="nav-link">About</a>
                    </li>
                    <li class="nav-item">
                        <a href="#education" class="nav-link">Education</a>
                    </li>
                    <li class="nav-item">
                        <a href="#contact" class="nav-link">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- =================================== About =================================== -->
    <div class="about-container py-5" id="about">
        <div class="container">
            <div class="row align-items-center d-flex justify-content-center">
                <div class="col-md-8">
                    <p class="display-5">Dabananda Mitra</p>
                    <p class="text-muted">Student | Software Engineer | YouTuber</p>
                    <p class="mt-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium cumque quas ex consequuntur nostrum ipsam placeat minus, nisi expedita et nihil laborum cupiditate, incidunt doloribus amet laudantium nemo dicta eaque.</p>
                    <p class="mt-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium cumque quas ex consequuntur nostrum ipsam placeat minus, nisi expedita et nihil laborum cupiditate, incidunt doloribus amet laudantium nemo dicta eaque.</p>
                    <p class="mt-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium cumque quas ex consequuntur nostrum ipsam placeat minus, nisi expedita et nihil laborum cupiditate, incidunt doloribus amet laudantium nemo dicta eaque.</p>
                </div>
                <div class="col-md-4">
                    <img class="img-fluid rounded-circle border border-light" src="./images/Dabananda_Mitra-removebg-preview.png" alt="Dabananda Mitra">
                </div>
            </div>
        </div>
    </div>
    <!-- =================================== Education =================================== -->
    <div class="education-container py-5" id="education">
        <div class="container">
            <p class="display-4 text-center">Education</p>
            <hr class="mb-5" style="height: 2px; width: 50%; text-align: center; margin: auto;">
            <div class="row my-5">
                <div class="col-md-4 d-flex align-items-center justify-content-center m-auto" style="border-radius: 50%; background-color: #3c40c6; height: 200px; width: 200px;">
                    <p class="display-6">BSc</p>
                </div>
                <div class="col-md-8 card m-auto" style="background: #3c40c6;">
                    <div class="card-body">
                        <h5 class="card-title">Institute of Science Trade & Technology</h5>
                        <hr>
                        <h6 class="card-subtitle mb-5">2020 - 2024</h6>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem non recusandae architecto dolores atque est, quisquam minus tempora, libero soluta distinctio, natus nostrum veniam reprehenderit neque unde totam! Suscipit dolor harum vero, quas ea iusto in cumque mollitia doloremque ad ipsam ab repudiandae autem debitis soluta molestias nostrum neque corrupti!</p>
                    </div>
                </div>
            </div>
            <div class="row my-5">
                <div class="col-md-4 d-flex align-items-center justify-content-center m-auto" style="border-radius: 50%; background-color: #3c40c6; height: 200px; width: 200px;">
                    <p class="display-6">HSC</p>
                </div>
                <div class="col-md-8 card m-auto" style="background: #3c40c6;">
                    <div class="card-body">
                        <h5 class="card-title">Agricultural University College</h5>
                        <hr>
                        <h6 class="card-subtitle mb-5">2016 - 2018</h6>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem non recusandae architecto dolores atque est, quisquam minus tempora, libero soluta distinctio, natus nostrum veniam reprehenderit neque unde totam! Suscipit dolor harum vero, quas ea iusto in cumque mollitia doloremque ad ipsam ab repudiandae autem debitis soluta molestias nostrum neque corrupti!</p>
                    </div>
                </div>
            </div>
            <div class="row my-5">
                <div class="col-md-4 d-flex align-items-center justify-content-center m-auto" style="border-radius: 50%; background-color: #3c40c6; height: 200px; width: 200px;">
                    <p class="display-6">SSC</p>
                </div>
                <div class="col-md-8 card m-auto" style="background: #3c40c6;">
                    <div class="card-body">
                        <h5 class="card-title">Balijuri F.M. High School</h5>
                        <hr>
                        <h6 class="card-subtitle mb-5">2011 - 2016</h6>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem non recusandae architecto dolores atque est, quisquam minus tempora, libero soluta distinctio, natus nostrum veniam reprehenderit neque unde totam! Suscipit dolor harum vero, quas ea iusto in cumque mollitia doloremque ad ipsam ab repudiandae autem debitis soluta molestias nostrum neque corrupti!</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- =================================== Header =================================== -->
    <!-- =================================== Header =================================== -->
    <!-- =================================== Header =================================== -->
    <!-- =================================== Header =================================== -->
    <!-- =================================== Header =================================== -->
    <!-- =================================== Header =================================== -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</body>
</html>

Here is Images:

On big screen it is ok enter image description here

But on small screen I want a space here

enter image description here

How can I do that?

bootstrap-5 twitter-bootstrap css html javascript
3 Answers

Moreover, you can use the calc function inside the style attribute such as margin-bottom:calc(20vh - 10%)

user_103540200

So what you want to use is mx-auto my-5

                <div class="col-md-4 d-flex align-items-center justify-content-center  my-5 mx-auto" style="border-radius: 50%; background-color: #3c40c6; height: 200px; width: 200px;">
                    <p class="display-6">BSc</p>
                </div>
user_60913080

you just add a bootstrap class

<div class="col-md-8 card m-auto my-5" style="background: #3c40c6">
        <div class="card-body">
          <h5 class="card-title">Agricultural University College</h5>
          <hr />
          <h6 class="card-subtitle mb-5">2016 - 2018</h6>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit.
            Exercitationem non recusandae architecto dolores atque est,
            quisquam minus tempora, libero soluta distinctio, natus nostrum
            veniam reprehenderit neque unde totam! Suscipit dolor harum
            vero, quas ea iusto in cumque mollitia doloremque ad ipsam ab
            repudiandae autem debitis soluta molestias nostrum neque
            corrupti!
          </p>
        </div>
      </div>
user_131358820
Related