Fix heights, scrolls and layouts of some examples in Docs (#1705)

Co-authored-by: Mustafa Ateş Uzun <mustafauzun0@gmail.com> Co-authored-by: Aditi Deshpande <aditideshpande2908@gmail.com> Co-authored-by: Bartłomiej Gawęda <bgaweda@abis.krakow.pl>
2025-12-21 17:34:25 +04:00 · 2023-09-21 23:01:38 +02:00
parent c462b74773
commit f2e182dedf
19 changed files with 86 additions and 83 deletions
--- a/_config.yml
+++ b/_config.yml
@@ -222,7 +222,7 @@ socials:
    title: Tabler

 months-short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-months-long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+months-long: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

 icons:
  link: https://tabler-icons.io
--- a/docs/components/alerts.mdx
+++ b/docs/components/alerts.mdx
@@ -8,7 +8,7 @@ bootstrapLink: components/alerts/

 Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action.

-```html example vertical
+```html example vertical height="420px"
 <div class="alert alert-success" role="alert">
  <h4 class="alert-title">Wow! Everything worked!</h4>
  <div class="text-secondary">Your account has been saved!</div>
@@ -38,7 +38,7 @@ Depending on the information you need to convey, you can use one of the followin

 Add a link to your alert message to redirect users to the details they need to complete or additional information they should read.

-```html example vertical code
+```html example vertical code height="7rem"
 <div class="alert alert-danger m-0">
  This is a danger alert — <a href="#" class="alert-link">check it out</a>!
 </div>
@@ -48,7 +48,7 @@ Add a link to your alert message to redirect users to the details they need to c

 Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it.

-```html example
+```html example height="420px"
 <div class="alert alert-success alert-dismissible" role="alert">
  <div class="d-flex">
    <div>
@@ -136,7 +136,7 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you

 Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.

-```html example
+```html example height="420px"
 <div class="alert alert-success" role="alert">
  <div class="d-flex">
    <div>
@@ -255,7 +255,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas

 Add an avatar to your alert modal to make it more personalized.

-```html code example
+```html code example height="420px"
 <div class="alert alert-success" role="alert">
  <div class="d-flex">
    <div>
@@ -302,7 +302,7 @@ Add an avatar to your alert modal to make it more personalized.

 Add primary and secondary buttons to your alert modals if you want users to take a particular action based on the information included in the modal message.

-```html code example
+```html code example height="500px" scrollable
 <div class="alert alert-success alert-dismissible" role="alert">
  <h3 class="mb-1">Some Title</h3>
  <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
@@ -345,7 +345,7 @@ Add primary and secondary buttons to your alert modals if you want users to take

 If you want your alert to be really eye-catching, you can add a class `alert-important`.

-```html example vertical height="20rem"
+```html example vertical height="210px"
 <div class="alert alert-important alert-success alert-dismissible" role="alert">
  <div class="d-flex">
    <div>
--- a/docs/components/badges.mdx
+++ b/docs/components/badges.mdx
@@ -10,7 +10,7 @@ bootstrapLink: components/badge/

 The default badges are square and come in the basic set of colors.

-```html code example centered separated
+```html code example vertical centered separated scrollable height="15rem"
 <span class="badge bg-blue">Blue</span>
 <span class="badge bg-azure">Azure</span>
 <span class="badge bg-indigo">Indigo</span>
@@ -27,7 +27,7 @@ The default badges are square and come in the basic set of colors.

 ## Headings

-```html code example
+```html code example height="240px"
 <h1>Example heading <span class="badge bg-secondary">New</span></h1>
 <h2>Example heading <span class="badge bg-secondary">New</span></h2>
 <h3>Example heading <span class="badge bg-secondary">New</span></h3>
@@ -38,7 +38,7 @@ The default badges are square and come in the basic set of colors.

 ## Outline badges

-```html code example centered separated
+```html code example vertical centered separated scrollable height="15rem"
 <span class="badge badge-outline text-blue">blue</span>
 <span class="badge badge-outline text-azure">azure</span>
 <span class="badge badge-outline text-indigo">indigo</span>
@@ -57,7 +57,7 @@ The default badges are square and come in the basic set of colors.

 Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.

-```html code example centered separated
+```html code example centered separated height="7rem"
 <span class="badge badge-pill bg-blue">1</span>
 <span class="badge badge-pill bg-azure">2</span>
 <span class="badge badge-pill bg-indigo">3</span>
@@ -76,7 +76,7 @@ Use the `.badge-pill` class if you want to create a badge with rounded corners.

 You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click [here](colors) to see the list of available colors and choose ones that best suit your design.

-```html code example centered separated
+```html code example vertical centered separated scrollable height="15rem"
 <span class="badge bg-blue-lt">Blue</span>
 <span class="badge bg-azure-lt">Azure</span>
 <span class="badge bg-indigo-lt">Indigo</span>
@@ -95,7 +95,7 @@ You can create a soft colour variant of a corresponding contextual badge variati

 Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable.

-```html code example centered separated
+```html code example vertical centered separated scrollable height="15rem"
 <a href="#" class="badge bg-blue">Blue</a>
 <a href="#" class="badge bg-azure">Azure</a>
 <a href="#" class="badge bg-indigo">Indigo</a>
@@ -114,7 +114,7 @@ Place the badge within an `<a>` element if you want it to perform the function o

 Badges can be used as part of links or buttons to provide a counter.

-```html example centered separated
+```html example centered separated height="7rem"
 <button type="button" class="btn">Notifications <span class="badge bg-red ms-2">4</span></button>
 <button type="button" class="btn">Notifications <span class="badge bg-green ms-2">4</span></button>
 ```
--- a/docs/components/buttons.mdx
+++ b/docs/components/buttons.mdx
@@ -8,7 +8,7 @@ bootstrapLink: components/buttons/

 As one of the most common elements of UI design, buttons have a very important function of engaging users with your website or app and guiding them in their actions. Use the `.btn` classes with the `<button>` element and add additional styling that will make your buttons serve their purpose and draw users' attention.

-```html example code centered separated
+```html example code centered separated height="7rem"
 <a href="#" class="btn" role="button">Link</a>
 <button class="btn">Button</button>
 <input type="button" class="btn" value="Input" />
@@ -20,7 +20,7 @@ As one of the most common elements of UI design, buttons have a very important f

 The standard button creates a white background and subtle hover animation. It's meant to look and behave as an interactive element of your page.

-```html example code centered separated
+```html example code centered separated height="7rem"
 <a href="#" class="btn" role="button">Link</a>
 ```

@@ -28,7 +28,7 @@ The standard button creates a white background and subtle hover animation. It's

 Use the button classes that correspond to the function of your button. The big range of available colors will help you show your buttons' purpose and make them easy to spot.

-```html example code centered separated
+```html code example vertical centered separated scrollable height="15rem"
 <a href="#" class="btn btn-primary">Primary</a>
 <a href="#" class="btn btn-secondary">Secondary</a>
 <a href="#" class="btn btn-success">Success</a>
@@ -43,7 +43,7 @@ Use the button classes that correspond to the function of your button. The big r

 Make buttons look inactive to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form.

-```html example code centered separated
+```html code example vertical centered separated scrollable height="15rem"
 <a href="#" class="btn btn-primary disabled">Primary</a>
 <a href="#" class="btn btn-secondary disabled">Secondary</a>
 <a href="#" class="btn btn-success disabled">Success</a>
@@ -58,7 +58,7 @@ Make buttons look inactive to show that an action is possible once the user meet

 Choose the right color for your button to make it go well with your design and draw users' attention. Button colors can have a big influence on users' decisions, which is why it's important to choose them based on the intended purpose.

-```html example code centered separated
+```html code example vertical centered separated scrollable height="15rem"
 <a href="#" class="btn btn-blue">Blue</a>
 <a href="#" class="btn btn-azure">Azure</a>
 <a href="#" class="btn btn-indigo">Indigo</a>
@@ -77,7 +77,7 @@ Choose the right color for your button to make it go well with your design and d

 Use the `.btn-ghost-*` class to make your button look simple yet aesthetically appealing. Ghost buttons help focus users' attention on the website's primary design, at the same time encouraging them to take action.

-```html example centered separated
+```html example vertical centered separated scrollable height="15rem"
 <a href="#" class="btn btn-ghost-primary">Primary</a>
 <a href="#" class="btn btn-ghost-secondary">Secondary</a>
 <a href="#" class="btn btn-ghost-success">Success</a>
@@ -103,7 +103,7 @@ Use the `.btn-ghost-*` class to make your button look simple yet aesthetically a

 Use the `.btn-square` class to remove the border radius, if you want the corners of your button to be square rather than rounded.

-```html example centered separated
+```html example centered separated height="7rem"
 <a href="#" class="btn btn-square">Square button</a>
 ```

@@ -117,7 +117,7 @@ Use the `.btn-square` class to remove the border radius, if you want the corners

 Add the `.btn-pill` class to your button to make it rounded and give it a modern and attractive look.

-```html example centered separated
+```html example centered separated height="7rem"
 <a href="#" class="btn btn-pill">Pill button</a>
 ```

@@ -131,7 +131,7 @@ Add the `.btn-pill` class to your button to make it rounded and give it a modern

 Replace the default modifier class with the `.btn-outline-*` class, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don't distract users from the main action.

-```html example centered separated
+```html example vertical centered separated scrollable height="15rem"
 <a href="#" class="btn btn-outline-primary">Primary</a>
 <a href="#" class="btn btn-outline-secondary">Secondary</a>
 <a href="#" class="btn btn-outline-success">Success</a>
@@ -173,12 +173,12 @@ Replace the default modifier class with the `.btn-outline-*` class, if you want

 Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate those which should have primary focus from those of secondary importance. Adapt the button size to your design and encourage users to take actions.

-```html code example centered separated
+```html code example centered separated height="8rem"
 <button type="button" class="btn btn-primary btn-lg">Large button</button>
 <button type="button" class="btn btn-lg">Large button</button>
 ```

-```html code example centered separated
+```html code example centered separated height="7rem"
 <button type="button" class="btn btn-primary btn-sm">Small button</button>
 <button type="button" class="btn btn-sm">Small button</button>
 ```
@@ -189,7 +189,7 @@ Label your button with text and add an icon to communiacate the action and make

 Icons can be found [**here**](/docs/components/icons)

-```html example centered separated
+```html example centered separated height="7rem"
 <button type="button" class="btn"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
@@ -260,7 +260,7 @@ Icons can be found [**here**](/docs/components/icons)

 You can use the icons of popular social networking sites, which users are familiar with. Thanks to buttons with social media icons users can share content or follow a website with just one click, without leaving the website.

-```html example centered separated
+```html example vertical centered separated scrollable height="15rem"
 <a href="#" class="btn btn-facebook"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
    <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
@@ -408,7 +408,7 @@ You can use the icons of popular social networking sites, which users are famili

 You can also add an icon without the name of a social networking site, if you want to display more buttons on a small space.

-```html example centered separated
+```html example separated scrollable height="7rem"
 <a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
@@ -572,7 +572,7 @@ You can also add an icon without the name of a social networking site, if you wa

 Add the `.btn-icon` class to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognize for international users.

-```html example centered separated
+```html example centered separated height="7rem"
 <a href="#" class="btn btn-primary btn-icon" aria-label="Button">
  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
@@ -664,7 +664,7 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use

 Create a dropdown button that will encourage users to click for more options. You can add a label with an icon or remove the label and add an icon on its own if you want to save space. Choose the option that will best suit your design and improve the user experience.

-```html example centered separated
+```html example centered separated height="7rem"
 <div class="dropdown">
  <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
@@ -753,7 +753,7 @@ Create a dropdown button that will encourage users to click for more options. Yo

 Add the `.btn-loading` class to show a button's loading state, which can be useful in the case of operations that take longer to process. Thanks to that, users will be aware of the current state of their action and won't give it up before it's finished.

-```html example centered separated
+```html example centered separated height="7rem"
 <a href="#" class="btn btn-primary btn-loading">Button</a>
 <a href="#" class="btn btn-primary btn-loading">Loading button with loooong content</a>
 ```
@@ -767,7 +767,7 @@ Add the `.btn-loading` class to show a button's loading state, which can be usef
 </a>
 ```

-```html example
+```html example centered height="7rem"
 <a href="#" class="btn btn-primary"><span class="spinner-border spinner-border-sm me-2" role="status"></span> Button</a>
 ```

@@ -782,7 +782,7 @@ Add the `.btn-loading` class to show a button's loading state, which can be usef

 Create a list of buttons using the `.btn-list` container to display different actions a user can take. If you add aditional styling, such as colours, you will be able to focus users' attention on a particular action or suggest the result.

-```html code example vertical centered columns={3}
+```html code example vertical centered columns={3} height="7rem"
 <div class="btn-list">
  <a href="#" class="btn btn-success">Save changes</a>
  <a href="#" class="btn">Save and continue</a>
@@ -818,21 +818,21 @@ If the list is long, it will be wrapped and some buttons will be moved to the ne

 Use the `.text-center` or the `.text-end` modifiers to change the buttons' alignment and place them where they suit best.

-```html code example vertical centered columns={3}
+```html code example vertical centered columns={3} height="7rem"
 <div class="btn-list justify-content-center">
  <a href="#" class="btn">Save and continue</a>
  <a href="#" class="btn btn-primary">Save changes</a>
 </div>
 ```

-```html code example vertical centered columns={3}
+```html code example vertical centered columns={3} height="7rem"
 <div class="btn-list justify-content-end">
  <a href="#" class="btn">Save and continue</a>
  <a href="#" class="btn btn-primary">Save changes</a>
 </div>
 ```

-```html code example vertical centered columns={3}
+```html code example vertical centered columns={3} height="7rem"
 <div class="btn-list">
  <a href="#" class="btn btn-outline-danger me-auto">Delete</a>
  <a href="#" class="btn">Save and continue</a>
@@ -844,7 +844,7 @@ Use the `.text-center` or the `.text-end` modifiers to change the buttons' align

 Use buttons with avatars to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.

-```html example centered separated
+```html example centered separated height="7rem"
 <a href="#" class="btn"><span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1542534759-05f6c34a9e63?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar</a>
 <a href="#" class="btn"><span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1546539782-6fc531453083?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar</a>
 <a href="#" class="btn"><span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1541585452861-0375331f10bf?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar</a>
--- a/docs/components/cards.mdx
+++ b/docs/components/cards.mdx
@@ -125,7 +125,7 @@ Add an image to your blog post card to make it eye-catching. You can do it by ad

 Add the `.row-deck` class to `.row`, if you want to display several cards next to one another. Thanks to that, they will all have the same height.

-```html code example centered
+```html code example centered height="220px"
 <div class="row row-deck">
  <div class="col-md-4">
    <div class="card">
--- a/docs/components/datagrid.mdx
+++ b/docs/components/datagrid.mdx
@@ -3,7 +3,7 @@ title: Data grid
 description: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content.
 ---

-```html example code vcentered height="22rem"
+```html example code vcentered height="460px"
 <div class="datagrid">
  <div class="datagrid-item">
    <div class="datagrid-title">Registrar</div>
--- a/docs/components/divider.mdx
+++ b/docs/components/divider.mdx
@@ -22,7 +22,7 @@ Use dividers to visually separate content into parts. You can use a line only or

 You can modify the position of the text which is to be included in a separator and make it left- or right-aligned. Otherwise, the text will remain centered.

-```html code example
+```html code example height="380px"
 <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
 </p>
@@ -44,7 +44,7 @@ You can modify the position of the text which is to be included in a separator a

 Customize the color of dividers to make them go well with your design. Click [here](colors) to see the list of available colors.

-```html code example
+```html code example height="380px"
 <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
 </p>
--- a/docs/components/dropdowns.mdx
+++ b/docs/components/dropdowns.mdx
@@ -8,7 +8,7 @@ bootstrapLink: components/dropdowns

 With small markup changes, you can turn any `.btn` into a dropdown toggle and use it to display more options for users to choose from. Start with the default dropdown and then use additional classes to make your dropdown more user-friendly.

-```html example code height="20rem"
+```html example code height="16rem"
 <div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
@@ -23,7 +23,7 @@ With small markup changes, you can turn any `.btn` into a dropdown toggle and us

 Use dropdown dividers to separate groups of dropdown items for greater clarity.

-```html example code height="20rem"
+```html example code height="16rem"
 <div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
@@ -43,7 +43,7 @@ Use dropdown dividers to separate groups of dropdown items for greater clarity.

 Make a dropdown item look active, so that it highlights when a user hovers over a given option.

-```html example code height="20rem"
+```html example code height="16rem"
 <div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
@@ -62,7 +62,7 @@ Make a dropdown item look active, so that it highlights when a user hovers over

 Make a dropdown item look disabled to display options which are currently not available but can activate once certain conditions are met.

-```html code example height="20rem"
+```html code example height="16rem"
 <div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
@@ -81,7 +81,7 @@ Make a dropdown item look disabled to display options which are currently not av

 Add a dropdown header to group dropdown items into sections and name them accordingly.

-```html code example height="20rem"
+```html code example height="16rem"
 <div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
@@ -100,7 +100,7 @@ Add a dropdown header to group dropdown items into sections and name them accord

 Use icons in your dropdowns to add more visual content and make the options easy to identify for users.

-```html code example height="20rem"
+```html code example height="16rem"
 <div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
@@ -129,7 +129,7 @@ Use icons in your dropdowns to add more visual content and make the options easy

 Add an arrow that points at the dropdown button.

-```html code example height="20rem"
+```html code example height="16rem"
 <div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu dropdown-menu-arrow">
@@ -147,7 +147,7 @@ Add an arrow that points at the dropdown button.

 Add a badge to your dropdown items to show additional information related to an item or distinguish it from other elements.

-```html code example height="20rem"
+```html code example height="16rem"
 <div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
@@ -167,7 +167,7 @@ Add a badge to your dropdown items to show additional information related to an

 Use dropdowns with checkboxes to allow users to select options from a predefined list. Dropdowns with checkboxes are particularly useful for filtering.

-```html code example height="20rem"
+```html code example height="16rem"
 <div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu">
@@ -182,7 +182,7 @@ Use dropdowns with checkboxes to allow users to select options from a predefined

 Make your dropdown suit the dark mode of your website or software.

-```html code example height="20rem"
+```html code example height="16rem"
 <div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  <div class="dropdown-menu dropdown-menu-arrow bg-dark text-white">
@@ -215,7 +215,7 @@ Use a dropdown with card content to make it easy for users to get more informati
 ```html example height="35rem"
 <div class="dropdown">
  <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
-  <div class="dropdown-menu dropdown-menu-card" style="max-width: 20rem;">
+  <div class="dropdown-menu dropdown-menu-card" style="max-width: 16rem;">
    <div class="card d-flex flex-column">
      <a href="#">
        <img class="card-img-top" src="/samples/photos/friends-at-a-restaurant-drinking-wine.jpg" alt="How do you know she is a witch?" />
--- a/docs/components/empty.mdx
+++ b/docs/components/empty.mdx
@@ -7,7 +7,7 @@ description: Empty states or blank pages are commonly used as placeholders for f

 Use the default empty state to engage users in the critical moments of their experience with your website or app. A good empty state screen should let users know what is happening and what they should do next as well as encourage them to take action.

-```html code example
+```html code example height="300px"
 <div class="empty">
  <div class="empty-icon">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -39,7 +39,7 @@ Use the default empty state to engage users in the critical moments of their exp

 Make your empty state screen more attractive and engaging by adding an illustration. Thanks to a more personalized design, you will improve your brand image and make your website or app more user friendly.

-```html code example
+```html code example height="300px"
 <div class="empty">
  <div class="empty-img"><img src="..." height="128" alt="" />
  </div>
@@ -64,7 +64,7 @@ Make your empty state screen more attractive and engaging by adding an illustrat

 Instead of adding an icon or illustration you can simply give the text:

-```html example
+```html example height="300px"
 <div class="empty">
  <div class="empty-header">404</div>
  <p class="empty-title">Oops… You just found an error page</p>
--- a/docs/components/inline-player.mdx
+++ b/docs/components/inline-player.mdx
@@ -6,7 +6,7 @@ description: A simple, lightweight, accessible and customizable HTML5, YouTube a

 ## Sample demo

-```html example code vendors
+```html example code vendors height="500px"
 <div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div>

 <script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
@@ -19,7 +19,7 @@ description: A simple, lightweight, accessible and customizable HTML5, YouTube a

 ## Vimeo file

-```html example code vendors
+```html example code vendors height="500px"
 <div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="515937365"></div>

 <script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
--- a/docs/components/placeholder.mdx
+++ b/docs/components/placeholder.mdx
@@ -81,7 +81,7 @@ You can use a placeholder, which will look like a picture. You can use the `rati

 You can also use the `ratio` component, and get the image in the right proportions.

-```html code example columns={1}
+```html code example columns={1} height={500} scrollable
 <div class="ratio ratio-1x1 placeholder">
  <div class="placeholder-image"></div>
 </div>
@@ -100,7 +100,7 @@ You can also use the `ratio` component, and get the image in the right proportio

 By default, the `placeholder` uses `currentColor`. This can be overridden with a custom color or utility class.

-```html example columns={1}
+```html example columns={1} height={240}
 <span class="placeholder col-12"></span>
 <span class="placeholder col-12 bg-primary"></span>
 <span class="placeholder col-12 bg-secondary"></span>
@@ -153,7 +153,7 @@ Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better c

 See in the following examples how else you can use the placeholder component

-```html code example columns={1} height={1000} separated vertical
+```html code example columns={1} height={1000} separated vertical scrollable
 <div class="card placeholder-glow">
  <div class="ratio ratio-21x9 card-img-top placeholder"></div>
  <div class="card-body">
--- a/docs/components/range-slider.mdx
+++ b/docs/components/range-slider.mdx
@@ -9,7 +9,7 @@ All options and features can be found [**here**](https://refreshless.com/nouisli

 ## Basic range slider

-```html code example
+```html code example centered
 <div data-slider='{"js-name": "slider0","start": 50,"range": {"min": 0,"max": 100}}'></div>
 <p demo-slider="slider0"></p>
 ```
--- a/docs/components/statuses.mdx
+++ b/docs/components/statuses.mdx
@@ -5,7 +5,7 @@ description: Status dots are particularly useful if you want to make an interfac

 ## Default markup

-```html example vertical
+```html example vertical height="7rem"
 <span class="status status-blue">Blue</span>
 <span class="status status-azure">Azure</span>
 <span class="status status-indigo">Indigo</span>
@@ -28,7 +28,7 @@ description: Status dots are particularly useful if you want to make an interfac

 ## Status with dot

-```html example code vertical
+```html example code vertical height="7rem"
 <span class="status status-blue">
  <span class="status-dot"></span>
  Blue
@@ -81,7 +81,7 @@ description: Status dots are particularly useful if you want to make an interfac

 ### Animated dot

-```html example code vertical
+```html example code vertical height="7rem"
 <span class="status status-blue">
  <span class="status-dot status-dot-animated"></span>
  Blue
@@ -134,7 +134,7 @@ description: Status dots are particularly useful if you want to make an interfac

 ## Lite status

-```html example code vertical
+```html example code vertical height="7rem"
 <span class="status status-blue status-lite">
  <span class="status-dot"></span>
  Blue
@@ -187,7 +187,7 @@ description: Status dots are particularly useful if you want to make an interfac

 ## Status dots

-```html example code vertical
+```html code example centered separated height="7rem"
 <span class="status-dot status-blue"></span>
 <span class="status-dot status-azure"></span>
 <span class="status-dot status-indigo"></span>
@@ -204,7 +204,7 @@ description: Status dots are particularly useful if you want to make an interfac

 ### Animated dots

-```html example code vertical
+```html code example centered separated height="7rem"
 <span class="status-dot status-dot-animated status-blue"></span>
 <span class="status-dot status-dot-animated status-azure"></span>
 <span class="status-dot status-dot-animated status-indigo"></span>
@@ -221,7 +221,7 @@ description: Status dots are particularly useful if you want to make an interfac

 ## Status indicator

-```html code example vertical
+```html code example vertical centered height="7rem"
 <span class="status-indicator status-blue status-indicator-animated">
  <span class="status-indicator-circle"></span>
  <span class="status-indicator-circle"></span>
--- a/docs/components/tables.mdx
+++ b/docs/components/tables.mdx
@@ -6,11 +6,11 @@ bootstrapLink: content/tables/

 ## Basic Table

-The basic table design has light padding and the presented data is separated wih horizontal dividers. It helps provide users with all the necessary information, without overwheling them with visuals.
+The basic table design has light padding and the presented data is separated wih horizontal dividers. It helps provide users with all the necessary information, without overwhelming them with visuals.

 The `.table` class adds basic styling to a table:

-```html code example
+```html code example height="360px" scrollable
 <div class="table-responsive">
  <table class="table table-vcenter">
    <thead>
@@ -97,7 +97,7 @@ The `.table` class adds basic styling to a table:

 Use the `.table-responsive` class across each breakpoint for horizontal scrolling tables. If you want to create responsive tables up to a specific breakpoint, use `.table-responsive{-sm|-md|-lg|-xl}`. From that breakpoint and up, the table will behave normally, rather than scroll horizontally.

-```html code example
+```html code example height="12rem"
 <table class="table table-responsive">
  <thead>
    <tr>
@@ -149,7 +149,7 @@ Use the `.table-responsive` class across each breakpoint for horizontal scrollin

 If you don't want the table cell content to wrap to another line, use the `table-nowrap` class.

-```html example
+```html example height="10rem"
 <div class="table-responsive">
  <table class="table table-vcenter table-nowrap">
    <thead>
@@ -289,7 +289,7 @@ If you don't want the table cell content to wrap to another line, use the `table

 ## Table Variants

-```html code example
+```html code example height="360px" scrollable
 <table class="table">
  <thead>
    <tr>
--- a/docs/components/timelines.mdx
+++ b/docs/components/timelines.mdx
@@ -7,7 +7,7 @@ description: A timeline is a perfect way to visualize processes and projects, as

 The available timeline design is comprised of many components that will help you visualize a process or show an outline of events. Thanks to the possibility of adding icons, avatars and links and the way of presenting the elements of content, your timeline will be clear for users and will make yor website or app more attractive.

-```html example
+```html example height="400px" scrollable
 <ul class="timeline">
  <li class="timeline-event">
    <div class="timeline-event-icon bg-twitter-lt">
@@ -258,7 +258,7 @@ The available timeline design is comprised of many components that will help you

 Use a simplified version of the timeline, if it suits your design better. You can still make use of all the available timeline components.

-```html example
+```html example height="400px" scrollable
 <ul class="timeline timeline-simple">
  <li class="timeline-event">
    <div class="timeline-event-icon bg-twitter-lt">
--- a/docs/components/toasts.mdx
+++ b/docs/components/toasts.mdx
@@ -44,7 +44,7 @@ Toasts blend over the elements they appear over. If a browser supports the `back

 Stack multiple toasts together by putting them within one `.toast-container`.

-```html example code
+```html example code height="260px"
 <div class="toast-container">
  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast">
    <div class="toast-header">
--- a/docs/components/tooltips.mdx
+++ b/docs/components/tooltips.mdx
@@ -8,7 +8,7 @@ bootstrapLink: components/tooltips/

 Use the default markup to create tooltips that will help users understand particular elements of your interface. You can decide where the text label is to be displayed - at the top, bottom or on either side of the element.

-```html code example
+```html code example centered separated
 <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
 </button>
@@ -27,7 +27,7 @@ Use the default markup to create tooltips that will help users understand partic

 If the default tooltip is not enough, you can add the option to use HTML code in the text to highlight particular bits of information and make the content more attractive.

-```html code example
+```html code example height="7rem"
 <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
 </button>
--- a/site/styles/_docs.scss
+++ b/site/styles/_docs.scss
@@ -92,5 +92,8 @@
  }
 }

-
-
+div.example {
+  iframe.example-frame {
+    min-height: 7rem !important;
+  }
+}
--- a/src/scss/vendor/_litepicker.scss
+++ b/src/scss/vendor/_litepicker.scss
@@ -30,7 +30,7 @@
    }

    .button-next-month,
-    .button-prev-month {
+    .button-previous-month {
      cursor: pointer !important;
    }