CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
DRE
DRE

Reputation: 323

bootstrap how to align content with navbar

I am trying to align the content of the page with the "home" button of the navbar this is the result i have at the moment

enter image description here

As you can see the "Users" field and the searchbar are not well aligned with the home button.

Here is all the HTML of the page:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='index.css') }}">
    
</head>

<body style="height: 100vh;
    background: linear-gradient(to bottom right, #33ccff 0%, #ff99cc 100%);">
    <header class="navbar navbar-expand-md navbar-dark bd-navbar">
        <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
            <li class="nav-item col-6 col-md-auto">
                <a class="nav-link home-btn" aria-current="page" href="/">Home</a>
            </li>
        </ul>

        <hr class="text-white-50">
        <a class="btn btn-bd-sign-in d-lg-inline-block my-2 my-md-0 ms-md-3" href="/auth/sign-in">Sign in</a>
        <a class="btn btn-bd-sign-up d-lg-inline-block my-2 my-md-0 ms-md-3" href="/auth/sign-up">Sign up</a>
        
    </header>

    <div class="container-fluid">
        <div class="row flex-xl-nowrap">
            <h2 class="ml-5" style="color: white;">Users</h2>
        </div>
        <div class="row flex-xl-nowrap">
            <div class="input-group mb-3 w-50 ml-5 justify-content-start">
                <input type="text" class="form-control" placeholder="Search by username" aria-label="Search by username" aria-describedby="basic-addon2">
                <div class="input-group-append">
                    <button class="btn btn-outline-primary" type="button">Search</button>
                </div>
            </div>
            <hr class="text-white-50">
            <div class="input-group mb-3 w-50 mr-3 justify-content-end">
                <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
                    <button type="button" class="btn btn-primary">Left</button>
                    <button type="button" class="btn btn-primary">Middle</button>
                    <button type="button" class="btn btn-primary">Right</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

I am new to bootstrap so i dont really know that much on how to align elements.

Upvotes: 0

Views: 60

Answers (1)

StepUp
StepUp

Reputation: 38094

One of the solution would be overriding of padding-left property of .container-fluid class:

.container-fluid.padding-left {
  padding-left: 0.3rem;
}

An example:

@media (min-width: 768px) {
  .container-fluid.padding-left {
    padding-left: 0.3rem;
  }
}

@media (max-width: 767px) {
  .container-fluid.padding-left {
    padding-left: 0;        
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='index.css') }}">
    
</head>

<body style="height: 100vh;
    background: linear-gradient(to bottom right, #33ccff 0%, #ff99cc 100%);">
    <header class="navbar navbar-expand-md navbar-dark bd-navbar">
        <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
            <li class="nav-item col-6 col-md-auto">
                <a class="nav-link home-btn" aria-current="page" href="/">Home</a>
            </li>
        </ul>

        <hr class="text-white-50">
        <a class="btn btn-bd-sign-in d-lg-inline-block my-2 my-md-0 ms-md-3" href="/auth/sign-in">Sign in</a>
        <a class="btn btn-bd-sign-up d-lg-inline-block my-2 my-md-0 ms-md-3" href="/auth/sign-up">Sign up</a>
        
    </header>

    <div class="container-fluid padding-left">
        <div class="row flex-xl-nowrap">
            <h2 class="ml-5" style="color: white;">Users</h2>
        </div>
        <div class="row flex-xl-nowrap">
            <div class="input-group mb-3 w-50 ml-5 justify-content-start">
                <input type="text" class="form-control" placeholder="Search by username" aria-label="Search by username" aria-describedby="basic-addon2">
                <div class="input-group-append">
                    <button class="btn btn-outline-primary" type="button">Search</button>
                </div>
            </div>
            <hr class="text-white-50">
            <div class="input-group mb-3 w-50 mr-3 justify-content-end">
                <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
                    <button type="button" class="btn btn-primary">Left</button>
                    <button type="button" class="btn btn-primary">Middle</button>
                    <button type="button" class="btn btn-primary">Right</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Upvotes: 1

Related Questions