search

Boostrap 3 Bootstrap grid, Scrollspy, Toast and responsive navbar

We can check frontEnd designs from here arrow-up-right

The bootstrap grid layout is based on flexbox, it uses container, row, and col(uns).

The width is organized into 12 units, columns can be auto to adapt to their content.

The bootstrap columns implement media query breakpoints using sm,md, and lg. 

//we can use container-fluid to remove the container default margins
//the breakpoints will take effect AFTER the md, from a 1-5-auto to 3-3-3 on smaller

<div class="container">
  <div class="row">

    <div class="col-3 bg-warning col-md-1">
      Lorem
    </div>
    <div class="col-3 bg-danger col-md-5">
      Lorem
    </div>
    <div class="col-3 bg-success col-md-auto">
      L
    </div>
    
  </div>
</div>
Grid columns on md and not-md screen

We can align and justify col elements in the container:

chevron-rightBootstrap align and justifyhashtag

For align we need extra classes and CSS height:

While justify doesn't need extra CSS.

align-items and justify-content

The d-flex justify goes before the row/col class.

Centered d-flex col-8 element

We create a break-line between columns using a div with w-100:

chevron-rightbreak-line and breakpointshashtag

Without the div the columns share space:

We use d-block to remove the break-line on breakpoint.

w-100 breakpoint and without

We can use margin-auto to space columns on the sides.

chevron-rightmargin-auto guidehashtag

We use mr/ml-auto to push the column to a side.

We can use margin on breakpoints, but we need to nullify it first.

mr-md-auto and ml auto on media query

We can use offset to move them by column units to the right.

chevron-rightBootstrap offset guidehashtag

On md, we increase the offset on the smaller col, below md we invert offset and columns width to alternate between,

When nesting rows we keep the 12 units width.

chevron-rightRow nesting guidehashtag

We need a row class on the container.

row nesting with align/justify flex

We render the angle border square effect by nesting relative-absolute boxes in the same container.

chevron-rightAngle border square and vh responsive bottom barhashtag

For spacing, it's better to use top instead of margin, to avoid reflows of the layout.

For the bottom part we vh calc() the vw width.

Angle border effect

hashtag
Scrollspy and getBoundingClientRect()

The getBoundingClientRect() method returns an object, its properties provide the position relative to its viewpoint and the size of the viewpoint, with the position value updated on scroll.

chevron-rightgetBoundingClientRect() as scrollspy guidehashtag

In the HTML we need nav-pills (on containers to have the active bg color on nav-items child elements):

The starter x/y value of getBoundingClientRect() includes all the other elements on the page, we add active to the nav-link:

To calculate where an element be visible we:

The problem is that the getBoundingClientRect().x/y value changes on smaller screens.

Using getBoundingClientRect() for navlist-item scrollspy

Being getBoundingClientRect() an object we can get all its properties with a loop:

The scrollspy Bootstrap component updates nav-item elements based on scroll position.

chevron-rightColumn navbar and scrollspy guidehashtag

For the column navbar, we need, an ID target, flex-column for the navbar direction, and align-items-stretch for the width (due to the inverted flex-direction).

On the scroll div, we need data-bs-spy="scroll" and data-bs-target for the navbar id.

Each time an element ID referenced by a nav-link href is scrolled into view, the nav-link gets .active .

Scrollspy on column navbar

For more navbar layout check the complete project:

navbar scrollspy page

hashtag
Toast cards and functions

The toast component mimics the push notifications, composed of a toast and show class, toast-header, toast-body, and a data-bs-dismiss="toast" to close it.

We use position-fixed to have the toast always visible and position with top/bottom/start/end-0/50.

Toast with margin and position

For multiple overlaying toasts and position-static on the toast-container:

chevron-rightToast-container and position-static guidehashtag

We can't use absolute positions like with static position, so we need an extra parent to d-flex and justify the toast-container,

1

1

1

1

fixed-position, overlay and justify toasts

We use extra js to trigger a toast on button click, triggered toats will close after a delay.

chevron-rightToast button triggerhashtag

Triggered toast will automatically close, you can add data-bs-delay="" to change the delay or use data-bs-autohide="false" to keep it open.

On Js we use the button and toast ID:

Toast on button click

We can use external buttons to close a toast:

hashtag
Bootstrap offcanvas

Offcanvas are hidden sidebars, using data-bs-toggle and data-bs-target on the button.

While using offcanvas and offcanvas-(position) on the content.

sidebar on click

hashtag
Responsive bootstrap navbar and toggle button

The responsive navigation navbar bootstrap component can implement navbar-brand, navbar-collapse content, and input-groups.

We implement the responsive toggler-button using navbar-expand.

chevron-rightResponsive navbar with input group guidehashtag

We use navbar-expand- on the nav to expand the nav-items over md breakpoint and collapse them when below.

When collapsed we display the navbar-toggler button, which data-bs-target the navbar-collapse collapsed content using data-bs-toggle="collapse".

For the navbar content, we use navbar-nav> nav-item> nav-link.

navbar-expand and navbar-collapse

We can implement dropdown, navbar-brand images,overflow-y, and multiple collapse containers to the navbar.

chevron-rightDropdown and set height navbar guidehashtag

On the navbar-collapse we add navbar-nav-scroll and style="--bs-scroll-height: 120px", this set height scroll will work on the toggle content.

For a dropdown nav-item on the navbar-nav we:

We can create multiple collapse container by using the same ID

For the divider line in the dropdown we:

expanded navbar with dropdown and multiple collapsed

We set the navbar <nav> position using fixed-top/bottom, sticky-top/bottom.

hashtag
Bootstrap complete responsive page

Here's a complete triple-layout bootstrap page:

For the layout , we nest the bootstrap rows:

chevron-rightTriple layout guidehashtag

We create a col-2 sidebar, that's gonna become a top navbar on a small screen.

Then we nest 2 other columns on the right side to then make them into full rows on smaller screens.

Remember to use vh for the height of different layout components.

small, medium and large screen layout

We used overflow and vh for the fixed scroll container.

chevron-rightFixed scroll container guidehashtag

We don't need to use position-fixed, we need an overflow-y and a vh to cover 100% of the screen.

On the CSS:

Scrollable column on 100vh

For the image rows with links on the smaller screen, we used img-fluid, (fixed) height, and position absolute:

chevron-rightImages rows guidehashtag

We use img-fluid and height to keep images' size responsive.

For the absolute-positon text on the images:

responsive row images with absolute text

For the footer to cover the entire width, we need an extra row with a single col-12.

fixed-position footer

We use bootstrap columns to align <fontAwesomeIcons/> and its text, for the rounded padding icons we use height to align different text heights inside set columns.

chevron-rightFontAwesome align and justify texthashtag

Text-end is needed if there is too much extra space to get the icon closer.

The icon containers are needed only if there is text to align.

Aligned fontAwesome Icons

1

PreviousBoostrap 2 Cards,Carousel, image overlay and dropdownNextSass 1

Last updated