Align elements horizontally - Bootstrap 4

Asked

Viewed 2,444 times

0

I’m creating a responsive menu that contains 3 parts: company logo, links to large devices, menu icon for small devices.

I would like mobile devices to align the logo in the center and the menu icon on the right.

Currently my code is like this:

<div class="container clearfix">
    <div class="float-lg-left">
        <!-- logo -->
    </div>
    <div class="d-none d-lg-block float-right">
        <!-- menu desktop -->
    </div>
    <div class="d-block d-lg-none float-right">
        <!-- icone mobile -->
    </div>
</div>

How can I get the logo aligned in the center on Md and smaller devices?

bootstrap-4

  • Maybe this can help you (https://getbootstrap.com/docs/4.1/utilities/display/#Hiding-Elements), but in this case of the link, you will have to create some Divs with the logo and will put these link codes, but it will only hide or show the element in one place (left, center, right) according to the device used, but in a static way, not flowing, as you want. I think you can use it this way.

1 answer

2


Guy made a simple example he doesn’t use CSS only what is BS4’s default. The idea is the same you’ve used, but it has 2 logos, one that only appears in Mobile in the middle of the bar and the icons on the left that only appear in mobile.

OBS 1: The navbar by default already has display:flex, and justify-content: space-between then as are 3 items one will always stay to the left, another to the center and the last to the right.

OBS 2: You don’t need the classes of float to align

See how it looked in the example below, and have it display tb in "Whole page" to see how it looks in Desktop vs Mobile version

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
    
</style>
</head>
<body>


    <nav class="navbar navbar-expand-lg navbar-dark bg-info">
        <a href="/" class="navbar-brand d-none d-lg-block">Brand</a>
        <div class="d-block d-lg-none">
            <ul class="nav d-flex ">
                <li class="nav-item"><a class="nav-link text-white" href=""><i class="fa fa-twitter"></i></a></li>
                <li class="nav-item"><a class="nav-link text-white" href=""><i class="fa fa-github"></i></a></li>
            </ul>
        </div>
        <a href="/" class="navbar-brand d-block d-lg-none">Brand</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar4">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse" id="navbar4">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link <span class="sr-only">Home</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="//codeply.com">Codeply</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>

    </nav>


    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Browser other questions tagged bootstrap-4

You are not signed in. Login or sign up in order to post.