Thu. Sep 21st, 2023

[ANSWERED] html – how to make my cards to be in the center but always start on the left side?

By

Nov 18, 2022 css, flexbox, html, twitter-bootstrap

Solution 1 :

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.

.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>

Solution 2 :

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>

Problem :

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.

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>

Comments

Comment posted by Mikk Raudsepp

Do you want the buttons to be fixed width at 60px or scalable?

Comment posted by Daniela Gross

Is fixed in 60 px, but if have somehow to do the buttons scalable but with the same size, i will do

Comment posted by getbootstrap.com/2.0.2/scaffolding.html#fluidGridSystem

It looks like you are not using Bootstraps grid feature?

Comment posted by Daniela Gross

but my cards are still not in the middle of the div with the blue border 🙁

Comment posted by Remco Kersten

Can you explain in more detail? I really don’t understand what you want.

Comment posted by Daniela Gross

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.

Comment posted by Remco Kersten

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?

By

Related Post

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022