Align elements horizontally - Bootstrap 4

Question

Align elements horizontally - Bootstrap 4

Navigation

#1 by (0 votes)

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 the mobile devices to be aligned in the center and the menu icon on the right.

Currently my code looks 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 make the logo align in the center on md and smaller devices?

bootstrap-4

asked by anonymous 04.07.2018 / 14:24

1 answer

SQL add data from multi seconds How to use the non-static "getSystemService"

score 0 · Answer 1

Dude I made a simple example it does not use CSS just what is BS4 default. The idea is the same one that you have already 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 tb.

OBS 1: Navbar by default already has display:flex , and justify-content: space-between so there are 3 items one will always be left, another to the center and the last to the right.

OBS 2: You do not need float classes to align

See how it was in the example below, and have tb displayed in "All Page" to see how it goes 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><scriptsrc="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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>