CODEWITHSUNDEEP
bootstrap-4
Narendra Reddy
Narendra Reddy

Reputation: 162

Bootstrap Navbar behaving differently in different browsers

In my application Bootstrap navbar is not behaving as expected in Chrome but showing proper display as expected in Firefox. Please help me to fix this.

Code: 

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
    crossorigin="anonymous">

</head>


<body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarTogglerDemo02"
            aria-controls="navbarTogglerDemo02" aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active"><a class="nav-link" href="#">Home
                        <span class="sr-only">(current)</span>
                </a></li>
                <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Employees</a></li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search"
                    placeholder="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>

    <div>
        <h4 class='text-center'>Current Projects</h4>
        <table>

            <thead>
                <tr>
                    <th>Project Name</th>
                    <th>Project Stage</th>
                    <th>Description</th>

                </tr>

            </thead>
            <tbody>
                <tr th:each="aProject : ${projectsList}">

                    <td th:text="${aProject.name}"></td>
                    <td th:text="${aProject.stage}"></td>
                    <td th:text="${aProject.description}"></td>

                </tr>

            </tbody>

        </table>

        <h4 class='text-center'>Employee Details</h4>

        <table>

            <thead>
                <tr>
                    <th scope="col">Employee Name</th>
                    <th scope="col">Employee Email Address</th>
                </tr>

            </thead>
            <tbody>
                <tr th:each="anEmployee : ${employeesList}">

                    <td th:text="${anEmployee.firstName} + ${anEmployee.lastName}"></td>
                    <td th:text="${anEmployee.email}"></td>
                </tr>

            </tbody>

        </table>

    </div>

</body>

Chrome:

Chrome

Firefox:

Firefox

Upvotes: 3

Views: 151

Answers (1)

Dinesh M
Dinesh M

Reputation: 724

Re installing chrome might help. Please try and let me know.

Upvotes: 1

Related Questions