How to have facebook navigation like alignments in Bootstrap?
Run the code in full page.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<nav class="navbar navbar-expand-sm fixed-top" style="background-color: #ffdbae;">
<ul class="navbar-nav">
<li class="nav-item"><i class="fas fa-book-open" style="font-size:40px; color:#00CED1;"></i></li>
<li class="nav-item"><i class="fas fa-pen-fancy" style="font-size:40px; color:#fff;"></i></li>
<li class="nav-item"><i class="fas fa-sliders-h" style="font-size:40px; color:#fff;"></i></li>
<li class="nav-item"><i class="fas fa-user" style="font-size:40px; color:#fff;"></i></li>
</ul>
</nav>
As facebook navigation icons have equal space between each other, how can I acheive it in my navigation?
Note: If the screen gets bigger/shorter it should auto adjust them self.
You can use flexbox to evenly space each nav item:
.navbar-nav {
display: flex;
justify-content: space-between;
width: 100%;
}
.navbar-nav {
display: flex;
justify-content: space-between;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<nav class="navbar navbar-expand-sm fixed-top" style="background-color: #ffdbae;">
<ul class="navbar-nav">
<li class="nav-item"><i class="fas fa-book-open" style="font-size:40px; color:#00CED1;"></i></li>
<li class="nav-item"><i class="fas fa-pen-fancy" style="font-size:40px; color:#fff;"></i></li>
<li class="nav-item"><i class="fas fa-sliders-h" style="font-size:40px; color:#fff;"></i></li>
<li class="nav-item"><i class="fas fa-user" style="font-size:40px; color:#fff;"></i></li>
</ul>
</nav>
Simpler than I thought with no need to redefine the BS4 CSS. I modified the navbar to use bs4 markup without the ul and li...seems cleaner this way
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<nav class="navbar navbar-expand-sm fixed-top" style="background-color: #ffdbae;">
<div class="navbar-nav w-100 nav-justified">
<a class="nav-item" href="http://localhost/mp/"><i class="fas fa-book-open" style="font-size:40px; color:#00CED1;"></i></a>
<a class="nav-item" href="http://localhost/mp/post"><i class="fas fa-pen-fancy" style="font-size:40px; color:#fff;"></i></a>
<a class="nav-item" href="http://localhost/mp/settings"><i class="fas fa-sliders-h" style="font-size:40px; color:#fff;"></i></a>
<a class="nav-item" href="http://localhost/mp/profile"><i class="fas fa-user" style="font-size:40px; color:#fff;"></i></a>
</div>
</nav>
You can do something like this:
.navbar-nav {
display: flex;
}
.nav-item {
flex: 1;
text-align: center;
margin: 5px;
}
Related
I've got a problem with my Bootstrap 5.0.2 navbar both desktop and mobile when collapsed.
The point is to collapse after click on links.
Hrefs/links dont't work.
Can u guys tell me where I messed up?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="shortcut icon" href="img/favicon.ico" />
<link rel="icon" type="image/png" href="img/favico.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style> .navbar {
background-color: black;
}
#home {
height: 30vh;
background-color: yellow;
}
#about {
height: 30vh;
background-color: red;
}
#my-skills {
height: 30vh;
background-color: green;
}
#work {
height: 30vh;
background-color: purple;
}
#work {
height: 30vh;
background-color: blue;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<!-- nav -->
<nav id="wrap" class="navbar navbar-expand-lg navbar-dark menu fixed-top gradient-nav">
<div class="container">
<div class="row align-items-start">
<div class="col-2">
<a class="navbar-brand " href="#home">
<img src="img/logo.png" alt="logo">
</a>
</div>
</div>
<div class="row align-items-center">
<div class="collapse navbar-collapse col-8" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#home" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">About</a></li>
<li class="nav-item"><a class="nav-link" href="#my-skills" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">My Skills</a></li>
<li class="nav-item"><a class="nav-link" href="#work" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">Work</a></li>
<li class="nav-item"><a class="nav-link" href="#contact" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">Contact</a></li>
</ul>
</div>
</div>
<div class="row align-items-end">
<div class="collapse navbar-collapse col-2" id="navbarSupportedContent">
<ul class="navbar-nav text-center">
<li class="socials-top"><a href="#" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show"><i class="fab fa-facebook"></i></a>
</li>
<li class="socials-top"><a href="#" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show"><i class="fab fa-git-alt"></i></a>
</li>
<li class="socials-top"><a href="#" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show"><i class="fab fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<section id="home"></section>
<section id="about"></section>
<section id="my-skills"></section>
<section id="work"></section>
<section id="contact"></section>
<script src="https://kit.fontawesome.com/ccbb5f75d7.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">
</script>
</body>
</html>
I want to apply certain css properties in particular area i.e."Dashboard" and I have assigned a class name "main" for div.col function under html for the same but when I try to apply css property in it, it gets applied to whole page.
here's the code for html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/adminboard.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js">
<link href="https://fonts.googleapis.com/css?family=Rosario&display=swap" rel="stylesheet">
</head>
<body>
<title>Admin Dashboard</title>
<!--navbar starts here -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-fixed-top">
<a class="navbar-brand" href="#">Admin Dashboard</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fas fa-tachometer-alt"></i> Dashboard<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-cogs"></i> Settings</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-user"></i> Profile</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-question-circle"></i> Help</a></li>
</ul>
<ul class="navbar-nav ml-auto">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-user-plus"></i> Add Users</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="far fa-copy"></i> Add Categories</a></li>
</ul>
</div>
</nav>
<!--navbar ends </here>-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 ">
<ul class="nav flex-column sidebar">
<li class="nav-item"><a class="nav-link active" href="#">Reports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Stats</a> </li>
<li class="nav-item"><a class="nav-link" href="#">Graphs</a></li>
<li class="nav-item"><a class="nav-link" href="#">Users</a></li>
</ul>
<ul class="nav flex-column sidebar">
<li class="nav-item"><a class="nav-link active" href="#">Reports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Revenues</a></li>
<li class="nav-item"><a class="nav-link" href="#">Countries</a></li>
<li class="nav-item"><a class="nav-link" href="#">Spammers</a></li>
</ul>
</div>
<div class="col-sm-9 col-md-10 main">
<h1 class="page-header">Dashboard</h1></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
CSS code:
[![body{
font-family: 'Rosario' ;
}
.sidebar{
margin:10px -8px 20px 20px;
}
.sidebar>li>a{
padding: 20px 20px;
}
.main{
margin-top: 80px;
background-color: lightgray;
}]
I want my page to look exactly like this.: https://i.stack.imgur.com/odqIK.png
Right now it is looking like this: https://i.stack.imgur.com/PgL6l.png
I'm not exactly sure how you'll want to proceed with this project.
For what you asked, I'd go about:
no need to wrap your h1:
<h1 class="page-header">Dashboard</h1></div>
around a div.
Then, you can add your classes to your h1 and add a max-height to its css and adjust positioning with padding.
HTML:
<!--navbar ends </here>-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 ">
<ul class="nav flex-column sidebar">
<li class="nav-item"><a class="nav-link active" href="#">Reports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Stats</a> </li>
<li class="nav-item"><a class="nav-link" href="#">Graphs</a></li>
<li class="nav-item"><a class="nav-link" href="#">Users</a></li>
</ul>
<ul class="nav flex-column sidebar">
<li class="nav-item"><a class="nav-link active" href="#">Reports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Revenues</a></li>
<li class="nav-item"><a class="nav-link" href="#">Countries</a></li>
<li class="nav-item"><a class="nav-link" href="#">Spammers</a></li>
</ul>
</div>
<h1 class="page-header col-sm-9 col-md-10 main">Dashboard</h1>
</div>
</div>
CSS:
<style>
body {
font-family: 'Rosario';
}
.sidebar {
margin: 10px -8px 20px 20px;
}
.sidebar>li>a {
padding: 20px 20px;
}
.main {
padding-top: 30px;
max-height: 100px;
background-color: lightgray;
}
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 2 years ago.
How can I align my nav items in specific position? I want my brand name to be on left side and my log in button to the right end of the navbar, I am new to bootstrap, help me in solving this thing.
.navbar-brand {
font-weight: bold;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<ul class="nav">
<li class="nav-item">
<a class="nav-link navbar-brand active" href="#">NotePro</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">LogIn</a>
</li>
</ul>
</div>
Result pic
You can use Bootstrap classes d-flex and justify-content-between for the ul element.
More details can be found here
.navbar-brand {
font-weight: bold;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<ul class="nav d-flex justify-content-between">
<li class="nav-item">
<a class="nav-link navbar-brand active" href="#">NotePro</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">LogIn</a>
</li>
</ul>
</div>
added this code to container
.container {
display: flex;
justify-content: space-between;
}
and moved the brand outside ul tag
.navbar-brand {
font-weight: bold;
}
.container {
display: flex;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="new.css">
<title>NotePro</title>
</head>
<body>
<div class="container">
<a class="nav-link navbar-brand active" href="#">NotePro</a>
<ul class="nav">
<li class="nav-item ">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">about us</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">LogIn</a>
</li>
</ul>
</div>
</body>
</html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!--here is your code below-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Use ml-auto on your UL
I'm an amateur and I'm practicing. But when I code this I can't get the margin right for menu items.
This is my project:
body {
background: #f5f5f5;
}
.top-f{
font-size: .9rem;
}
.h1brand{
color: #0c2e8a;
font-size: 2.8rem;
}
.logo h1{
margin: 10px 0;
}
.nav-icon{
margin: 0 0;
}
.logo span{
color: #50d8af;
}
.logo:hover{
text-decoration: none;
}
.nav-menu ul li a{
color: #555;
font-weight: 600;
font-size: 1.05rem;
}
.dropdown-menu{
min-width: 15rem;
}
.dropdown-menu a:hover{
background: #9fcdff;
}
.background-img{
background-size: cover;
width: 100%;
min-height: 65vh;
max-height: auto;
background-repeat: no-repeat;
opacity: .4;
position: absolute;
}
.headcolor{
color: #0c2e8a;
}
.headcolor2{
color: #50d8af;
}
.btn{
border-radius: 0px;
}
.mc{
text-align: center;
align-content: center;
}
.navbar-toggler{
border: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ"
crossorigin="anonymous">
</head>
<body>
<body>
<div class="container-fluid">
<div class="row border-bottom top-f">
<div class="container">
<div class="row">
<!--email and phonenumber-->
<div class="col-lg-5 col-md-8 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mt-3 mb-3 text">
<li class="list-inline-item mr-3 border-right pr-3">
<i class="fa fa-phone text-secondary"></i>
<span class="ml-2 text-secondary">09905645285</span>
</li>
<li class="list-inline-item mr-3">
<i class="fas fa-envelope text-secondary"></i>
<span class="ml-2 text-secondary">parsaking#example.com</span>
</li>
</ul>
</div>
<!--social media-->
<div class="col-lg-7 col-md-4 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mb-3 mt-3 text-secondary float-lg-right">
<li class="list-inline-item pl-2 pr-2 text-secondary">
<i class="fab fa-twitter"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-facebook-f"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-instagram"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-google-plus-g"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-linkedin-in"></i>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="container">
<nav class="navbar navbar-expand-md navbar-light ">
<div class="row">
<!-- Brand -->
<a href="#" class="display-4 font-weight-bold logo col-xl-6 col-lg-6 float-left">
<h1 class="h1brand ">Reve
<span>al</span>
</h1>
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon nav-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse col-xl-6 col-lg-6 " id="collapsibleNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"> HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> DROPDOWN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!--start section offer-->
<div class="container-fluid">
<div class="row">
<img src="img/3.jpg" class="background-img">
<div class="col-12 mc mt-5">
<h2 class="display-3 font-weight-bold headcolor">making
<span class="headcolor2">your ideas </span>
<br>happen</h2>
</div>
<div class="col-12 mc mt-5">
<button class=" btn btn-lg btn-primary">Get GetSarted</button>
<button class="btn btn-lg btn-secondary ml-4">Our Projects</button>
</div>
</div>
</div>
<!--scripts-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
Can you help me to make xl and lg float right and responsive, please?
I tried everything to solve this problem but I failed every time.
And it's reveral theme, made with bootstrap.
It wants more text from me and I'm not very good in English. Oh, how can I tell?
I don't know much about CSS and HTML and this is a disaster.
Thanks a lot.
I have made some changes in your structure to make it aligned. As of now your navbar is aligned. Please confirm if it solves your problem.
body {
background: #f5f5f5;
}
.top-f {
font-size: .9rem;
}
.h1brand {
color: #0c2e8a;
font-size: 2.8rem;
}
.logo h1 {
margin: 10px 0;
}
.nav-icon {
margin: 0 0;
}
.logo span {
color: #50d8af;
}
.logo:hover {
text-decoration: none;
}
.nav-menu ul li a {
color: #555;
font-weight: 600;
font-size: 1.05rem;
}
.dropdown-menu {
min-width: 15rem;
}
.dropdown-menu a:hover {
background: #9fcdff;
}
.background-img {
background-size: cover;
width: 100%;
min-height: 65vh;
max-height: auto;
background-repeat: no-repeat;
opacity: .4;
position: absolute;
}
.headcolor {
color: #0c2e8a;
}
.headcolor2 {
color: #50d8af;
}
.btn {
border-radius: 0px;
}
.mc {
text-align: center;
align-content: center;
}
.navbar-toggler {
border: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
</head>
<body>
<body>
<div class="container-fluid">
<div class="row border-bottom top-f">
<div class="container">
<div class="row">
<!--email and phonenumber-->
<div class="col-lg-5 col-md-8 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mt-3 mb-3 text">
<li class="list-inline-item mr-3 border-right pr-3"><i class="fa fa-phone text-secondary"></i><span class="ml-2 text-secondary">09905645285</span></li>
<li class="list-inline-item mr-3"><i class="fas fa-envelope text-secondary"></i><span class="ml-2 text-secondary">parsaking#example.com</span></li>
</ul>
</div>
<!--social media-->
<div class="col-lg-7 col-md-4 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mb-3 mt-3 text-secondary float-lg-right">
<li class="list-inline-item pl-2 pr-2 text-secondary"><i class="fab fa-twitter"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-facebook-f"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-instagram"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-google-plus-g"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<nav class="navbar navbar-expand-md navbar-light ">
<!-- Brand -->
<a href="#" class="display-4 font-weight-bold logo">
<h1 class="h1brand ">Reve<span>al</span></h1>
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="true">
<span class="navbar-toggler-icon nav-icon"></span>
</button>
<!-- Navbar links -->
<div class="navbar-collapse collapse show" id="collapsibleNavbar" style="">
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<li class="nav-item">
<a class="nav-link" href="#"> HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> DROPDOWN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
<!--start section offer-->
<div class="container">
<div class="row">
<img src="img/3.jpg" class="background-img">
<div class="col-12 mc mt-5">
<h2 class="display-3 font-weight-bold headcolor">making <span class="headcolor2">your ideas </span><br>happen</h2>
</div>
<div class="col-12 mc mt-5">
<button class=" btn btn-lg btn-primary">Get GetSarted</button>
<button class="btn btn-lg btn-secondary ml-4">Our Projects</button>
</div>
</div>
</div>
<!--scripts-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
I am implementing Bootstrap navbar but it's not displaying fine and displaying an error on my console saying
I tried to change the orders of my script sin head section but didn't get rid of this problem.
Anyone help me in finding out my mistake?
Code
<head>
<meta charset="UTF-8">
<title></title>
<!-- Ajax Library 1.11.3 -->
<script src="assets/js/ajax_1.11.3.js"></script>
<!-- Tether for Bootstrap -->
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<!-- Including js file for Animations Effects-->
<script type="text/javascript" src="assets/js/jquery_2.1.3_animation.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui_1.11.3.js"></script>
<!--Including both these files from Html_respond master-->
<script src="assets/js/html5shiv.min.js"></script>
<script src="assets/js/respond.min.js"></script>
<!-- Including js file for Fonts-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<!-- Including Files for Bootstrap Form Validations -->
<script src="assets/js/form_Validation.js"></script>
<script src="assets/js/formvalidation_bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.button-collapse').sideNav();
}); // end of document ready
</script>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-dark bg-primary">
<!--Collapse button-->
<i class="fa fa-bars white-text"></i>
<!--Content for large and medium screens-->
<div class="navbar-desktop">
<!--Navbar Brand-->
<a class="navbar-brand" href="#">Navbar</a>
<!--Links-->
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<!--Search form-->
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
<!-- Content for mobile devices-->
<div class="navbar-mobile">
<ul class="side-nav" id="mobile-menu">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
<!--/.Navbar-->
</body>
Double Navigation Menu Demo (SideNav slide-out button)
// Initialize collapse button
$(".button-collapse").sideNav();
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
$('.collapsible').collapsible();
body {
background: url("http://mdbootstrap.com/images/regular/nature/img%20(23).jpg") no-repeat center center fixed;
background-size: cover;
}
<!-- Material Design Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="http://mdbootstrap.com/live/_doc/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="http://mdbootstrap.com/live/_doc/css/mdb.min.css" rel="stylesheet">
<!-- SideNav slide-out button -->
<i class="material-icons">menu</i>
<!--/. SideNav slide-out button -->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/bootstrap.min.js"></script>
<!-- Material Design Bootstrap -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/mdb.min.js"></script>
<!-- Sidebar navigation -->
<ul id="slide-out" class="side-nav admin-side-nav dark-side-nav">
<!-- Side navigation links -->
<ul class="collapsible collapsible-accordion">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-money"></i> Sales</li>
<li><i class="fa fa-line-chart"></i> Conversion</li>
<li><i class="fa fa-users"></i> Website Traffic</li>
<li><i class="fa fa-search"></i> SEO</li>
<li><i class="fa fa-share-alt"></i> Social</li>
</ul>
<!--/. Side navigation links -->
</ul>
<!--/. Sidebar navigation -->
<!--Navbar-->
<nav class="double-navbar navbar navbar-fixed-top unique-color z-depth-1" role="navigation">
<div class="container-fluid">
<div class="navbar-header pull-left">
<!-- SideNav slide-out button -->
<i class="fa fa-bars"></i>
<!--/. SideNav slide-out button -->
</div>
<!-- Navbar Icons -->
<ul class="list-inline pull-right text-center">
<li><i class="fa fa-question"></i><br><span>Help</span></li>
<li><i class="fa fa-cogs"></i><br><span>Settings</span></li>
<li><i class="fa fa-sign-out"></i><br><span>Logout</span></li>
</ul>
<!--/. Navbar Icons -->
</div>
</nav>
<!--/.Navbar-->
<div class="container">
<div class="space-50" style="height: 300px"></div>
<h1 class="white-text">Scorll Down</h1>
<div class="space-50" style="height: 900px"></div>
</div>
Toggle Navigation Demo.
// Initialize collapse button
$(".button-collapse").sideNav();
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
$('.collapsible').collapsible();
body {
background: url("http://mdbootstrap.com/images/regular/nature/img%20(4).jpg") no-repeat center center fixed;
background-size: cover;
}
.top-nav-collapse {
background-color: #3F729B !important;
}
/* Small Devices, Tablets */
#media only screen and (max-width: 768px) {
.navbar {
background-color: #3F729B !important;
}
}
<!-- Material Design Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="http://mdbootstrap.com/live/_doc/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="http://mdbootstrap.com/live/_doc/css/mdb.min.css" rel="stylesheet">
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/bootstrap.min.js"></script>
<!-- Material Design Bootstrap -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/mdb.min.js"></script>
<!--Navbar-->
<nav class="navbar primary-color">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand waves-effect waves-light" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group waves-effect waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</div>
</div>
</nav>
<!--/.Navbar-->