Category: 7. Demos

What is a navbar?

The Bootstrap navbar is a responsive navigation header at the top of a webpage. It can expand or collapse based on the screen size, providing a user-friendly navigation experience for websites.

Bootstrap provides built-in CSS classes to create a standard navigation bar.

• The .navbar class is used to create a navigation bar component.
• The .navbar-brand class represents the brand or logo of the website or application.
• The .navbar-collapse class makes the navigation menu collapse into a dropdown or toggle button.
• The .navbar-nav class is used to create a horizontal navigation menu with multiple navigation links or items.
• The .nav-item class should be applied to each list item (<li>) within the navigation bar.
• The .nav-link class is used to styled anchor tags (<a>) within a navigation component.

Bootstrap provides some options to style buttons. Use utilities to design unique buttons for any application, which are summarized in the following table −

Sr.No.	Class & Description
1	btnDefault/ Standard button.
2	btn-primaryProvides extra visual weight and identifies the primary action in a set of buttons.
3	btn-successIndicates a successful or positive action.
4	btn-infoContextual button for informational alert messages.
5	btn-warningIndicates caution should be taken with this action.
6	btn-dangerIndicates a dangerous or potentially negative action.
7	btn-linkDeemphasize a button by making it look like a link while maintaining button behavior.

What is a Grid?

In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal) lines used to structure the content. It is widely used to design layout and content structure in print design. In web design, it is a very effective method to create a consistent layout rapidly and effectively using HTML and CSS.

Working of Bootstrap Grid System

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here’s how the Bootstrap grid system works −

• Use rows to create horizontal groups of columns.
• Content should be placed within the columns, and only columns may be the immediate children of rows.
• Use the .themed-grid-col class to add some theming to the columns. This is not a default Bootstrap class.
• Create a grid with equal columns using .row-cols-* classes.
• Padding is used in columns to create gutters (gaps between column content). That padding is offset in rows using a negative margin on .rows for the first and last column.

Example	Description	Download link
Grids	This example indicates about grid structure in Bootstrap.	Download