Centrare il logo nella navbar di Bootstrap 4

Mattepuffo's logo
Centrare il logo nella navbar di Bootstrap 4

Centrare il logo nella navbar di Bootstrap 4

Su un piccolo progetto sto usando la navbar di Bootstrap 4 solo per visualizzare il logo e richiamare il colore di un sito affiliato.

Di default tutti gli esempi che troviamo nel sito mettono il logo a sinistra.

Oggi vediamo come impostarlo al centro; tenete presente che noi stiamo mettendo il logo, ma vale per qualsiasi cosa:

<header>
	<nav class="navbar navbar-expand-md navbar-dark fixed-top">
		<div class="container">
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
					aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarCollapse">
				<ul class="navbar-nav mx-auto">
					<li class="nav-item active">
						<a class="nav-link" href="https://www.vfraviation.it/abbonamenti/">
							<img src="assets/logo.webp" alt="VFR Aviation" height="40">
						</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>
</header>

Il gioco sta tutto nel dare la classe mx-auto alla lista, e dentro metterci il logo.

Enjoy!


Condividi

Commentami!