I'm trying to set up a bootstrap pill nav menu, but for some reason the pills aren't working and the content just all shows up on one page, even though the active pill does change.
<div class="navigation">
<ul class="nav nav-pills head-menu" id="navbar">
<li class="active">About Us</li>
<li><a href="#sponsorstab" data-toggle="pill" >Sponsors</a></li>
<li>Conference</li>
<li>Execs</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane" id="abouttab">
<h1>Testing</h1>
</div>
<div class="tab-pane" id="sponsorstab">
<p>Place holder text</p>
</div>
</div>
Any Solution?
My head
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="menu.css">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="about-page.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
Your code appears correct. Here's a jsfiddle that I used to test: http://jsfiddle.net/zqpfo8f5/
Are you sure you're properly adding bootstrap's required files?
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Related
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100&display=swap" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Lipsum</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<div class="container">
<div class="Title"><h2>Lorem Ipsum</h2></div>
<br>
<div class="Index">
<i class="bi bi-app"></i> Lorem <!-- Başlık -->
</div>
</div>
</body>
</html>
Bootstrap doesn't works, how to fix it?
I don't want install any packages etc.
I tried few other icons and it again not worked, I don't have any idea for fix and I don't know what is the problem.
first, put the bootstrap CDN and google fonts files below the title tag.
then put the js script file to last inside the body. then try again.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Lipsum</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="Title"><h2>Lorem Ipsum</h2></div>
<br>
<div class="Index">
<i class="bi bi-app"></i> Lorem <!-- Başlık -->
</div>
</div>
<script src="script.js"></script>
</body>
So I wanted to add nav-bar to my page using bootstrap but it just won't show up for some reason, I've properly downloaded bootstrap files and jquery 3.5.1 and everything but my navbar still won't show up, I'm not sure if this will help but when I inspect the page(console gives no errors btw), it shows that the styles from bootstrap are being overridden
Bootstrap styles are not being applied
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset ="utf-8">
<meta name= "viewport" content = "width=device-width, initial-scale =1">
<title>Solution Assignment Module-3!</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
</div>
</nav>
</header>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
You got this error because you added latest version of bootstrap CSS file and "navbar-default" not supported on latest version.
You can use older version of bootstrap CSS like I did here or add latest nav bar code according to latest version of bootstrap.
You can try this code.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset ="utf-8">
<meta name= "viewport" content = "width=device-width, initial-scale =1">
<title>Solution Assignment Module-3!</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav mr-auto">
<li class="nav-item active">
menu1
</li>
<li class="nav-item">
menu2
</li>
<li class="nav-item">
menu3
</li>
<li class="nav-item">
menu4
</li>
<li class="nav-item">
menu5
</li>
</ul>
</div>
</nav>
</header>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" 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>
Look at this two images, and please tell me what is going on?
Why the icons moving ?
Image 01
Image 02
i'm stuck on this for about an hour...
The icons must be align on the right or left, the 3 icons are "floating left" but still look like this...
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Duall Sistemas</title>
<!-- Bootstrap core CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/materialize.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link rel="stylesheet" type="text/css" href="libs/bootstrap/bootstrap-social.css">
<link rel="stylesheet" type="text/css" href="libs/font-awesome/css/font-awesome.css">
<base href="/index.ejs">
</head>
<body>
<div class="navbar-fixed">
<nav>
<div class="row">
<div class="col s12 ">
<div class="nav-wrapper">
Duall Sistemas
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Principal</li>
<li>Contato</li>
<li>Sobre</li>
</ul>
<!-- Menu para Mobile -->
<ul class="side-nav" id="mobile-demo">
<li>
<div class="userView">
<img class="background" src="img/image03.jpg">
<img class="circle" src="img/duallsistemas.png">
<span class="white-text name">Duall Sistemas</span>
<span class="white-text email">duallsistemas#gmail.com</span>
</div>
</li>
<li><i class="material-icons">home</i>Principal</li>
<li><i class="material-icons">mail</i>Contato</li>
<li><i class="material-icons">favorite border</i>Sobre</li>
</ul>
<script>
$(document).ready(function(){
$(".button-collapse").sideNav({
closeOnClick: true
});
})
</script>
</div>
</div>
</div>
</nav>
</div>
<!-- DIV que recebe as VIEWs na pasta Partials de acordo com os Controlleres -->
<div class="container" id="container-main">
<div ng-view>
</div>
</div>
<!-- Scripts para inicializar o Angular e seus Controladores -->
<script type="text/javascript" src="libs/jquery/jquery.js"></script>
<script type="text/javascript" src="js/materialize.js"></script>
<script type="text/javascript" src="libs/angular/angular.js"></script>
<script type="text/javascript" src="libs/angular-route/angular-route.js"></script>
<script type="text/javascript" src="libs/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="libs/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="js/controllers/homeController.js"></script>
<script type="text/javascript" src="js/controllers/navController.js"></script>
<script type="text/javascript" src="js/controllers/aboutController.js"></script>
<script type="text/javascript" src="js/controllers/contactController.js"></script>
<script type="text/javascript" src="js/services/Api.js"></script>
</body>
</html>
It looks as though you are floating your icons to the left and the following elements are catching on it.
Try setting clear left on your lis.
li {clear: left;}
I tried this but the hamburger is not showing only "Menu". I'm using foundation 6 and tested on Opera, Firefox,Chrome, and Edge.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="stylesheets/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<body>
<div class="contain-to-grid sticky">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name"><h1><span>My Website</span></h1></li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
</nav>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
here is showing..
please confirm if call to scripts/css is right.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="stylesheets/app.css" />
</head>
<body>
<div class="contain-to-grid sticky">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>
<span>My Website</span></h1>
</li>
<li class="toggle-topbar menu-icon">
</li>
</ul>
</nav>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
http://codepen.io/fabiovaz/pen/vLmEVw
Have you included the foundation icons in the app.scss file?
If not add this line:
#include foundation-menu-icon;
i have written the following basic HTML code including bootstrap 3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<title>Title</title>
<!-- Bootstrap Core CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Style for this page -->
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<div id="site-wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">MEDIFAKTOR server</a>
</div> <!-- Navbar Header -->
</nav>
</div> <!-- Site Wrapper -->
</body>
</html>
But whatever I change, the title is being displayed in the Body of the document as well. I checked for missing tags. Do I miss something else?
Close your viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">