QuikCode: Create Responsive menu with Bootstrap 4 (Alpha)

Bootstrap 4 Navigation responsive
Standard

The first entry of QuikCode, where I save codes for future use and quick references.

This is the code for responsive navigation bar that is also toggleable in md (medium screens).

<nav class="navbar navbar-toggleable-md bg-info navbar-inverse">
    <div class="container">
        <button class="navbar-toggler" data-toggle="collapse" data-target="#mainNav">
            <span class="navbar-toggler-icon"></span>
        </button>
 
        <div class="collapse navbar-collapse" id="mainNav">
            <div class="nav navbar-nav">
                <a href="#" class="nav-item nav-link active">Home</a>
                <a href="#" class="nav-item nav-link">Features</a>
                <a href="#" class="nav-item nav-link">About</a>
                <a href="#" class="nav-item nav-link">Contact</a>
            </div>
        </div>
 
    </div>
</nav>

 

Okay, now let’s describe about the classes according to their order in the code:

<nav:
navbar: The navbar is a wrapper that positions branding, navigation, and other elements in a concise header. It’s easily extensible and, thanks to our Collapse plugin, can easily integrate responsive behaviors.

navbar-toggleable-md: 
Navbars require a wrapping .navbar with .navbar-toggleable-* for responsive collapsing and color scheme classes.

bg-info: 
Background color same as text-info class.

navbar-inverse:
Substitute  the basic navigation text color to the inverted for clearity.

<div:
container: Gets the elements inside container.

<button:
navbar-toggler: for use with our collapse plugin and other navigation toggling behaviors.

<span:
navbar-toggler-icon: Creates an Hamburger icon for the toggle button.

<div:
collapse, navbar-collapse: Class for collapse-area, and navbar-collapse – cuz it’s a QUOTE navbar ENDQUOTE.

<div:
nav, navbar-nav: Nav of navbar. I don’t really know how to desribe this.

<a:
nav-item: To mark this as a nav an item.
nav-link: Link of navigation bar.

Tutorial: Net Ninja Bootstrap 4 navigation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s