Grid Medium with Equal Size.
Example: In this example, each row contains four columns, and each column has equal width on medium-sized screens (≥ 768px). The content is centered and styled with Bootstrap classes.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 5 Grid Medium</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha256-MBffSnbbXwHCuZtgPYiwMQbfE7z+GOZ7fBPCNB06Z98=" crossorigin="anonymous"></head><body class="container text-center"> <h2 class="p-4 bg-success text-white"> Welcome to Bootstrap Grid </h2> <p class="p-4 bg-success text-white"> Equal width content </p> <div class="row"> <div class="col-md">HTML</div> <div class="col-md">CSS</div> <div class="col-md">JavaScript</div> <div class="col-md">Bootstrap</div> </div> <div class="row"> <div class="col-md">Tailwind CSS</div> <div class="col-md">ReactJs</div> <div class="col-md">NextJS</div> <div class="col-md">ReactNative</div> </div> <!-- Bootstrap JS dependency --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha256-9XQy42k1z6v5Od1F7L1P4j3Lko8dADJ3g23Bd7MooP7yyA2MIu+tgslXqUNW8Asg" crossorigin="anonymous"> </script></body></html> |
Output:
Bootstrap 5 Grid Medium
Bootstrap is a free and open-source tool for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, the websites are perfect for all browsers (IE, Firefox, and Chrome) and all sizes of screens (Desktop, Tablets, Phablets, and Phones). It provides a Faster and Easier way for Development.