I'm a beginner to Bootstrap and I'm not really getting the ideas of it 100% clearly yet. I am however kind-of in a rush to push out a content idea for who-ever I'm creating this. Could someone clear some things up for me and if something's changed, perhaps explain what really changed?
I've linked a picture down below to imgur with what the structure looks like now.
On request, i'm explaining the things that were in the picture as text now.
See the 'Language' dropdown? I'd like for that one to be in the top right corner when the devices are full-screen. But when the device is on smaller devices like SM or XS, then it should divert itself into the menu button's expanding menu.
i'd also like for the whole navbar to be centered on its own, as if moving a block of concrete with text on it to a different position.
It'd also be nice if it were possible to have the logo/banner thing up top resize along with the page size. For example: on mobile it would cut the side bars along the picture, and then have the picture scale down. Bootstrap should have this, but I don't know how to use it.
Thanks sincerely for the help.
PS: Don't comment on the messy code mess with containers, headers, etc. I know it's probably not correct. I'm figuring it out. Thanks for the concern though!
http://imgur.com/a/exA71
.bg-irie {
background-color: #E7DD96;
}
.bg-irie2 {
background-color: #41403E;
}
.header-advertisement {
height:320px;
}
<html>
<head>
<link rel="icon" type="image/png" href="/src/img/favicon.png" />
<link rel="stylesheet" href="/src/css/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<title>Irie Vibes Roots Festival - Home</title>
</head>
<body class="bg-irie">
<header class="text-center">
<div class="container-fullwidth bg-irie2">
<div class="header-advertisement ">
<img src="http://i.imgur.com/BUu5PPO.png">
</div>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-irie2">
<a class="navbar-brand" href="#">Irie Vibes</a>
<!--Menu button for small screens-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="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 dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Language</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
</div>
</body>
<!--Loading scripts at the end of the page to prevent slowdowns-->
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</html>
Try this..
Newly edited and i change the width of the language dropdown and make it as you said,
And position absolute to make the layer as Independent as per the z-index value
.bg-irie {
background-color: #E7DD96;
}
.bg-irie2 {
background-color: #41403E;
}
#navbarDropdownMenuLink, .dropdown-menu{
text-align: right;
width: 20%;
float: right;
color:#fff
}
#navbarNavDropdown{
text-align: center
}
.dropdown-menu{
position: absolute;
right: 0 !important;
}
.header-advertisement {
height:320px;
}
.navbar{
display: inline-block; !important
}
<html>
<head>
<link rel="icon" type="image/png" href="/src/img/favicon.png" />
<link rel="stylesheet" href="/src/css/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<title>Irie Vibes Roots Festival - Home</title>
<body class="bg-irie">
<header class="text-center">
<a class="nav-link dropdown-toggle pull-right" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Language</a>
<div class="dropdown-menu pull-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="container-fullwidth bg-irie2">
<div class="header-advertisement ">
<img src="http://i.imgur.com/BUu5PPO.png">
</div>
<div class="container"> <center>
<nav style="display: inline-block" class="navbar navbar-expand-lg navbar-light bg-irie2">
<a class="navbar-brand" href="#">Irie Vibes</a>
<!--Menu button for small screens-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="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 dropdown">
</li>
</ul>
</div>
</nav>
</center>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
</div>
</body>
<!--Loading scripts at the end of the page to prevent slowdowns-->
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</html>
try this for the banner
Add an id to the image.
<img id="BUu" src="http://i.imgur.com/BUu5PPO.png">
</div>
Then, add this to your CSS
.header-advertisement {
/* height: 320px; */
width: 80%;
margin: auto;
}
#BUu {
width: 80%;
}
Related
I'm trying to align my brand and the rest of the links on the opposite side(brand on left and other links on the right) to fit on the mobile view but the links on the right move to the next line. Any suggestions will help thanks.I'm using bootstrap 5. Here's my code:
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<nav class="nav-navbar navbar-expand-lg navbar-light">
<div class="col border border-danger">
<div class="d-sm-flex p-2 bd-highlight">
<button
class="navbar-toggler align-items-sm-start"
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>
<a class="navbar-brand" href="#">brand name</a>
<div class="d-flex flex-sm-row-reverse">
<div class="p-2 bd-highlight">Search</div>
<div class="p-2 bd-highlight">cart</div>
<div class="p-2 bd-highlight">Login</div>
<div class="p-2 bd-highlight">Sign up</div>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"
>NEW ITEMS</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BRANDS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CURATED PIECES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TOP ITEMS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FEATURED</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>
Those items are wrapping to next line at the extra small breakpoint (or < small) because you are using .d-sm-flex. The display is only set to flex at the small and larger breakpoints.
To enable the flex behavior for all screen sizes use .d-flex.
https://getbootstrap.com/docs/5.1/utilities/flex/#enable-flex-behaviors
You also have a couple of issues with your code that I have corrected in the snippet.
.cols should be direct descendants of .rows
https://getbootstrap.com/docs/5.1/layout/columns/#how-they-work
The scripts (popper.js & bootstrap.js) should be included just before the closing </body> tag after all content elements.
https://getbootstrap.com/docs/5.1/getting-started/introduction/#js
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<nav class="nav-navbar navbar-expand-lg navbar-light col">
<div class="border border-danger">
<div class="d-flex p-2 bd-highlight">
<button class="navbar-toggler align-items-sm-start" 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>
<a class="navbar-brand" href="#">brand name</a>
<div class="d-flex flex-sm-row-reverse">
<div class="p-2 bd-highlight">Search</div>
<div class="p-2 bd-highlight">cart</div>
<div class="p-2 bd-highlight">Login</div>
<div class="p-2 bd-highlight">Sign up</div>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">NEW ITEMS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BRANDS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CURATED PIECES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TOP ITEMS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FEATURED</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
If you are using Bootstrap 5, you can go to https://getbootstrap.com/ and use the top nav bar to navigate to https://getbootstrap.com/docs/5.1/examples/. In here, you'll find an example page called "Headers", located here: https://getbootstrap.com/docs/5.1/examples/headers/.
These example headers could be a great resource for you to model your code after.
One other helpful resource is the Bootstrap 5 nav bar component page found here: https://getbootstrap.com/docs/5.1/components/navbar/
There are several examples on this page that could give you some ideas.
If you are new to HTML, CSS and/or Bootstrap, I would suggest starting off with one of their examples/templates and modifying rather than building your own.
Side note: it may also help if your code is more readable. You could put your code through an HTML formatter like: https://webformatter.com/html or use software like https://prettier.io/docs/en/.
Best of luck!
I am using Semantic UI for the dropdown, and I have only included the dropdown & transition parts of Semantic. I need to change the border of the items in my Dropdown list but the thing is except the 1st element, the other elements have bold borders. I have set the border-bottom-width to 0, to have border's to only 3 sides and make everything uniform but it is not working.
Also when the dropdown toggle is expanded on mobile view, the Contact Us part is getting cut from the navbar-toggle. (The navbar is made with Bootstrap 4.)
This is the CSS I used for the dropdown and dropdown.
.item{
border-color: #812485 !important;
border-bottom-width: 0px !important;
border-width: 1px !important;
color: #3F72AF !important;
border-style: solid !important;
}
.navbar{
background-color: #3F72AF;
border-radius: 0 0 85% 85% / 30%;
}
Here is the codepen https://codepen.io/arnab4srk/pen/qBOoqre
As I can see you are trying to make border semantic on all three sides, so you can do it like this, all you need to do is make sure your you CSS is working by checking its position in your code
.navbar{
background-color: #3F72AF;
border-radius: 0 0 85% 85% / 30%;
}
.ui.dropdown .menu>.item {
border: 1px solid #3F72AF !Important;
border-top: 0 !important;
}
.ui.dropdown .menu>.item:first-child {
border-top: 1px solid #3F72AF !Important;
}
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/dropdown.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/transition.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather|Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand h1" href="#">
<div class="logo">
<img src="Assets/Images/logoWhite.png" height="60px" width="47px">
<img src="Assets/Images/textWhite.png" height="40px" width="116px" class="my-auto">
</div>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#newsMenu" aria-controls="newsMenu" aria-expanded="false" aria-lable="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="newsMenu">
<div class="navbar-nav">
<a class="nav-item nav-link nav-pills" href="index.html">Home</a>
<div class="ui dropdown">
<a class="nav-item nav-link nav-pills dropdown-toggle" href="#">Courses</a>
<div class="menu">
<div class="item">
Languages
<div class="menu">
<a class="courses item" href="courses/spanish.html">Spanish</a>
<a class="courses item" href="courses/french.html">French</a>
<a class="courses item" href="courses/german.html">German</a>
</div>
</div>
<div class="item">
Technical
<div class="menu">
<a class="courses item" href="courses/web.html">Web Development</a>
<a class="courses item" href="courses/app.html">App Development</a>
<a class="courses item" href="courses/ios.html">iOS Development</a>
<a class="courses item" href="courses/c.html">C</a>
<a class="item courses" href="courses/c++.html">C++</a>
<a class="item courses" href="courses/java.html">Java</a>
<a class="courses item" href="courses/python.html">Python</a>
</div>
</div>
<div class="item">
IOT with Robotics
<div class="menu">
<a class="courses item" href="courses/iot.html">Internet of Things</a>
<a class="courses item" href="courses/robotics.html">Robotics</a>
<a class="courses item" href="courses/drone.html">Drone Making</a>
</div>
</div>
<div class="item">
Marketing
<div class="menu">
<a class="courses item" href="courses/dm.html">Digital Marketing</a>
</div>
</div>
</div>
</div>
<div class="ui dropdown">
<a class="nav-item nav-link nav-pills dropdown-toggle" href="#">LearnLive</a>
<div class="menu">
<div class="item">
LogIn
</div>
<div class="item">
SignUp
</div>
</div>
</div>
<a class="nav-item nav-link nav-pills" href="aboutus.html">About Us</a>
<a class="nav-item nav-link nav-pills active" href="#">Contact Us</a>
</div>
</div>
</nav>
<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>
<script src="js/scripts.js"></script>
<script src="https://kit.fontawesome.com/b3a074ef19.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/dropdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/transition.min.js"></script>
<script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Its you decision but I would suggest you to keep it like this, it would llok much better.
.navbar{
background-color: #3F72AF;
border-radius: 0 0 85% 85% / 30%;
}
.ui.dropdown .menu>.item {
border-bottom: 1px solid #3F72AF !Important;
}
.ui.dropdown .menu>.item:last-child {
border-bottom: 0 !Important;
}
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/dropdown.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/transition.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather|Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand h1" href="#">
<div class="logo">
<img src="Assets/Images/logoWhite.png" height="60px" width="47px">
<img src="Assets/Images/textWhite.png" height="40px" width="116px" class="my-auto">
</div>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#newsMenu" aria-controls="newsMenu" aria-expanded="false" aria-lable="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="newsMenu">
<div class="navbar-nav">
<a class="nav-item nav-link nav-pills" href="index.html">Home</a>
<div class="ui dropdown">
<a class="nav-item nav-link nav-pills dropdown-toggle" href="#">Courses</a>
<div class="menu">
<div class="item">
Languages
<div class="menu">
<a class="courses item" href="courses/spanish.html">Spanish</a>
<a class="courses item" href="courses/french.html">French</a>
<a class="courses item" href="courses/german.html">German</a>
</div>
</div>
<div class="item">
Technical
<div class="menu">
<a class="courses item" href="courses/web.html">Web Development</a>
<a class="courses item" href="courses/app.html">App Development</a>
<a class="courses item" href="courses/ios.html">iOS Development</a>
<a class="courses item" href="courses/c.html">C</a>
<a class="item courses" href="courses/c++.html">C++</a>
<a class="item courses" href="courses/java.html">Java</a>
<a class="courses item" href="courses/python.html">Python</a>
</div>
</div>
<div class="item">
IOT with Robotics
<div class="menu">
<a class="courses item" href="courses/iot.html">Internet of Things</a>
<a class="courses item" href="courses/robotics.html">Robotics</a>
<a class="courses item" href="courses/drone.html">Drone Making</a>
</div>
</div>
<div class="item">
Marketing
<div class="menu">
<a class="courses item" href="courses/dm.html">Digital Marketing</a>
</div>
</div>
</div>
</div>
<div class="ui dropdown">
<a class="nav-item nav-link nav-pills dropdown-toggle" href="#">LearnLive</a>
<div class="menu">
<div class="item">
LogIn
</div>
<div class="item">
SignUp
</div>
</div>
</div>
<a class="nav-item nav-link nav-pills" href="aboutus.html">About Us</a>
<a class="nav-item nav-link nav-pills active" href="#">Contact Us</a>
</div>
</div>
</nav>
<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>
<script src="js/scripts.js"></script>
<script src="https://kit.fontawesome.com/b3a074ef19.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/dropdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/transition.min.js"></script>
<script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
In the code above you are removing the border-bottom-width and then adding it again with border-width: 1px;.
To remove the borders from your dropdown simply use:
.item{
border: none !important;
color: #3F72AF !important;
}
<!DOCTYPE.html>
<html>
<head>
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="/home/heisenberg/Documents/GitHub/Scifi.github.io/heisenberg.svg" width="30" height="30" alt="">
</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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Blog.html">Blog</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">
Content
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">soon..</a>
<a class="dropdown-item" href="#">soon..</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">soon..</a>
</div>
</li>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul>
</ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul>
</ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul class="navbar-nav mr-auto">
<li>
<a class="navbar-brand" href="https://github.com/heisenberg01010">
<img src="/home/heisenberg/Documents/GitHub/Scifi.github.io/social-media.svg" width="30" height="30" alt="">
</a>
</li>
</ul>
<ul class="navbar-nav mr-auto">
<li>
<a class="navbar-brand" href="https://www.linkedin.com/in/jai-lodha-3b63b4197/">
<img src="/home/heisenberg/Documents/GitHub/Scifi.github.io/logos.svg" width="30" height="30" alt="">
</a>
</li>
</ul>
<ul class="navbar-nav mr-auto">
<li>
<a class="navbar-brand" href="https://www.instagram.com/mai_jai_/">
<img src="/home/heisenberg/Documents/GitHub/Scifi.github.io/brands-and-logotypes.svg" width="30" height="30" alt="">
</a>
</li>
</ul>
</ul>
</div>
</nav>
<div class="text-black shadow p-3 mb-5 bg-white rounded"><strong>Scroll across some beautiful snaps of The Hubble telescope!!</strong></div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/home/heisenberg/Documents/GitHub/Scifi.github.io/bubble nebula.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Bubble Nebula!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://hubblesite.org/image/3725/gallery" role="button">Learn more</a>
</div>
</div>
<div class="carousel-item">
<img src="/home/heisenberg/Documents/GitHub/Scifi.github.io/Sombero galaxy.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Sombrero Galaxy!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://hubblesite.org/contents/media/images/2003/28/1415-Image.html" role="button">Learn more</a>
</div>
</div>
<div class="carousel-item">
<img src="/home/heisenberg/Documents/GitHub/Scifi.github.io/heic1501a.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Pillars Of Creation!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://www.nasa.gov/image-feature/the-pillars-of-creation" role="button">Learn more</a>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</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>
I have tried my best but the "Learn more" button is not working under
<div class= "jumbotron">. There are three such buttons working under the carousel. I am using bootstrap to build a site. I think some properties are overlapping. I have used jumbotron from here https://getbootstrap.com/docs/4.4/components/jumbotron/. I have used carousel from here https://getbootstrap.com/docs/4.4/components/carousel/. Earlier there was no problem. I don't know how this bug came.
Please suggest some changes.
So the Problem is with the bootstrap files, you don't have the files of bootstrap 4,
if you have add the all links and bootstrap link to the head of html then it will work.
I have modified the code somehow so you can have the idea. !!!
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<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>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.4/getting-started/introduction">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra
attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger
container.</p>
<a class="btn btn-primary btn-lg" href="https://hubblesite.org/image/3725/gallery" role="button">Learn more</a>
</div>
</body>
</html>
The problem is: You added the elements with jumbotron class inside of carousel items. And this caused to place the elements with jumbotron class to be placed under the carousel controls.
I suggest to change the bottom of the carousel controls.
To fix the problem, add this script:
<script>
const computedStyle = window.getComputedStyle(document.getElementsByClassName('jumbotron')[0]);
const bottomOfCarouselAction = +computedStyle.getPropertyValue('height').replace('px', '') + +computedStyle.getPropertyValue('margin-top').replace('px', '') + +computedStyle.getPropertyValue('margin-bottom').replace('px', '');
document.getElementsByClassName('carousel-control-prev')[0].style.bottom = bottomOfCarouselAction; //set the bottom property of carousel previous control to the top of the jumbotron.
document.getElementsByClassName('carousel-control-next')[0].style.bottom = bottomOfCarouselAction; //set the bottom property of carousel next control to the top of the jumbotron.
</script>
I am using 'Album' example from Bootstrap 4.1 and unable to get the extra nav-items to display horizontally.
I tried to add 'navbar-expand-lg', and it brings all to horizontal line. But, the toggler-button (and hence its header data) vanishes and becomes inaccessible.
Code as below;
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<!-- Navbar#1 Toggled - Detailed Header Info-->
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Lines of Data Shortened.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li>Follow on Twitter</li>
<li>Like on Facebook</li>
<li>Email me</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Navbar#2 Permanent Strip of Navbar -->
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<!-- SVG Album Icon -->
<strong>Album</strong>
</a>
<!-- Nav Items Manually added -->
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<!-- Navbar#3 - Visible Toggle Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
Add float: left;CSS to your li items.
Also you can try this
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar&stacked=h
I got the answer.
The navbar was a flexbox with 'd-flex'. So, I added a 'flex-row', which brings nav-items horizontally. 'mr-auto' brings margin properly.
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<!-- Navbar#1 Toggled - Detailed Header Info-->
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Lines of Data Shortened.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li>Follow on Twitter</li>
<li>Like on Facebook</li>
<li>Email me</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Navbar#2 Permanent Strip of Navbar -->
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<!-- SVG Album Icon -->
<strong>Album</strong>
</a>
<!-- Nav Items Manually added -->
<div class="navbar-nav flex-row mr-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<!-- Navbar#3 - Visible Toggle Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
I have recently gotten a bootstrap 4 theme. I have been changing some files to work with flask. However I'm not able to figure out why my "main-container" div is falling below the nav bar when I change the page size to a more full size desktop browser size?
In the original bootstrap file the index.html file had the nav bar and page content on a single page. For flask I have moved most of this between three files layout.html, index.html and _navbar.html
I would like this to be on the right side of the nav bar when this is stretched to full desktop size but im not able to figure out what to change.
layout.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pipeline Project Management Bootstrap Theme</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A project management Bootstrap theme by Medium Rare">
<link href="static/img/favicon.ico" rel="icon" type="image/x-icon">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gothic+A1" rel="stylesheet">
<link href="static/css/theme.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
{%include 'includes/_navbar.html'%}
{%block body%}
{%endblock%}
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/autosize.min.js"></script>
<script type="text/javascript" src="static/js/popper.min.js"></script>
<script type="text/javascript" src="static/js/prism.js"></script>
<script type="text/javascript" src="static/js/draggable.bundle.legacy.js"></script>
<script type="text/javascript" src="static/js/swap-animation.js"></script>
<script type="text/javascript" src="static/js/dropzone.min.js"></script>
<script type="text/javascript" src="static/js/list.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap.js"></script>
<script type="text/javascript" src="static/js/theme.js"></script>
</body>
<footer>
<p><center><small><small>© ME | ©ME </small></small></center></p>
</footer>
</html>
index.html
{%extends 'layout.html'%}
{%block body%}
<div class="main-container">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-11 col-xl-9">
<section class="py-4 py-lg-5">
<div class="mb-3 d-flex">
<img alt="Pipeline" src="static/img/logo-color.svg" class="avatar avatar-lg mr-1" />
<div>
<span class="badge badge-success">1.0</span>
</div>
</div>
<h1 class="display-4 mb-3">Headline</h1>
<p class="lead">
Headline text
</p>
<div class="d-flex">
<div class="dropdown mr-3">
Explore Pages
<div class="dropdown-menu">
<a class="dropdown-item" href="pages-app.html">App Pages</a>
<a class="dropdown-item" href="pages-utility.html">Utility Pages</a>
</div>
</div>
<div class="dropdown">
View Components
<div class="dropdown-menu">
<a class="dropdown-item" href="components-bootstrap.html">Bootstrap Components</a>
<a class="dropdown-item" href="components-pipeline.html">Pipeline Components</a>
</div>
</div>
</div>
</section>
<section class="py-4 py-lg-5">
<div class="carousel slide carousel-fade mb-5" data-ride="carousel">
<div class="carousel-inner overflow-visible">
<div class="carousel-item shadow-lg active">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-team.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-project.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-task.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-kanban-board.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-chat.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-user.png" class="img-fluid rounded border" />
</a>
</div>
</div>
</div>
<div class="d-flex align-items-center mb-3">
<i class="material-icons text-primary mr-3 h1">supervised_user_circle</i>
<h2 class="h1 mb-0">Project Management Pages</h2>
</div>
<p class="lead">
Pipeline makes building project management interfaces simple with pages for teams, projects, tasks, kanban boards and more.
</p>
App PagesUtility Pages
</section>
</div>
</div>
</div>
</div>
{%endblock%}
_navbar.html
[![<div class="layout layout-nav-side">
<div class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top">
<a class="navbar-brand" href="index.html">
<img alt="Pipeline" src="static/img/logo.svg" />
</a>
<div class="d-flex align-items-center">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-block d-lg-none ml-2">
<div class="dropdown">
<a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img alt="Image" src="static/img/avatar-male-4.jpg" class="avatar" />
</a>
<div class="dropdown-menu dropdown-menu-right">
Profile
Account Settings
Log Out
</div>
</div>
</div>
</div>
<div class="collapse navbar-collapse flex-column" id="navbar-collapse">
<ul class="navbar-nav d-lg-block">
<li class="nav-item">
<a class="nav-link" href="index.html">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-2" aria-controls="submenu-2">Pages</a>
<div id="submenu-2" class="collapse">
<ul class="nav nav-small flex-column">
<li class="nav-item">
<a class="nav-link" href="pages-app.html">App Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-utility.html">Utility Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-layouts.html">Layouts</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-3" aria-controls="submenu-3">Components</a>
<div id="submenu-3" class="collapse">
<ul class="nav nav-small flex-column">
<li class="nav-item">
<a class="nav-link" href="components-bootstrap.html">Bootstrap</a>
</li>
<li class="nav-item">
<a class="nav-link" href="components-pipeline.html">Pipeline</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="documentation/index.html">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="documentation/changelog.html">Changelog</a>
</li>
</ul>
<hr>
<div class="d-none d-lg-block w-100">
<span class="text-small text-muted">Quick Links</span>
<ul class="nav nav-small flex-column mt-2">
<li class="nav-item">
Team Overview
</li>
<li class="nav-item">
Project
</li>
<li class="nav-item">
Single Task
</li>
<li class="nav-item">
Kanban Board
</li>
</ul>
<hr>
</div>
<div>
<form>
<div class="input-group input-group-dark input-group-round">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">search</i>
</span>
</div>
<input type="search" class="form-control form-control-dark" placeholder="Search" aria-label="Search app" aria-describedby="search-app">
</div>
</form>
<div class="dropdown mt-2">
<button class="btn btn-primary btn-block dropdown-toggle" type="button" id="newContentButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Add New
</button>
<div class="dropdown-menu" aria-labelledby="newContentButton">
<a class="dropdown-item" href="#">Team</a>
<a class="dropdown-item" href="#">Project</a>
<a class="dropdown-item" href="#">Task</a>
</div>
</div>
</div>
</div>
<div class="d-none d-lg-block">
<div class="dropup">
<a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img alt="Image" src="static/img/avatar-male-4.jpg" class="avatar" />
</a>
<div class="dropdown-menu">
Profile
Account Settings
Log Out
</div>
</div>
</div>
</div>
</div>
Divs by default have display: block which makes them positioned on top of one another.
In order to position them properly you could either:
Wrap them in a container div and use flexbox for positioning (Bootstrap row and columns),
Use floats (Bootstrap float classes)
Below is an example of using floats to position divs.
.container {
width: 500px;
}
.nav {
float: left;
width: 30%;
height: 200px;
background-color: red;
}
.content {
float: left;
width: 70%;
height: 200px;
background-color: blue;
}
.clear {
clear: both;
}
<div class="container">
<div class="nav">
</div>
<div class="content">
</div>
<div class="clear">
</div>
</div>