CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Aniket
Aniket

Reputation: 51

How to use Bootstrap 3 or 4 - 16 & 24 grid system

I have designed a Bootstrap 24 psd grid website template but, now I am confused how to use this 24 or 16 psd grids in Bootstrap 3 or 4 because Bootstrap only provides 12 col grid system. Anyone there with a proper solution ?

Upvotes: 2

Views: 1368

Answers (3)

jedik
jedik

Reputation: 1244

Unfortunately, there is no customization tool in Bootstrap 4 so custom build is a necessary step.

But don't worry, it's quite easy.

  1. Follow instructions from this answer - https://stackoverflow.com/a/47251052/1614120 (you'll need Node.js installed)
  2. Put following code in the name.scss (file mentioned in 5th step):

name.scss

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

// Set this value to 16, 24, etc. depending on how many columns you need.
$grid-columns: 24;

@import "bootstrap/scss/grid";
  1. Compile (step 7).

If you need any other Bootstrap components apart from the grid, see step 5 of the instructions.

Upvotes: 3

robertgrzonka
robertgrzonka

Reputation: 192

You can do it as above – styling sass/less as you expected or you can just nest columns inside of columns like so: click.

<div class="container">

    <div class="row">
        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    1/24
                </div>
                <div class="col-6">
                    2/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    3/24
                </div>
                <div class="col-6">
                    4/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    5/24
                </div>
                <div class="col-6">
                    6/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    7/24
                </div>
                <div class="col-6">
                    8/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    9/24
                </div>
                <div class="col-6">
                    10/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    11/24
                </div>
                <div class="col-6">
                    12/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    13/24
                </div>
                <div class="col-6">
                    14/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    15/24
                </div>
                <div class="col-6">
                    16/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    17/24
                </div>
                <div class="col-6">
                    18/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    19/24
                </div>
                <div class="col-6">
                    20/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    21/24
                </div>
                <div class="col-6">
                    22/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    23/24
                </div>
                <div class="col-6">
                    24/24
                </div>
            </div>
        </div>

    </div>
</div>

Upvotes: 0

Muhammad Tahseen ur Rehman
Muhammad Tahseen ur Rehman

Reputation: 253

You can customize bootstrap and change the grid from 12 according to your 16 or 24 grids.

just go to the following link and customize bootstrap and then download bootstrap.

https://getbootstrap.com/docs/3.3/customize/

Upvotes: 0

Related Questions