@extends('layouts/contentLayoutMaster') @section('title', 'Navs') @section('content') Base Nav The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. Active Link Link Disabled With Border Use Class .wrap-border with your <nav> tag to wrap your nav with a border. Active Link Link Disabled Center Alignment Use Class .justify-content-center with your <nav> tag to align your nav to center. Active Link Link Disabled End Alignment Use Class .justify-content-end with your <nav> tag to align your nav to end. Active Link Link Disabled Vertical nav Roll your own navigation style by extending the base .nav component. All Bootstrap’s nav components are built on top of this by specifying additional styles. Active Link Link Disabled Nav with Border To wrap with border, use .wrap-border class. Active Link Link Disabled Nav with Square Border To wrap with square border, use .square-border class with .wrap-border class. Active Link Link Disabled Nav with Divider To add divider, use .dropdown-divider class to <li>. Active Link Link Disabled @endsection
The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components.
.nav
Use Class .wrap-border with your <nav> tag to wrap your nav with a border.
.wrap-border
<nav>
Use Class .justify-content-center with your <nav> tag to align your nav to center.
.justify-content-center
Use Class .justify-content-end with your <nav> tag to align your nav to end.
.justify-content-end
Roll your own navigation style by extending the base .nav component. All Bootstrap’s nav components are built on top of this by specifying additional styles.
To wrap with border, use .wrap-border class.
To wrap with square border, use .square-border class with .wrap-border class.
.square-border
To add divider, use .dropdown-divider class to <li>.
.dropdown-divider
<li>