CODEWITHSUNDEEP
htmlcssbootstrap-4
Albus
Albus

Reputation: 41

Flex alignment with bootstrap

I'm trying to align logo and nav-links next to each other with bootstrap. As in image with the red border. Using align-items: center at parent container but it doesn't work.

enter image description here

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

//Parent container

.navbar {
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;//Using align-items: center to center the its child
    border: 1px solid black;
}

.nav-links {
    height: 15vh;
    border: 1px solid rgb(201, 6, 6);
    display: flex;
    justify-content: space-between;
}

.logo {
    height: 15vh;
    border: 1px solid rgb(201, 6, 6);
}
<body>
        <div class="container">
            <!-- Usig bootstrap row and container class-->
            <nav class="navbar row">
                <div class="logo col-3">
                    <h4>The Nav</h4>
                </div>
                <ul class="nav-links col-7">
                    <li><a ref="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Work</a></li>
                    <li><a href="">Projects</a></li>
                </ul>
            </nav>
        </div>
    </body>

Upvotes: 0

Views: 46

Answers (2)

wahab memon
wahab memon

Reputation: 2416

After removing the height from .navbar and .nav-links, the items got aligned.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

//Parent container
.navbar {
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
}

.nav-links {
    border: 1px solid rgb(201, 6, 6);
    display: flex;
    justify-content: space-between;
}

.logo {
    border: 1px solid rgb(201, 6, 6);
}
<head><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
        <div class="container">
            <!-- Usig bootstrap row and container class-->
            <nav class="navbar row">
                <div class="logo col-5">
                    <h4>The Nav</h4>
                </div>
                <div class="col-7">
                <ul class="nav-links">
                    <li><a ref="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Work</a></li>
                    <li><a href="">Projects</a></li>
                </ul>
                </div>
            </nav>
        </div>
    </body>

Upvotes: 0

Mohd Salman
Mohd Salman

Reputation: 454

there is a margin in nav-links so you should give it margin-bottom: 0 so I added the class mb-0. I have corrected your code. Have a look.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

//Parent container

.navbar {
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;//Using align-items: center to center the its child
    border: 1px solid black;
}

.nav-links {
    height: auto;
    border: 1px solid rgb(201, 6, 6);
    display: flex;
    justify-content: space-between;
    list-style: none;
}
.nav-links li a{
  padding: 10px 0;
  display: inline-block;
}
.logo {
    height: auto;
    border: 1px solid rgb(201, 6, 6);
    padding: 4px 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
        <div class="container">
            <!-- Usig bootstrap row and container class-->
            <nav class="navbar row">
                <div class="logo col-3">
                    <h4>The Nav</h4>
                </div>
                <ul class="nav-links col-7 mb-0">
                    <li><a ref="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Work</a></li>
                    <li><a href="">Projects</a></li>
                </ul>
            </nav>
        </div>
    </body>

Upvotes: 2

Related Questions