Can I use both a CSS grid and Bootstrap together?

Answer 1

Yes, they can!

I've worked mostly with Bootstrap and Flexbox over the last handful of years. Flexbox (used in Bootstrap 4+) has a great structure and allows quick changes for all screen sizes. I find flexbox easier to visualize compared to CSS grid. But I have seen how powerful the CSS grid is.

Here is an example of how they could potentially work together (I'll use Bootstrap 4 syntax):

// load bootstrap cdn

<style>

.parent {

display: grid;

grid-template-columns: 3fr 1fr;

grid-template-rows: 200px auto 100px;

grid-template-areas:

"main sidebar"

"main sidebar";

}

<div class="container">

<div class="row">

<div class="col-4 text-center">

<h1>Title</h1>

<p>subtitle</p>

</div>

<div class="col-8">

<div class="parent">

<div class="main"></div>

<div class="sidebar"></div>

</div>

</div>

</div>

</div>

This example would essentially use Bootstrap's flexbox to set up the layout of this container and the CSS grid would control the .parent, .main, and .sidebar classes within the col-8 div. The CSS grid styles would take over within the col-8 div only.

Hopefully, that clears up your question.

Please let me know if you have any others,

Robert Hogan