DOCSEARCHbyAlgolia
Submit Docs

Bootstrap Arabic Documentation (v5.3)

website·Indexed 30 days ago

https://getbootstrap-arabic.com

Arabic language documentation and examples for Bootstrap v5.3, featuring RTL (Right-to-Left) support. Includes guides on typography, helpers like vertical rules and stacks, and various UI examples such as dashboards, checkouts, and navbars.

Tokens
135.7K
Snippets
756
Records
925
Agent score
49%

What's inside Bootstrap

  1. Overview of Bootstrap Responsive Font Sizes (RFS)

    RFS is a unit-resizing engine integrated into Bootstrap that allows common CSS properties—such as font-size, margin, padding, border-radius, and box-shadow—to scale responsively. It automatically calculates values using calc() with a combination of rem and viewport units (vw) to ensure elements adapt to different screen sizes and devices.

  2. Use Bootstrap Containers for layout and grid alignment

    Containers are the basic layout element in Bootstrap and are required when using the default grid system. They are used to contain, pad, and center content within a specific viewport. While containers can be nested, most layouts do not require it.

  3. Understand how Bootstrap Gutters work

    Gutters are the gaps between column content, created using horizontal padding. Bootstrap applies padding-right and padding-left to each column and uses a negative margin on the .row to offset this padding at the start and end of the row, ensuring content aligns correctly. By default, gutters are 1.5rem (24px). They are responsive and can be adjusted using breakpoint-specific gutter classes.

  4. Understand Bootstrap component-level CSS variables

    Bootstrap 5 uses CSS custom properties as local variables within specific components. This approach reduces the size of the compiled CSS, prevents unwanted style inheritance (e.g., in nested tables), and allows developers to perform basic re-styling and extension of components after Sass has been compiled.

  5. Understand Bootstrap's Base and Modifier class pattern

    Bootstrap components are built using a base class and modifier class pattern. Common properties are grouped into a base class (e.g., .btn), while specific style variations are handled by modifier classes (e.g., .btn-primary or .btn-success). This approach allows for consistent styling while providing flexible variants.

  6. Understand the Bootstrap Reboot approach

    Bootstrap Reboot is a collection of element-specific CSS resets based on Normalize. It provides a consistent baseline by styling HTML elements using element selectors only. Additional styling is handled via classes (e.g., using .table instead of styling the <table> element directly).

    Key design principles include:

    • Using rem instead of em for scalable component spacing.
    • Avoiding margin-top to prevent vertical margin collapse and simplify the mental model.
    • Using rem for margins on block elements to ensure scalability across device sizes.
    • Minimizing font-related property declarations and using inherit where possible.

  7. Reference Bootstrap Tab event types

    The following events are available for managing tab transitions in Bootstrap components:

    • hide.bs.tab: Fires when a new tab is about to be shown (and the current active tab is about to be hidden). Use event.target for the current active tab and event.relatedTarget for the new tab.
    • hidden.bs.tab: Fires after a new tab has been shown (and the previous active tab is now hidden). Use event.target for the previous active tab and event.relatedTarget for the new active tab.
    • show.bs.tab: Fires when a tab is being shown, but before it is actually displayed. Use event.target for the new active tab and event.relatedTarget for the previous active tab.
    • shown.bs.tab: Fires after a tab has been displayed to the user. Use event.target for the new active tab and event.relatedTarget for the previous active tab.

  8. Bootstrap Accessibility Overview and Compliance

    Bootstrap provides a framework of styles and components designed to be accessible. When implemented correctly with proper authoring markup and additional formatting, projects built with Bootstrap can meet WCAG 2.2 (A/AA/AAA) and Section 508 standards. Interactive components (modals, dropdowns, tooltips) use WAI-ARIA roles and attributes to ensure they are operable via touch, mouse, keyboard, and screen readers. Developers may need to add additional ARIA attributes or JavaScript behavior to convey specific functionality for custom implementations.

  9. Prevent XSS with Bootstrap Content Sanitizer

    Components that render HTML (like Tooltips and Popovers) use a built-in content sanitizer to prevent Cross-Site Scripting (XSS) attacks. This is enabled by default and removes any tags or attributes not explicitly allowed in the sanitizer configuration.

  10. Understand the Bootstrap compiled distribution structure

    The compiled version of Bootstrap provides pre-built CSS and JS files for quick integration. It includes standard versions (bootstrap.*), minified versions for production (bootstrap.min.*), and Right-to-Left (RTL) versions (bootstrap.rtl.*). Source maps (.map files) are provided for browser developer tools. The bootstrap.bundle.js and bootstrap.bundle.min.js files include the Popper library.
    bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap.rtl.css
│   └── ...
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.min.js
    ├── bootstrap.esm.js
    └── ...

  11. Integrate Bootstrap Icons into a project

    Bootstrap Icons is an open-source SVG icon library with over 1,800 symbols. It can be used independently of the Bootstrap framework. Icons are available as SVGs or icon fonts, allowing for vector scaling and easy customization via CSS.