Unknown Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (global navigation and footer setup in angular 8 project) Part 10 | My Project HD
X

Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (global navigation and footer setup in angular 8 project) Part 10

Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (global navigation and footer setup in angular 8 project) Part 10






Send Project Report Request


Global Navigation and footer setup in angular 8 project

In this tutorial we will make project global navigation and footer section 

bootstrap 4 Navbar 

--------------------------------------------------------------------------

<nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-3">
    <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
        </div>
</nav>

--------------------------------------------------------------------------

 

 

app.component.html

--------------------------------------------------------------------------

<nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-3">
    <div class="container">
        <a class="navbar-brand" href="#">HMS</a>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Room Booking</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Feedback</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Login</a>
            </li>
        </ul>
        </div>
</nav>
<div class="page_container">
<router-outlet></router-outlet>
</div>
<div class="footer">
</div>

--------------------------------------------------------------------------

 

app.component.css

--------------------------------------------------------------------------

.footer {
    width: 100%;
    height: 50px;
    background: #343a40;
}
.page_container {
    width: 100%;
    margin-top: 41px;
    margin-bottom: 52px;
}

--------------------------------------------------------------------------

More Tutorials

Web Technology Tutorials in Hindi

Web Technology Tutorials in Hindi

Read More
Diploma engineering tutorial for polytechnic collage

Diploma Engineering Tutorial

Read More
Final Year Projects for Computer Science with Source Code

Final Year Projects for Computer Science with Source Code

Read More