transition on bootstrap column width is sluggish

Question

i want to apply transition on bootstrap columns width when open state changes, the transition works but it's sluggish, it's not smooth at all

layout.js

"use client";
import { useState } from "react";
import { Col, Container, Row } from "react-bootstrap";
import Sidebar from "./Sidebar";
import "./sidebar.css";
export default function RootLayout({ children }) {
  const [open, setOpen] = useState(true); // sidebar open by default

  return (
    <Container fluid className="py-5 my-5">
      <Row>
        <Col md={open ? 2 : 1} className="transition ps-0">
          <Sidebar open={open} setOpen={setOpen} />
        </Col>
        <Col md={open ? 10 : 11} className="transition">
          <Container
            fluid={open ? false : true}
            className={open ? "" : "paddingX"}
          >
            {children}
          </Container>
        </Col>
      </Row>
    </Container>
  );
}

sidebar.css

.transition {
  transition: width 0.3s ease;
}

javad mohammadi · Accepted Answer · 2025-10-08 09:06:30Z

The sluggish and non-smooth transition is happening because Bootstrap's grid column widths are controlled by CSS classes, which use flex-basis and percentage-based widths not direct width styles. When you switch the column size using these classes, the layout changes instantly, making it hard for the browser to animate the transition smoothly.

To fix this, follow these steps:

Use flexbox styles directly on the columns instead of Bootstrap's Col components.
Set flex-basis or width manually based on the open state.
Apply a CSS transition to those properties for smooth animation.

layout.js

"use client";
import { useState } from "react";
import { Container, Row } from "react-bootstrap";
import Sidebar from "./Sidebar";
import "./sidebar.css";

export default function RootLayout({ children }) {
  const [open, setOpen] = useState(true);

  const sidebarWidth = open ? "16.6667%" : "8.3333%"; // 2/12 or 1/12 fraction in percentage
  const contentWidth = open ? "83.3333%" : "91.6667%"; // complementary widths

  return (
    <Container fluid className="py-5 my-5">
      <Row className="d-flex">
        <div
          className="transition sidebar"
          style={{ flexBasis: sidebarWidth, maxWidth: sidebarWidth }}
        >
          <Sidebar open={open} setOpen={setOpen} />
        </div>
        <div
          className="transition content"
          style={{ flexBasis: contentWidth, maxWidth: contentWidth }}
        >
          <Container fluid={!open} className={open ? "" : "paddingX"}>
            {children}
          </Container>
        </div>
      </Row>
    </Container>
  );
}

sidebar.css

.transition {
  transition: flex-basis 0.3s ease, max-width 0.3s ease;
}

.sidebar {
  overflow: hidden; /* prevent content jumping */
}

Collectives™ on Stack Overflow

transition on bootstrap column width is sluggish

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related