Question 138652 in Html Question posted in
Some basic documentation can be found here.

How can I remove space between two columns of HTML square containers?

ref image

I have two columns of blocks, and I need to do space between all of them the same.

Please help

Here a code:

        <div class="row">
            <div class="col-md-6">
                <img src="./img/02.jpg" class="img-fluid" alt="Image">
            </div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-6">
                        <div class="square-container bg-primary"></div>
                    </div>
                    <div class="col-md-6">
                        <div class="square-container bg-secondary"></div>
                    </div>
                    <div class="col-md-6">
                        <div class="square-container bg-success"></div>
                    </div>
                    <div class="col-md-6">
                        <div class="square-container bg-danger"></div>
                    </div>
                </div>
            </div>
        </div>

There is Css that I also have:

body {
    font-family: 'Exo 2', sans-serif;
    width: 100%;
    height: 100%;
    background-size: cover;
}

p {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.square-container {
    width: 220px;
    height: 235px;
}

.grid-gap {
    display: grid;
    grid-gap: 1em;
}

I tried to do it with grid. But with grid all squares goes down in one column

Tags:

3

Answers


  1. 0

    You can use css display: grid and define the columns and the gap property.

    Login or Signup to reply.
  2. 0

    As you are using boostrap row class, so just use g class for gap. And it will work. Here is a sample code:

           <div class="row gx-4 gy-4">
            <div class="col-md-6">
                <img src="./img/02.jpg" class="img-fluid" alt="Image">
            </div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-6">
                        <div class="square-container bg-primary"></div>
                    </div>
                    <div class="col-md-6">
                        <div class="square-container bg-secondary"></div>
                    </div>
                    <div class="col-md-6">
                        <div class="square-container bg-success"></div>
                    </div>
                    <div class="col-md-6">
                        <div class="square-container bg-danger"></div>
                    </div>
                </div>
            </div>
        </div>

    I used gx for horizontal spacing and gy for vertical spacing. You can use simple g for both horizontal and vertical spacing.

    Login or Signup to reply.
  3. 0

    In bootstrap col-md-6 class has 50% width and paddling left and right of 15px

    To remove extra space between the columns, first make .square-container‘s width to 100% so there won’t be extra space inside column.

    If you need more or less space than default 15px, then you can manually override this or you can use gutter for spacing between columns.

    bootstrap gutters docs

    jsfiddle

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search