How to give space between two columns in bootstrap?
May 30, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
In this tutorial, we will learn how to give space between two columns in bootstrap.
To give space between two-column, put col-md-offset-2 class to create space in two columns.
We can keep space between columns by using normal CSS but here we will use the Bootstrap framework for that. In this article, we will keep a measured gap between columns by the following methods.
Method using columns offset: The offset class is used to increase the left margin of a column. The class col-md-offset-2 moves col-md-3 by 3 columns.
Table of contents
- Includes bootstrap view
- Includes bootstrap library
- Define its class name
Step 1: Includes bootstrap view
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">Step 1: Includes bootstrap library
First of all, load the Bootstrap framework CSS into the head tag of your webpage.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />Step 2: Define its class name
The offset class is used to increase the left margin of a column. The class col-md-offset-2 moves col-md-3 by 3 columns.
<div class="container">
<h2 class="text-center">Space between two columns in bootstrap</h2>
<div class="row">
<div class="col-md-5 bg-warning a">aGuideHub</div>
<div class="col-md-5 bg-danger offset-2 a">
aGuideHub
</div>
</div>Example.
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1,
shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<style media="screen">
.a {
padding: 50px;
}
</style>
</head>
<body>
<!--using offset-->
<div class="container">
<h2 class="text-center">Space between two columns in bootstrap</h2>
<div class="row">
<div class="col-md-5 bg-warning a">aGuideHub</div>
<div class="col-md-5 bg-danger offset-2 a">
aGuideHub
</div>
</div>
</body>
</html>Check the output of the above code example.
All the best 👍