Bootstrap 5 Ratio Custom Ratios
Bootstrap 5 Custom ratios allow us to set the aspect ratio using a CSS custom property. You can create custom aspect ratios for HTML elements by simply replacing modifier classes with CSS variables. Each ratio-* class contains a CSS custom property or variable in the selector.
- ratio-1×1: 1080×1080 pixels
- ratio-4×3: 1024×768 pixels
- ratio-16×9: 1920×1080 pixels
- ratio-21×9: 2560×1080 pixels
Bootstrap 5 Ratio Custom Ratios Class: There is no class for custom ratio, it depends on the developer how he/she wants the ratio.
Syntax:
<div class="ratio" style="--bs-aspect-ratio: 50%;"> <div>. . .</div> </div> <div class="ratio ratio-4x3"> <div>. . .</div> </div>
Below example illustrate the Bootstrap 5 Ratio Custom Ratios:
Example 1: Set –bs-aspect-ratio: 50% on the ratio to produce a 2×1 aspect ratio.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "text-center" > < h1 class = "text-success" >w3wiki</ h1 > < h2 >Bootstrap 5 Custom ratios</ h2 > </ div > < br > < div class = "ratio" style = "--bs-aspect-ratio: 10%;" > < div class = "bg-success" >10%</ div > </ div > < div class = "ratio" style = "--bs-aspect-ratio: 40%;" > < div class = "bg-secondary" >40%</ div > </ div > </ body > </ html > |
Output:
Example 2: The aspect ratio can be easily changed between breakpoints thanks to this CSS variable. The following starts out as 4×3, but at the medium breakpoint, it switches to 2×1.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "text-center" > < h1 class = "text-success" >w3wiki</ h1 > < h2 >Bootstrap 5 Custom ratios</ h2 > </ div > < br > < div class = "ratio ratio-4x3" > < div class = "bg-success" >4x3, then 2x1</ div > </ div > </ body > </ html > |
Output:
Contact Us