<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Font Awesome CSS--> <link rel="stylesheet" href="https://d19m59y37dris4.cloudfront.net/universal/2-0-1/vendor/font-awesome/css/font-awesome.min.css"> <div class="top-bar"> <div class="container"> <div class="row d-flex align-items-center"> <div class="col-md-3 d-md-block d-none"> <a class="navbar-brand" href="https://google.de">Losebrauerei.de</a> </div> <div class="col-md-3 d-md-block d-none"> <p>Contact us on +91 7568 54 3012 or dkstudioin@gmail.com.</p> </div> </div> </div> </div>

.top-bar { background: #555; color: #fff; font-size: 0.9rem; padding: 10px 0; height:5rem; background: -prefix-linear-gradient(left, blue, #555); background: linear-gradient(to right, blue, #555); } .top-bar .contact-info { margin-right: 20px; } .top-bar ul { margin-bottom: 0; } .top-bar .contact-info a { font-size: 0.8rem; } .top-bar ul.social-custom { margin-left: 20px; } .top-bar ul { margin-bottom: 0; } .top-bar a.login-btn i, .top-bar a.signup-btn i { margin-right: 10px; } .top-bar ul.social-custom a:hover { background: #4fbfa8; color: #fff; } .top-bar ul.social-custom a { text-decoration: none !important; font-size: 0.7rem; width: 26px; height: 26px; line-height: 26px; color: #999; text-align: center; border-radius: 50%; margin: 0; } a:focus, a:hover { color: #348e7b; text-decoration: underline; } .top-bar a.login-btn, .top-bar a.signup-btn { color: #eee; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none !important; font-size: 0.75rem; font-weight: 700; margin-right: 10px; }