Skip to content

docs: fix CSS Grid intro and drop React reference from templates page #626

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mrholek merged 1 commit into from
Jul 26, 2026
Merged

docs: fix CSS Grid intro and drop React reference from templates page #626

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 2 additions & 20 deletions docs/src/content/docs/layout/css-grid.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,10 @@ description: "Learn how to enable, use, and customize our alternate layout syste

CoreUI for Bootstrap's default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we're seeing in browsers like the new CSS Grid.

CoreUI Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together.

<Callout color="info">
**New to or unfamiliar with flexbox?** [Read this CSS Tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background) for background, terminology, guidelines, and code snippets.
<Callout color="warning">
**Heads up—our CSS Grid system is experimental and opt-in as of v4.1.0!** We included it in our documentation's CSS to demonstrate it for you, but it's disabled by default. Keep reading to learn how to enable it in your projects.
</Callout>

<Example class="bd-example-row" code={`<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>`} />

The above example creates three equal-width columns across all devices and viewports using our predefined grid classes. Those columns are centered in the page with the parent `.container`.

## How it works

With CoreUI, we've added the option to enable a separate grid system that's built on CSS Grid, but with a CoreUI twist. You still get classes you can apply on a whim to build responsive layouts, but with a different approach under the hood.
Expand Down
2 changes: 1 addition & 1 deletion docs/src/content/docs/templates/admin-dashboard.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: "Bootstrap Templates"
description: "Develop modern, beautiful, and responsive applications in half the time with high-performing and easy-to-customize react admin panels to cover any requirement."
description: "Develop modern, beautiful, and responsive applications in half the time with high-performing and easy-to-customize Bootstrap admin panels to cover any requirement."
---

## Bootstrap Admin & Dashboard Templates
Expand Down
Loading