HTML Materialize CSS Dropdown and SideNav not working in Angular - html

I am helping my friend to create a replica of scholarship portal for college project. I made the navbar using materialize css and gave the html and css file to my friend to integrate it with angular. Me and my friend both are absolute beginners at angular and the dropdowns & sidenav does not respond upon clicking. Saw many solutions on the internet but we are unable to solve it.
Putting my html code of the navbar below
body{
font-family: 'Noto Sans JP', sans-serif;
}
*{
margin: 0;
padding: 0;
}
.dropdown-content{
width: max-content !important;
height:auto !important;
}
.nav-wrapper{
background-color:white;
}
.material-icons{
color: #EBA63F;
}
#logo-nav{
color: #E40C2B;
width: 100%;
}
.li-nav{
color: #3CBCC3;
}
.li-nav:hover{
color:#1D1D2C;
}
#sidenav1{
color: #1D1D2C;
background-color: #F7F4E9;
}
#sidenav1:hover{
background-color:#EBA63F;
color: #1D1D2C;
}
#dropdown-css{
color: #1D1D2C;
}
#dropdown-css:hover{
background-color: #EBA63F;
}
#sidenav1>.material-icons{
color: #1D1D2C;
}
.sidenav{
background-color: #F7F4E9;
}
.logos{
margin-top: 20px;
background-color: #3CBCC3;
}
#media only screen and (max-width: 810px) {
div.nav-wrapper {
/* height: 15vh;*/
-webkit-box-shadow: 0 3px 5px -3px #000;
-moz-box-shadow: 0 3px 5px -3px #000;
box-shadow: 0 3px 5px -3px #000;
}
}
#media only screen and (max-width: 560px) {
#logo-nav{
font-size: medium;
}
}
.logo,.logo1{
height: 40px
}
<!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">
<!-- CSS only -->
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime&family=Noto+Sans&family=Noto+Sans+JP:wght#500&display=swap" rel="stylesheet">
<!--jquery-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<!--bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!--materialize css-->
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!--materialize css icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--font awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<!--bootstrap font awesome cdn-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--css-->
<link rel="stylesheet" href="navbar2.css"/>
<link rel="stylesheet" href="homepage.css"/>
<title>Navbar Page</title>
</head>
<body>
<header>
<!--navbar ends here-->
<!-- Dropdown Structure for navbar -->
<ul id="dropdown1" class="dropdown-content">
<li><a id="dropdown-css" href="#!">Student Login</a></li>
<li class="divider"></li>
<li><a id="dropdown-css" href="#!">Institute Login</a></li>
<li class="divider"></li>
<li><a id="dropdown-css" href="#!">Ministry Login</a></li>
<li class="divider"></li>
<li><a id="dropdown-css" href="#!">Nodal Officer Login</a></li>
</ul>
<!-- Dropdown Structure for navbar -->
<ul id="dropdown2" class="dropdown-content">
<li><a id="dropdown-css" href="#!">Student Register</a></li>
<li class="divider"></li>
<li><a id="dropdown-css" href="#!">Institute Register</a></li>
<li class="divider"></li>
<li><a id="dropdown-css" href="#!">Ministry Register</a></li>
<li class="divider"></li>
<li><a id="dropdown-css" href="#!">Nodal Officer Register</a></li>
</ul>
<!-- Dropdown Structure for sidenav bar -->
<ul id="dropdown3" class="dropdown-content">
<li><a id="sidenav1" href="#!">Student Login</a></li>
<li><a id="sidenav1" href="#!">Institute Login</a></li>
<li><a id="sidenav1" href="#!">Ministry Login</a></li>
<li><a id="sidenav1" href="#!">Nodal Officer Login</a></li>
</ul>
<!-- Dropdown Structure for sidenav bar -->
<ul id="dropdown4" class="dropdown-content">
<li><a id="sidenav1" href="#!">Student Register</a></li>
<li><a id="sidenav1" href="#!">Institute Register</a></li>
<li><a id="sidenav1" href="#!">Ministry Register</a></li>
<li><a id="sidenav1" href="#!">Nodal Officer Register</a></li>
</ul>
<!-- Navbar main code starts here -->
<nav>
<i class="material-icons" >menu</i>
<div class="nav-wrapper">
<ul id="nav-mobile" class="hide-on-med-and-down">
<li><a class="li-nav" href="#">Home</a></li>
<li>
<div class="center row">
<div class="col s12 " >
<div class="row" id="topbarsearch">
<div class="input-field col s6 s12">
<i class="material-icons prefix">search</i>
<input type="text" placeholder="Search..." id="autocomplete-input" class="autocomplete li-nav" >
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="right hide-on-small-only">
<!-- login and register navbar Dropdown Trigger -->
<li><a class="dropdown-trigger li-nav" href="#!" data-target="dropdown1">Login<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger li-nav" href="#!" data-target="dropdown2">Register<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="li-nav" href="#">About Us</a></li>
<li><a class="li-nav" href="#">Contact Us</a></li>
</ul>
</div>
<!--sidenav main code-->
<ul class="sidenav" id="mobile-demo">
<li><a id="sidenav1 show-on-large" href="#home">Home</a></li>
<li><a id="sidenav1" class="dropdown-trigger" href="#!" data-target="dropdown3">Login<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a id="sidenav1" class="dropdown-trigger" href="#!" data-target="dropdown4">Register<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a id="sidenav1" href="#aboutus">About Us</a></li>
<li><a id="sidenav1" href="#contactus">Contact Us</a></li>
</ul>
</nav>
<nav>
<div class="nav-wrapper">
<a id="logo-nav" href="#!" class="brand-logo center">National Scholarship Portal</a>
</div>
</nav>
</header>
<!--navbar ends here-->
<script>
$(document).ready(function(){
$('.dropdown-trigger').dropdown({inDuration: 300, outDuration: 100, coverTrigger: false, alignment: 'center',});
$('.sidenav').sidenav();
//$('.button-collapse').sideNav();
$('.parallax').parallax();
});
</script>
</body>
</html>
It would mean everything to me if anyone can give me code for angular
I only included snippet of navbar above
This is my entire page that I made: https://drive.google.com/drive/folders/1QSifk0BneW3i_OKIU0RYcMRFusZ78q-k?usp=sharing
Please Please help me run this code in Angular

Related

Bootstrap sidebar expand on the right side

I am trying to expand the links in the side navbar horizontally. I have tried hard by going through the tutorials of bootstrap 4. My code is following.
<li class="active dropright">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Residential
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Rami Villa
</li>
<li>
Alpine Metals Jafza
</li>
<li>
Home 3
</li>
</ul>
</li>
The outcome of this code is as following.
.
When I click the residential link it dropdowns as follows.
.
However I actually want something like this.
I have do some modification in your code, and has done the output as your requirement.
HTML
<aside>
<li class="active dropright">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Residential
</a>
<ul class="collapse list-unstyled submenu" id="homeSubmenu">
<li>
Rami Villa
</li>
<li>
Alpine Metals Jafza
</li>
<li>
Home 3
</li>
</ul>
</li>
</aside>
CSS
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
aside {
width: 100%;
height: 100%;
max-width: 200px;
}
aside .dropright {
position: relative;
background: yellow;
}
aside .dropright a {
padding: 10px;
display: block;
}
aside .dropright .submenu {
position: absolute;
background: black;
left: 100%;
right: auto;
width: 100%;
top: 0;
}
aside .dropright .submenu li a {
color: #fff;
display: block;
}
Here is the codepen link
You need to use .dropdown-menu on your <ul> instead of .collapse
<li class="active dropright">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Residential
</a>
<ul class="list-unstyled dropdown-menu" id="homeSubmenu">
<li>
Rami Villa
</li>
<li>
Alpine Metals Jafza
</li>
<li>
Home 3
</li>
</ul>
</li>
https://jsfiddle.net/chan_omega/a3mgvnk8/
I'm quite new to programming, but why don't you use the example of Bootstrap:
Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<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="styles.css">
</head>
<body>
<!-- Default dropright button-->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Residential
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links-->
<a class="dropdown-item" href="#">Rami Villa</a>
<a class="dropdown-item" href="#">Alpine Metals Jafza</a>
<a class="dropdown-item" href="#">Home 3</a>
</div>
</div>
<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>

Creating a horizontal navbar with bootstrap

I am attempting to make a bootstrap navbar that spans horizontally across the screen. However, when I attempt to do so, the navbar links stack vertically as I will show.
Here is the HTML / CSS I have implemented:
body{
padding-top: 90px;
background-color: #dbdbdb;
}
#navMain{
background-color: #db8606;
padding-left: 20px;
padding-right: 20px;
}
#navbar-brand-image{
height: 70px;
}
.nav-link{
font-size: 165%;
font-family: 'Sriracha', cursive;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght#1,500&family=Parisienne&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sriracha&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default fixed-top" id="navMain">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" id="navbar-brand-title" href="index.html"><img src="content/logo.png" id="navbar-brand-image" alt=""></a>
</div>
<ul class="nav navbar-nav">
<li>
<a class="nav-link" href="#">Home</a>
</li>
<li>
<a class="nav-link" href="about.html">About</a>
</li>
<li>
<a class="nav-link" href="about.html">About</a>
</li>
<li>
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
The result that I achieve looks like this:
Instead, I want the links to span horizontally.
I tried using the W3schools tutorial at this link and it doesn't even recreate the same as what's on the site.
Thanks for your help in advance!
Navbars are really not that special, except they are fluid (100% wide) and hidden by default when printing. If you place the navbar inside a column grid it will align responsively to its parent; it also works with dropdowns:
<div class="row">
<div class="col-9">main content</div>
<div class="col-3">
<nav>
<div class="navbar-header">
<a class="navbar-brand" id="navbar-brand" href="#">#</a>
</div>
<ul class="nav navbar-nav">
<li><a class="nav-link" href="#">Home</a></li>
<li><a class="nav-link" href="about.html">About</a></li>
<li>
<a class="dropdown-toggle" aria-expanded="false" data-toggle="collapse" href="#dropdown">dropdown</a>
<ul class="collapse" id="dropdown">
<li>item 1</li>
<li>item 2</li>
</ul>
</li>
<li><a class="nav-link" href="about.html">About</a></li>
</ul>
</nav>
</div>
</div>
http://jsfiddle.net/e2ur4wd0/

How can i have a horizontal FAB in a vertical FAB using Materialize?

I am trying to create a horizontal FAB inside a vertical FAB using Materialize. The code below works almost perfectly, but whenever I hover over the main FAB, it will toggle the main FAB and second FAB, but I only want to open the second fab when I hover over the share button. (The second FAB button)
I am using Materialize 0.100.2.
I also created a working pen here.
.FAB2 {
position: relative !important;
display: inline-block;
right: 24px !important;
right: 17px !important;
bottom: 0 !important;
padding: 0 0 0 25px !important;
}
.FAB2-li {
margin: 0 15px 0 0 !important;
}
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li class="fixed-action-btn horizontal FAB2">
<!--Share button-->
<a class="btn-floating red">
<i class="large material-icons">share</i>
</a>
<!--End of share button-->
<ul>
<li class="FAB2-li"><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li class="FAB2-li"><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li class="FAB2-li"><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li class="FAB2-li" style="margin-right: 0px !important;"><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</li>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>
.FAB2 {
position: relative !important;
display: inline-block;
right: 24px !important;
right: 17px !important;
bottom: 0 !important;
padding: 0 0 0 25px !important;
}
.FAB2-li {
margin: 0 15px 0 0 !important;
}
li.fixed-action-btn.horizontal.FAB2>ul {
opacity:0 !important;
transition:0.2s all;
}
li.fixed-action-btn.horizontal.FAB2:hover >ul {
opacity:1 !important;
}
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li class="fixed-action-btn horizontal FAB2">
<!--Share button-->
<a class="btn-floating red">
<i class="large material-icons">share</i>
</a>
<!--End of share button-->
<ul>
<li class="FAB2-li"><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li class="FAB2-li"><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li class="FAB2-li"><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li class="FAB2-li" style="margin-right: 0px !important;"><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</li>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>
Just add below css and you're done...
li.fixed-action-btn.horizontal.FAB2>ul {
opacity:0 !important;
transition:0.2s all;
}
li.fixed-action-btn.horizontal.FAB2:hover >ul {
opacity:1 !important;
}
ElusiveCoder answer worked for me partially, like I was able to get his idea, but this worked for me at last:
HTML Code:
<div class="fixed-action-btn edit-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li class="fixed-action-btn-horizontal horizontal FAB2">
<!-- <a class="btn-floating"> -->
<!-- <div class="fixed-action-btn-horizontal"> -->
<a class="btn-floating blue"
><i
class="material-icons"
style="font-size: 30px"
id="pencilLarge"
>lens</i
></a
>
<ul class="bttom0px">
<li class="FAB2-li">
<a class="btn-floating green"
><i
class="material-icons"
style="font-size: 25px"
id="pencilMedium"
>lens</i
></a
>
</li>
<li class="FAB2-li">
<a class="btn-floating pink"
><i
class="material-icons"
style="font-size: 15px"
id="pencilSmall"
>lens</i
></a
>
</li>
<li class="FAB2-li">
<a class="btn-floating red"
><i
class="material-icons"
style="font-size: 10px"
id="pencilTiny"
>lens</i
></a
>
</li>
</ul>
<!-- </div> -->
<!-- </a> -->
</li>
</ul>
</div>
CSS Code:
li.fixed-action-btn-horizontal ul {
opacity:0 !important;
display: flex;
transition:0.2s all;
}
li.fixed-action-btn-horizontal:hover ul {
opacity:1 !important;
}
li.fixed-action-btn-horizontal:hover .btn-floating {
opacity:1 !important;
}
li.fixed-action-btn-horizontal .btn-floating {
opacity:1 !important;
transform: scale(1) translateY(0px) translateX(0px) !important;
}
.bttom0px{
bottom:0!important;
right:0!important;
left:90px!important;
}
JavaScript Code:
var elems = document.querySelectorAll(".fixed-action-btn");
var elems2 = document.querySelectorAll(".fixed-action-btn-horizontal");
var instances = M.FloatingActionButton.init(elems, {
// toolbarEnabled : true,
hoverEnabled: false,
});
var instances2 = M.FloatingActionButton.init(elems2, {
direction:'right',
});

inline block not working Bootstrap

For some reason, I cannot get the elements in column 2 to align as inline-block items, either with the bootstrap HTML d-inline-block or with my own CSS inline-block applied. It doesn't seem to matter whether my stylesheet named MainPage.css has priority over bootstrap or not.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="MainPage.css">
<title>Hello, world!</title>
</head>
<body>
<!-- <h1>Hello, world!</h1> -->
<div class="container-fluid">
<div class="row vh">
<div class="col-md-2 pt-3">
<ul id="socialmedia">
<li><a class="pl-2" id="facebook" href="https://www.facebook.com/"><img src="facebook16.png"/></a></li>
<li><a class="pl-2" id="twitter" href="https://www.twitter.com/"><img src="twitter16.png"/></a></li>
<li><a class="pl-2" id="instagram" href="https://www.twitter.com/"><img src="instagram16.png"/></a></li>
<li><a class="pl-2" id="youtube" href="https://www.twitter.com/"><img src="youtube16.png"/></a></li>
<li><a class="pl-2" id="spotify" href="https://www.twitter.com/"><img src="spotify16.png"/></a></li>
</ul>
</div>
<div class="col-md-6 pt-4">
<ul id="leftbanner">
<li><a class="" id="News" href="https://www.google.com/">News</a></li>
<li><a class="pl-2" id="Photos" href="https://www.google.com/">Photos</a></li>
<li><a class="pl-2" id="Tour" href="https://www.google.com/">Tour</a></li>
<li><a class="pl-2" id="Games" href="https://www.google.com/">Games</a></li>
</ul>
<p id="centerpage">BlackBird | Blue Bird</p>
<ul id="rightbanner">
<li><a class="" id="News" href="https://www.google.com/">News</a></li>
<li><a class=" pl-2" id="Photos" href="https://www.google.com/">Photos</a></li>
<li><a class=" pl-2" id="Tour" href="https://www.google.com/">Tour</a></li>
<li><a class=" pl-2" id="Games" href="https://www.google.com/">Games</a></li>
</ul>
</div>
<div class="col-md-4">
</div>
</div>
</div>
<!-- Optional JavaScript color #4f4f52 -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
CSS
body {
background-attachment: fixed;
background-image: url(BG1.jpg);
background-position: center;
background-repeat: no-repeat;
/* background-size: 100% 100%; */
background-size: cover;
margin: 0%;
padding: 0%;
}
#socialmedia li {
list-style-type: none;
display: inline;
}
#leftbanner li {
list-style-type: none;
display: inline-block;
}
#rightbanner li {
list-style-type: none;
display: inline-block;
}
#centerpage{
display: inline-block;
}
.container-fluid{
padding:0;
margin:0;
}
.vh div{
height: 7vh;
background: #f9f9fa;
}
If you add the d-inline-block class to the li items, it works as expected. (see code snippet below).
However, you might rather want to use the Bootstrap 4 nav classes for this job because they were designed precisely for that and will make your life easier than working with d-inline-block classes in this case.
Reference: https://getbootstrap.com/docs/4.0/components/navs/
Here's a working code snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row vh">
<div class="col-md-2 pt-3">
<ul id ="socialmedia" class="list-unstyled">
<li><a class="pl-2" id ="facebook" href="https://www.facebook.com/"><img src="https://placehold.it/24"/></a></li>
<li><a class="pl-2" id ="twitter" href="https://www.twitter.com/"><img src="https://placehold.it/24"/></a></li>
<li><a class="pl-2" id ="instagram" href="https://www.twitter.com/"><img src="https://placehold.it/24"/></a></li>
<li><a class="pl-2" id ="youtube" href="https://www.twitter.com/"><img src="https://placehold.it/24"/></a></li>
<li><a class="pl-2" id ="spotify" href="https://www.twitter.com/"><img src="https://placehold.it/24"/></a></li>
</ul>
</div>
<div class="col-md-6 pt-4">
<ul id ="leftbanner" class="list-unstyled">
<li class="d-inline-block"><a class="" id ="News" href="https://www.google.com/">News</a></li>
<li class="d-inline-block"><a class="pl-2" id ="Photos" href="https://www.google.com/">Photos</a></li>
<li class="d-inline-block"><a class="pl-2" id ="Tour" href="https://www.google.com/">Tour</a></li>
<li class="d-inline-block"><a class="pl-2" id ="Games" href="https://www.google.com/">Games</a></li>
</ul>
<p id ="centerpage">BlackBird | Blue Bird</p>
<ul id ="rightbanner" class="list-unstyled">
<li class="d-inline-block"><a class="" id ="News" href="https://www.google.com/">News</a></li>
<li class="d-inline-block"><a class=" pl-2" id ="Photos" href="https://www.google.com/">Photos</a></li>
<li class="d-inline-block"><a class=" pl-2" id ="Tour" href="https://www.google.com/">Tour</a></li>
<li class="d-inline-block"><a class=" pl-2" id ="Games" href="https://www.google.com/">Games</a></li>
</ul>
</div>
<div class="col-md-4">
</div>
</div>
</div>

Bootstrap responsive doesnt work.

I am using bootstrap in my project but when I resize the window my template commix completely.My navbar would explode and some part of my page is not shown and...
Every thing is wrong...
And when I use a mobile to see my website not only the bootstrap is not loaded but also every thing is wrong there too.
I use just the codes in bootstrap site but in their site its working well and in my project its not.
for example I copied this navbar from the site and it has the problem with resizing:
<div class="navbar navbar-inverse" style="position: static;">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".navbar-inverse-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
Link
</li>
<li>
Link
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>
Separated link
</li>
<li>
One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="">
<input class="search-query span2" type="text" placeholder="Search">
</form>
<ul class="nav pull-right">
<li>
Link
</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
what should I do to solve this problem?
Edit:
The issue is solved for resizing the window but the problem with mobile is remained...
My _Layout header code is like this:
<
head>
<meta charset="utf-8" />
<style type="text/css">
##media (max-width: 767px) {
.search-query {
display: none;
}
}
##-ms-viewport {
width: device-width;
}
</style>
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="~/Content/mosaic.css" />
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/mosaic.1.0.1.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/Site.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$('.bar').mosaic({
animation: 'slide'
});
});
</script>
</head>
I have the codes between <style> tags in my bootstrap-responsive.css too.
Try adding this line in the head section of your html file:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If that doesn't work you can use media queries, like the following:
#media (max-width: 767px) {
.search-query {
display: none;
}
}
More info about media queries is here: http://twitter.github.io/bootstrap/scaffolding.html#responsive