Layout Center to the screen

  • STEPS

    1. Create container layout

    Apply the class 'container justify-content-center' 
    
                      <body style="background:yellow">

                              <div class="col-lg-6 col-md-6 col-sm-6 container justify-content-center">

                              </div>

                      </div>

    2. Inner Content

    
                      <div class="row">

                              <div class="col-lg-6 col-md-6 col-sm-6" style="background:green">1</div>
                              <div class="col-lg-6 col-md-6 col-sm-6" style="background:red">2</div>

                      </div>
                      <div class="row">

                              <div class="col-lg-6 col-md-6 col-sm-6" style="background:red">3</div>
                              <div class="col-lg-6 col-md-6 col-sm-6" style="background:green">4</div>

                      </div>
                      <div class="row">

                          <div class="col-lg-6 col-md-6 col-sm-6" style="background:green">5</div>
                          <div class="col-lg-6 col-md-6 col-sm-6" style="background:red">6</div>

                      </div>

                      <div class="row">

                              <div class="col-lg-6 col-md-6 col-sm-6" style="background:red">7</div>
                              <div class="col-lg-6 col-md-6 col-sm-6" style="background:green">8</div>

                      </div>

    3. Complete code

    
                      <body style="background:yellow">

                              <div class="col-lg-6 col-md-6 col-sm-6 container justify-content-center">

                                        <div class="row">

                                                <div class="col-lg-6 col-md-6 col-sm-6" style="background:green">1</div>
                                                <div class="col-lg-6 col-md-6 col-sm-6" style="background:red">2</div>

                                        </div>
                                        <div class="row">

                                                <div class="col-lg-6 col-md-6 col-sm-6" style="background:red">3</div>
                                                <div class="col-lg-6 col-md-6 col-sm-6" style="background:green">4</div>

                                        </div>
                                        <div class="row">

                                            <div class="col-lg-6 col-md-6 col-sm-6" style="background:green">5</div>
                                            <div class="col-lg-6 col-md-6 col-sm-6" style="background:red">6</div>

                                        </div>

                                        <div class="row">

                                                <div class="col-lg-6 col-md-6 col-sm-6" style="background:red">7</div>
                                                <div class="col-lg-6 col-md-6 col-sm-6" style="background:green">8</div>

                                        </div>

                              </div>

                      </div>