FAQ: Learn Bootstrap 4: Grid - Bootstrap 4 Grid Review

wiki-bot · February 15, 2019, 5:25pm

This community-built FAQ covers the “Bootstrap 4 Grid Review” exercise from the lesson “Learn Bootstrap 4: Grid”.

Paths and Courses
This exercise can be found in the following Codecademy content:

FAQs on the exercise Bootstrap 4 Grid Review

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply () below!

Agree with a comment or answer? Like () to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

el_escandalo · March 22, 2020, 7:18pm

Does anyone have an example of how to make the checkerboard with Bootstrap?
Thanks

sleepyjoshua · September 3, 2020, 7:19am

@el_escandalo

I put a style in for the black and white squares in the style.css tab

.black {
        background-color: black;
      }
      .white {
        background-color: white;
      }

And then I nested 8 rows with 8 columns each inside of a column inside of a row.

<div class="row"><div class="col-12">
        <div class="row">
        <div class="col-1 black"><p>1</p></div>
        <div class="col-1 white"><p>2</p></div>
        <div class="col-1 black"><p>3</p></div>
        <div class="col-1 white"><p>4</p></div>        
        <div class="col-1 black"><p>5</p></div>
        <div class="col-1 white"><p>6</p></div>
        <div class="col-1 black"><p>7</p></div>
        <div class="col-1 white"><p>8</p></div>
        </div>
        <div class="row">
        <div class="col-1 white"><p>1</p></div>
        <div class="col-1 black"><p>2</p></div>
        <div class="col-1 white"><p>3</p></div>
        <div class="col-1 black"><p>4</p></div>        
        <div class="col-1 white"><p>5</p></div>
        <div class="col-1 black"><p>6</p></div>
        <div class="col-1 white"><p>7</p></div>
        <div class="col-1 black"><p>8</p></div>
        </div>
        <div class="row">
        <div class="col-1 black"><p>1</p></div>
        <div class="col-1 white"><p>2</p></div>
        <div class="col-1 black"><p>3</p></div>
        <div class="col-1 white"><p>4</p></div>        
        <div class="col-1 black"><p>5</p></div>
        <div class="col-1 white"><p>6</p></div>
        <div class="col-1 black"><p>7</p></div>
        <div class="col-1 white"><p>8</p></div>
        </div>
        <div class="row">
        <div class="col-1 white"><p>1</p></div>
        <div class="col-1 black"><p>2</p></div>
        <div class="col-1 white"><p>3</p></div>
        <div class="col-1 black"><p>4</p></div>        
        <div class="col-1 white"><p>5</p></div>
        <div class="col-1 black"><p>6</p></div>
        <div class="col-1 white"><p>7</p></div>
        <div class="col-1 black"><p>8</p></div>
        </div>
        <div class="row">
        <div class="col-1 black"><p>1</p></div>
        <div class="col-1 white"><p>2</p></div>
        <div class="col-1 black"><p>3</p></div>
        <div class="col-1 white"><p>4</p></div>        
        <div class="col-1 black"><p>5</p></div>
        <div class="col-1 white"><p>6</p></div>
        <div class="col-1 black"><p>7</p></div>
        <div class="col-1 white"><p>8</p></div>
        </div>
        <div class="row">
        <div class="col-1 white"><p>1</p></div>
        <div class="col-1 black"><p>2</p></div>
        <div class="col-1 white"><p>3</p></div>
        <div class="col-1 black"><p>4</p></div>        
        <div class="col-1 white"><p>5</p></div>
        <div class="col-1 black"><p>6</p></div>
        <div class="col-1 white"><p>7</p></div>
        <div class="col-1 black"><p>8</p></div>
        </div>
        <div class="row">
        <div class="col-1 black"><p>1</p></div>
        <div class="col-1 white"><p>2</p></div>
        <div class="col-1 black"><p>3</p></div>
        <div class="col-1 white"><p>4</p></div>        
        <div class="col-1 black"><p>5</p></div>
        <div class="col-1 white"><p>6</p></div>
        <div class="col-1 black"><p>7</p></div>
        <div class="col-1 white"><p>8</p></div>
        </div>
        <div class="row">
        <div class="col-1 white"><p>1</p></div>
        <div class="col-1 black"><p>2</p></div>
        <div class="col-1 white"><p>3</p></div>
        <div class="col-1 black"><p>4</p></div>        
        <div class="col-1 white"><p>5</p></div>
        <div class="col-1 black"><p>6</p></div>
        <div class="col-1 white"><p>7</p></div>
        <div class="col-1 black"><p>8</p></div>
        </div>
    </div>
    </div>
    </div>

igordzilit3918802943 · March 31, 2021, 7:51am

Hello coders,
I have trouble with creating a checkerboard with Bootstrap.
I can’t find the way how to make my 8 columns take the full width of the row on all devices.
Can someone explain what I am doing wrong?
Thanks

``

1

2

3

4

5

6

7

8

      <div class="row">
        <div class="col-1 black"><p>1</p></div>
        <div class="col-1 white"><p>2</p></div>
        <div class="col-1 black"><p>3</p></div>
        <div class="col-1 white"><p>4</p></div>        
        <div class="col-1 black"><p>5</p></div>
        <div class="col-1 white"><p>6</p></div>
        <div class="col-1 black"><p>7</p></div>
        <div class="col-1 white"><p>8</p></div>
      </div>

      <div class="row">
        <div class="col-1 black"><p>1</p></div>
        <div class="col-1 white"><p>2</p></div>
        <div class="col-1 black"><p>3</p></div>
        <div class="col-1 white"><p>4</p></div>        
        <div class="col-1 black"><p>5</p></div>
        <div class="col-1 white"><p>6</p></div>
        <div class="col-1 black"><p>7</p></div>
        <div class="col-1 white"><p>8</p></div>
      </div>

      <div class="row">
        <div class="col-1 black"><p>1</p></div>
        <div class="col-1 white"><p>2</p></div>
        <div class="col-1 black"><p>3</p></div>
        <div class="col-1 white"><p>4</p></div>        
        <div class="col-1 black"><p>5</p></div>
        <div class="col-1 white"><p>6</p></div>
        <div class="col-1 black"><p>7</p></div>
        <div class="col-1 white"><p>8</p></div>
      </div>

      <div class="row">
        <div class="col-1 black"><p>1</p></div>
        <div class="col-1 white"><p>2</p></div>
        <div class="col-1 black"><p>3</p></div>
        <div class="col-1 white"><p>4</p></div>        
        <div class="col-1 black"><p>5</p></div>
        <div class="col-1 white"><p>6</p></div>
        <div class="col-1 black"><p>7</p></div>
        <div class="col-1 white"><p>8</p></div>
      </div>

      <div class="row">
        <div class="col-1 black"><p>1</p></div>
        <div class="col-1 white"><p>2</p></div>
        <div class="col-1 black"><p>3</p></div>
        <div class="col-1 white"><p>4</p></div>        
        <div class="col-1 black"><p>5</p></div>
        <div class="col-1 white"><p>6</p></div>
        <div class="col-1 black"><p>7</p></div>
        <div class="col-1 white"><p>8</p></div>
      </div>    

      <div class="row">
        <div class="col-1 black"><p>1</p></div>
        <div class="col-1 white"><p>2</p></div>
        <div class="col-1 black"><p>3</p></div>
        <div class="col-1 white"><p>4</p></div>        
        <div class="col-1 black"><p>5</p></div>
        <div class="col-1 white"><p>6</p></div>
        <div class="col-1 black"><p>7</p></div>
        <div class="col-1 white"><p>8</p></div>
      </div>  

      <div class="row">
        <div class="col-1 black"><p>1</p></div>
        <div class="col-1 white"><p>2</p></div>
        <div class="col-1 black"><p>3</p></div>
        <div class="col-1 white"><p>4</p></div>        
        <div class="col-1 black"><p>5</p></div>
        <div class="col-1 white"><p>6</p></div>
        <div class="col-1 black"><p>7</p></div>
        <div class="col-1 white"><p>8</p></div>
      </div>                                                                                                          
    </div>
  </div>
</div>

giovannastella693826 · June 29, 2021, 2:25pm

Hello igordzilit3918802943,
I’ve modified the CSS style sheet to fit the exercise:

.container-fluid {

  background-color: lightblue;

  border: black solid 1px;

}

[class*="col"]{

  border: black solid 2.5px;

  color: black;   

}

.brown {

  background-color: brown;

}

.white {

  background-color: white;

}

Then I modified the html creating a column occupying the entire width of the screen (12column units) inside which there are 8 columns alternating in colour.

<body>

    <div class="container-fluid">

      <h1>Checkerboard</h1>

       <div class="col-12"> <!--coloumn that contains all rows-->

        <div class="row">

        <div class="col brown"><p>1</p></div>

        <div class="col white"><p>2</p></div>

        <div class="col brown"><p>3</p></div>

        <div class="col white"><p>4</p></div>        

        <div class="col brown"><p>5</p></div>

        <div class="col white"><p>6</p></div>

        <div class="col brown"><p>7</p></div>

        <div class="col white"><p>8</p></div>

        </div>

        <div class="row">

        <div class="col white"><p>1</p></div>

        <div class="col brown"><p>2</p></div>

        <div class="col white"><p>3</p></div>

        <div class="col brown"><p>4</p></div>        

        <div class="col white"><p>5</p></div>

        <div class="col brown"><p>6</p></div>

        <div class="col white"><p>7</p></div>

        <div class="col brown"><p>8</p></div>

        </div>

       <div class="row">

        <div class="col brown"><p>1</p></div>

        <div class="col white"><p>2</p></div>

        <div class="col brown"><p>3</p></div>

        <div class="col white"><p>4</p></div>        

        <div class="col brown"><p>5</p></div>

        <div class="col white"><p>6</p></div>

        <div class="col brown"><p>7</p></div>

        <div class="col white"><p>8</p></div>

        </div>

        <div class="row">

        <div class="col white"><p>1</p></div>

        <div class="col brown"><p>2</p></div>

        <div class="col white"><p>3</p></div>

        <div class="col brown"><p>4</p></div>        

        <div class="col white"><p>5</p></div>

        <div class="col brown"><p>6</p></div>

        <div class="col white"><p>7</p></div>

        <div class="col brown"><p>8</p></div>

        </div>

               <div class="row">

        <div class="col brown"><p>1</p></div>

        <div class="col white"><p>2</p></div>

        <div class="col brown"><p>3</p></div>

        <div class="col white"><p>4</p></div>        

        <div class="col brown"><p>5</p></div>

        <div class="col white"><p>6</p></div>

        <div class="col brown"><p>7</p></div>

        <div class="col white"><p>8</p></div>

        </div>

        <div class="row">

        <div class="col white"><p>1</p></div>

        <div class="col brown"><p>2</p></div>

        <div class="col white"><p>3</p></div>

        <div class="col brown"><p>4</p></div>        

        <div class="col white"><p>5</p></div>

        <div class="col brown"><p>6</p></div>

        <div class="col white"><p>7</p></div>

        <div class="col brown"><p>8</p></div>

        </div>

               <div class="row">

        <div class="col brown"><p>1</p></div>

        <div class="col white"><p>2</p></div>

        <div class="col brown"><p>3</p></div>

        <div class="col white"><p>4</p></div>        

        <div class="col brown"><p>5</p></div>

        <div class="col white"><p>6</p></div>

        <div class="col brown"><p>7</p></div>

        <div class="col white"><p>8</p></div>

        </div>

        <div class="row">

        <div class="col white"><p>1</p></div>

        <div class="col brown"><p>2</p></div>

        <div class="col white"><p>3</p></div>

        <div class="col brown"><p>4</p></div>        

        <div class="col white"><p>5</p></div>

        <div class="col brown"><p>6</p></div>

        <div class="col white"><p>7</p></div>

        <div class="col brown"><p>8</p></div>

        </div>

    </div>

    </div>

The result should be completely responsive.
I hope this helps!

Gio

yelllowcontroller · September 11, 2022, 10:33pm

Very clean syntax. Thank you for your explanation.

data6548279195 · June 7, 2024, 4:33pm

Hi, here is how I did the 8 by 8 check board using Bootstrap.

HTML:

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

CSS:

.container{
    border: 10px solid gray;
}

[class*="col"]{
	height: 5.2em;
}

.row:nth-child(even) .col:nth-child(odd){
	background: black;
}

.row:nth-child(even) .col:nth-child(even){
	background: white;
}

.row:nth-child(odd) .col:nth-child(odd){
	background: white;
}
.row:nth-child(odd) .col:nth-child(even){
	background: black;
}

Result:

But still I am struggling to make each column a square. Any suggestions is much appreciated.

Thank you!

Topic		Replies	Views
FAQ: Learn Bootstrap 4: Grid - Bootstrap 4 Grid Review Uncategorized	0	350	August 17, 2022
FAQ: Learn Bootstrap 4: Grid - Bootstrap Containers CSS FAQ	1	1250	June 4, 2021
FAQ: Learn Bootstrap 4: Grid - Getting Started with Bootstrap CSS FAQ	4	1569	July 5, 2021
FAQ: Learn Bootstrap 4: Grid - Rows CSS FAQ	0	820	February 15, 2019
FAQ: Learn Bootstrap 4: Grid - Intro to the Grid CSS FAQ	0	1127	February 15, 2019

FAQ: Learn Bootstrap 4: Grid - Bootstrap 4 Grid Review

FAQs on the exercise Bootstrap 4 Grid Review

Join the Discussion. Help a fellow learner on their journey.

Related topics