---
# System prepended metadata

title: BootStrap Cenas Fixes

---

# BootStrap Cenas Fixes

:::    success
Icons de BootStrap - https://icons.getbootstrap.com/
:::spoiler
![](https://i.imgur.com/eDhio5h.png)
::::::

- BreakPoint são importantes - https://getbootstrap.com/docs/5.0/layout/breakpoints/
:::spoiler
![](https://i.imgur.com/tZxqcmx.png)
:::

- **Ponto Chave**: The hierarchy of Bootstrap’s grid goes from container to row to column to your content. - https://getbootstrap.com/docs/5.0/layout/columns/
:::spoiler
![](https://i.imgur.com/QEDC5MX.png)
:::

- Propriedade de Display para facilitar design responsivo - https://getbootstrap.com/docs/5.0/utilities/display/
:::spoiler
![](https://i.imgur.com/ZVUp5QZ.png)
:::


- Abreviações pode dar jeito para página de register - https://getbootstrap.com/docs/5.0/content/typography/#abbreviations
:::spoiler
![](https://i.imgur.com/khh99Do.png)
:::

- Coisas inspiracionais - https://getbootstrap.com/docs/5.0/content/typography/#naming-a-source
:::spoiler
![](https://i.imgur.com/UkOBiZv.png)
:::

- Isto pode dar jeito para key-values - https://getbootstrap.com/docs/5.0/content/typography/#description-list-alignment
:::spoiler
![](https://i.imgur.com/5jpDKib.png)
:::

- File input fica nice - https://getbootstrap.com/docs/5.0/forms/form-control/?#file-input
:::spoiler
![](https://i.imgur.com/3lomFij.png)
:::

- Floating Labels Siiiiiim - https://getbootstrap.com/docs/5.0/forms/floating-labels/
:::spoiler
![](https://i.imgur.com/XrLc884.png)
:::

- Validação - https://getbootstrap.com/docs/5.0/forms/validation/#server-side
:::spoiler
![](https://i.imgur.com/rkK6uG6.png)
:::

- Dismissing Alerts, pode ser útil - https://getbootstrap.com/docs/5.0/components/alerts/#dismissing
:::spoiler
![](https://i.imgur.com/GcbAci7.png)
:::

- Pills e Números de notificações - https://getbootstrap.com/docs/5.0/components/badge/
:::spoiler
![](https://i.imgur.com/G9B5jQz.png)
:::


- Another Pill - https://getbootstrap.com/docs/5.0/components/list-group/#with-badges
:::spoiler
![](https://i.imgur.com/uapLgnI.png)
:::


- Texto animado com botões nice - https://getbootstrap.com/docs/5.0/components/list-group/#javascript-behavior
:::spoiler
![](https://i.imgur.com/S69b72R.png)
:::


- Popover é fixe, não sei onde usar thou - https://getbootstrap.com/docs/5.0/components/popovers/
:::spoiler
![](https://i.imgur.com/vIH3oe6.png)
:::

- Navbar atualiza com scrolling - https://getbootstrap.com/docs/5.0/components/scrollspy/
:::spoiler
![](https://i.imgur.com/R7Z99X7.png)
:::

- Tooltips, pode dar jeito - https://getbootstrap.com/docs/5.0/components/tooltips/
:::spoiler
![](https://i.imgur.com/eq4um3S.png)
:::

- Shadows - https://getbootstrap.com/docs/5.0/utilities/shadows/
:::spoiler
![](https://i.imgur.com/IX34qLa.png)
:::

-
BackGround Color - https://getbootstrap.com/docs/5.0/utilities/background/ 

## Exemplos para Projeto

- Para usar no CheckOut - https://getbootstrap.com/docs/5.0/components/breadcrumb/#dividers

- Para filtros, escolha entre supplier e product - https://getbootstrap.com/docs/5.0/components/button-group/#checkbox-and-radio-button-groups

- Para os produtos - https://getbootstrap.com/docs/5.0/components/card/

- Para a definição dos produtos - https://getbootstrap.com/docs/5.0/helpers/text-truncation/

- Para os produtos ficarem como link - https://getbootstrap.com/docs/5.0/helpers/stretched-link/

- Para fazer lista de Produtos 
    - https://getbootstrap.com/docs/5.0/layout/gutters/
    - https://getbootstrap.com/docs/5.0/content/images/#image-thumbnails
    - https://getbootstrap.com/docs/5.0/components/card/#grid-cards

- Para navegação no Perfil - 
    - https://getbootstrap.com/docs/5.0/components/card/#navigation 
    - https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior

- Texto dentro de imagem, muito nice - https://getbootstrap.com/docs/5.0/components/card/#image-overlays

- Carrosel nice - https://getbootstrap.com/docs/5.0/components/carousel/#dark-variant

- Para Login maybe? - https://getbootstrap.com/docs/5.0/components/dropdowns/?#forms

- Para **footer** 
    - https://getbootstrap.com/docs/5.0/components/list-group/#flush
    - https://getbootstrap.com/docs/5.0/components/list-group/#javascript-behavior

- Para Pop Ups - https://getbootstrap.com/docs/5.0/components/modal/#vertically-centered

- Para Pop Ups obrigatórios - https://getbootstrap.com/docs/5.0/components/modal/

- Para páginas de produtos maybe? Pode ser infinita ou com isto - https://getbootstrap.com/docs/5.0/components/pagination/

- Para simular que um carregamento está a ser feito - https://getbootstrap.com/docs/5.0/components/spinners/

- Para quando se adiciona aos favoritos - https://getbootstrap.com/docs/5.0/components/toasts/

- Para pôr as coisas redondinhas - https://getbootstrap.com/docs/5.0/utilities/borders/#border-radius

- Para a navbar ficar fixa no topo - https://getbootstrap.com/docs/5.0/helpers/position/#fixed-top

- Para as secções de checkout - https://getbootstrap.com/docs/5.0/utilities/position/#examples

- Para a Search Bar - https://getbootstrap.com/docs/5.0/forms/form-control/?#datalists
![](https://i.imgur.com/mKkAM2o.png)

- Para os filtros - https://getbootstrap.com/docs/5.0/forms/checks-radios/#radio-toggle-buttons
