How to reduce the size of div in bootstrap? - html

Question

I used bootstrap grid to set the size of the div, but I want the div to be a little bit less wide.
Here is my code
.single-box {
background: black
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="col-md-3 ml-5">
<div class="single-box">
<p class="ml-5">1 марта, 18:00</p>
<h4 class="ml-5">Hi</h4>
<p class="ml-5">My name is..</p>
<button type="button" class="btn mx-auto btn-light gotham">Write to me</button>
</div>
</div>
Is there a way to reduce the width by bootstrap tools? Or the only way out is to forget about bootstrap grid and set the parametrs by myself?

Answer 1

You can set a margin like so:
.single-box {
background: green;
margin: 0 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="col-md-3 ml-5">
<div class="single-box">
<p class="ml-5">1 марта, 18:00</p>
<h4 class="ml-5">Hi</h4>
<p class="ml-5">My name is..</p>
<button type="button" class="btn mx-auto btn-light gotham">Write to me</button>
</div>
</div>

Answer 2

You can use Bootstrap utility classes
w-25 for 25% width
w-50 for 50% width
w-75 for 75% width
w-100 for 100% width
If you want to have a div 25% less wider you can use it as below:
<div class="w-75">
<h1>Hello World</h1>
</div>
<!-- Next div 100% or even you don't need to add w-100 class -->
<div class="w-100">
<h1>Hello World</h1>
</div>