I am trying to display 4 div's on side by side with bootstrap classes but unfortunately I was getting too much spaces in middle(right side to each div) and also not aligned to centre. I want them to be center aligned with very less space in middle.Pease help.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.2.0/css/all.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</head>
<style>
.student-blocks {
padding: 1rem;
box-shadow: 0 0 10px gray;
max-width: 9rem;
text-align: center;
}
</style>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-6">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col-6">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-6">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col-6">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>CodePudding user response：
If you are trying to place 4 div's side by side in a single row then please try below template.
<body>
<section>
<div class="container">
<div class="row">
<div class="col">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
</div>
</div>
</section>
</body>
CodePudding user response：
So I kind of re-worked your HTML a bit to get your desired result. In order to get them on the same line, I changed them to .col-3 to span across the default 12 columns per line. 12/3 = 4 per line. You can simply put this onto a new line by putting the desired col sizes back to col-6 for two per line etc..
I added a flex display to your container and justify-content: center so that everything is centered.
.student-blocks {
padding: 1rem;
box-shadow: 0 0 10px gray;
max-width: 9rem;
text-align: center;
}
.container {
display: flex;
justify-content: center;
}
/* change padding to change spacing */
div.col-3 {
flex: 0 0 auto;
width: 25%;
padding: 10px;
}<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.2.0/css/all.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-3">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col-3">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col-3">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col-3">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>You can simply change the padding on your CSS selector div.col-6 to change the spacing to what you desire.
To eliminate spacing just simply make the padding: 0; like so:
.student-blocks {
padding: 1rem;
box-shadow: 0 0 10px gray;
max-width: 9rem;
text-align: center;
}
.container {
display: flex;
justify-content: center;
}
div.col-3 {
flex: 0 0 auto;
width: 25%;
padding: 0px;
}<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.2.0/css/all.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-3">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col-3">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col-3">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
<div class="col-3">
<div class="student-blocks">
<i class="fas fa-user-graduate"></i><span><small>1000 </small></span>
<p>Students</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>