1

I want to make a screen with buttons responsively, these buttons are square, they should be next to each other, but as soon as the line breaks they should start on the left side, but always stay in the center. I'm using bootstrap-5, but I don't know how to do that. I tried with flex-box.

enter image description here

My code:

.box {
  height: 65px;
  width: 60px;
  background: black;
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  </head>
  <body>
  
    <div class="d-flex flex-wrap gap-4 w-50 border border-primary">

      <div class="box">
      </div>

      <div class="box">
      </div>

      <div class="box">
      </div>
      
      <div class="box">
      </div>
      
      <div class="box">
      </div>
      
      <div class="box">
      </div>
      
      <div class="box">
      </div>

     </div>
  
  
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </body>
</html>

3

2 Answers 2

2

Nest the flexbox in another div. Then give it the mx-auto class to center itself in the middle of the parent div.

Now give the parent div the class w-50 and change the width of the flexbox to the width you want.

enter image description here

.box {
  height: 65px;
  width: 60px;
  background: black;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container px-5 border border-primary">
  <div class="d-flex flex-wrap gap-4 w-75 mx-auto">

      <div class="box">
      </div>

      <div class="box">
      </div>

      <div class="box">
      </div>
      
      <div class="box">
      </div>
      
      <div class="box">
      </div>
      
      <div class="box">
      </div>
      
      <div class="box">
      </div>

     </div>
</div>

4
  • but my cards are still not in the middle of the div with the blue border :( Commented Oct 21, 2022 at 14:05
  • Can you explain in more detail? I really don't understand what you want. Commented Oct 21, 2022 at 14:56
  • If you analyze the image you have in my question, where the one with the title says "I want" you can see that it has the black squares being rendered from beginning to end, while the div that holds them stays in the center. Already in the image that "I have" you can see that the black boxes are not in fact in the center. Commented Oct 21, 2022 at 15:18
  • 1
    That's because the parent div had a set width. I have now removed these and applied a padding instead to create space. Is this what you mean? Commented Oct 21, 2022 at 17:42
-1

Based on my small knowledge in bootstrap I think you should add p-5 as an example to your container div . P-(number between 1 & 5) representing the padding so in this way the boxes will have the space you want to stay away from the border.

.box{
height:65px;
width: 60px;
background: black;
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  </head>
  <body>
  
    <div class="d-flex p-3 flex-wrap gap-4 w-50 border border-primary">

      <div class="box">
      </div>

      <div class="box">
      </div>

      <div class="box">
      </div>
      
      <div class="box">
      </div>
      
      <div class="box">
      </div>
      
      <div class="box">
      </div>
      
      <div class="box">
      </div>

     </div>
  
  
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.