Skip to content

Bootstrap UI

twitter boortrap UI library

Responsive breakpoints

Lets you display same content differently on different devices. more

Use, {-sm|-md|-lg|-xl}.

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Responsive behaviour - navbar-expand-lg will make the navbar expanded on devices 992 and beyond. On devices <991 the navbar comes as hambureger icon.

Table

Responsive table are good on small device, they make only table scroll horizontally but body width remains of device width. However, on larger device, this makes table not 100%. So user table-responsive-sm so that table is responsive only on sm and lower device, else it stays 100%, change -sm according to width of table.

Layouts

Show divs of different width on different devices

<div class="col-md-6 col-xl-4">
    Shows 2-col on medium and beyond, 3-col on x-large and beyond
</div>

Flex

CSS Variables

BS uses CSS variables that are defined once and used in whole CSS document. Eg,

/* declare */
:root {
  --bs-blue: #0d6efd;
}

/* Usage */
a {
  color: var(--bs-blue);
}
  ```



## Snippets

**Hiding Elements**

Hide only on Small Devices `.d-none .d-sm-block`, [more](https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements).

**View More**

```html
<div>
    <a data-toggle="collapse" href="#emp_details" role="button"
    aria-expanded="false" aria-controls="emp_details" title="click to toggle">Extra Details ></a>
</div>

<br/>

<div class="collapse multi-collapse" id="emp_details">
    <div class="card card-body">
        {% for attr, value in emp.__dict__.items() %}
        <div class="d-flex justify-content-between">
            <div>{{ attr }}</div>
            <div>{{ value }}</div>
        </div>
        {% endfor %}
    </div>
</div>

Primer Design System - GitHub UI

Primer is a set of guidelines, principles, and patterns for designing and building UI at GitHub.

Link:

Branding

Color of brand defines it and grabs attention of user. It is important to have a color palette for your brand.

Brand can have:

  • One color - Nike
  • 2 color pallete - primary and secondary - PayTm FedEx Tesco
  • Multi color - like google

Two Color Palette

This has a primary which is mostly shown in branding, secondary is usually used less than primary. They can be adjacent or complementary on color wheel.

Color and emotions

  • blue is corporate tech finance
  • gym goes with maroon, army green, yellow
  • 4E6E58 green, 544B3D brown
  • FE9500 orange, #f58c1d

  • 6a3599 purple

Examples

  • Fed Ex - #fe5900 orange. #2b007c purple - view
  • PayTm - Dark Blue #012A72, Light Blue #00B8F5 - view

Tried Pallets

2025-01-12 Oct 2023