I'm new to bootstrap, i'm working with the last version. I want to do a simple site, to get to know bootstrap, but already have a problem, that I can't solve. The navbar and the icon appears to be ok, but when I click, nothing happend. I have put my complete code bellow.
<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Getting started with Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<script src="js/bootstrap.js"></script>
</head>
<body>-->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Site name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<nav class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</div>
</div>
</div>
I am somewhat new to using Bootstrap as well and I think I may have found some answer to your problem. It looks like you downloaded all the libraries but you may not have included all the jquery, JS, and Popper.js links in your head.
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- 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>
It happened to me too because I didn't link all the libraries. So check to see if there aren't any libraries you didn't refer to in your head.
PS: Sorry I don't use the downloaded version of the libraries so I can't tell you specifically which files and libraries to select.
Hope it helps still ;)
Related
My navbar is overlapping my content. All similar questions seems to have been solved by either (1) padding-top or (2) if padding-top is applied, make sure the custom.css is loaded after the bootstrap css. I have done both. I am using Django, and I know it is loading my custom.css because the background color is applied. I put my navbar in head when it didn't work the first time, it was in body before, but I was thinking the padding-top might be applied to that as well. Anyways, please help make it work! Here is my code:
base.html
<head>
{% load static %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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" type="text/css" href="{% static 'main/custom.css' %}">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="{% url 'main:index' %}">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="{% url 'main:index' %}">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" 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>
</body>
custom.css
body {
background-color: #242627;
padding-top: 100px;
}
a { color: inherit; }
Instead of padding top you should go about giving it margin-bottom instead. You are trying to keep the navbar and the top and rest of the content below it. So give the navbar a margin-bottom to keep the other content down. Also dont give it to the body! make a custom class like .custom and add it to the navbar.
By adding the padding-top to your body, you're adding it to the nav since that is in the body too. If you have a div below the nav in the chain of code, add the padding to that:
<div class="nav">
<!-- nav code -->
</div>
<div class="next-content"> <!-- APPLY PADDING-TOP TO THIS -->
<!-- code -->
</div>
This question already exists:
Finding to position logo on bootstrap very difficult
Closed 5 years ago.
I am trying to position my logo at the top left, inside the navbar.
My logo will not respond when I try to position it to the far-left of the navbar using 'margin-right'.
When I position the logo to the left, it is pushing the menu out to the right to the middle of the navbar.
Could anyone give me advice?
Thank you.
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Arabella Hill</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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" href='#'><img src="img/arabella.png" class="img-responsive" img style="max-width:300px; margin-top:-80px; margin-right: 100px;"></a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li class="dropdown">
Themes<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Admin & Dashboard</li>
<li>Admin 1</li>
<li>Admin 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Have you tried using "margin-left" with a negative value?
... margin-top:-80px; margin-left:-20px; ...
You may need to alter the value to suit the image dimensions.
There may be some other styling on the .navbar or .navbar- header classes that's pushing it right.
Have a look on the the browser inspection tool to check these DIVs for extra styling.
Get rid of the margin-right on your logo. That is pushing your nav to the right.
I would advise putting your styles in a CSS file but if you're going to do inline try something like this if you want it against the left side of the screen
<a class="navbar-brand" href='#'><img src="img/arabella.png" class="img-responsive" style="max-height:50px; margin-top:-80px; margin-left: -30px;"></a>
I would also advise using the developer inspector on your browser to see how padding and margin are affecting the logo.
I need to reuse the boostrap navbar on all pages so I been trying to have a single file for the menu and render it using a ng-include angularJS tag
The menu is this file /partials/top_menu.html
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" href="index.html">EXAMPLE</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Quienes Somos
</li>
<li>
Organización
</li>
<li>
Servicios
</li>
<li>
Clientes
</li>
<li>
Galeria
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
And here is the index.html that tries to include that partial as the navigation menu of the page
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>TITLE</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div ng-include="'partials/top_menu.html'"></div>
</nav>
<body>
The problem is that the menu bar is not being render at all and the WebDeveloper console does not show any error or file missing
What am I doing wrong or if this is the wrong aproach to do it let me know can I achieve it
You need to add the ng-app to the body tag of your index.html
<body ng-app>
This is AngularJS bootstraping directive. Without this, the AngularJS process does not start.
And you need to do that for any html file that needs to use angularJS directives
Use this script may be it help you :
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
Must include Jquery file.
I know this has been asked but I can't fix it based on the answers as I've made the includes found in other threads. My dropdown in bootstrap navbar is not working. I find it very odd as other features like the menu for mobile are working. I will join the code below. Thank You!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW" />
<META NAME=“Version” CONTENT=“Plano R1” />
<title>Plano</title>
<script src="/scripts/jquery-latest.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.jeditable.js" type="text/javascript"></script>
<script src="/scripts/jquery.jeditable.masked.js" type="text/javascript"></script>
<script src="/scripts/jquery.maskedinput-latest.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.autocomplete.js" type="text/javascript"></script>
<script src="/scripts/date.format.js" type="text/javascript"></script>
<script src="/scripts/jquery.floatThead.js" type="text/javascript"></script>
<script src="/scripts/PatientSearch.js" type="text/javascript"></script>
<script src="/scripts/jquery-ui.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/css/jquery-ui-latest.css">
<link rel="stylesheet" type="text/css" href="/css/iPad.css">
<link rel="stylesheet" type="text/css" href="/css/cms.v2.css">
<link rel="stylesheet" type="text/css" href="/css/css3-buttons.css">
<link rel="stylesheet" type="text/css" href="/css/patients.css">
<link rel="stylesheet" type="text/css" href="/css/appointments.css">
<link rel="stylesheet" type="text/css" href="/css/jquery.autocomplete.css">
<link rel="stylesheet" type="text/css" href="/css/base/jquery.ui.autocomplete.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="../dist/css/bootstrap.css">
<script src="../dist/js/bootstrap.min.js"></script>
</head>
<body>
<header class="noPrint">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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 plano"> Plano </a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" role="navigation">
<li><span class="icon icon33"></span><span class="">Agenda</span></li>
<li class="dropdown">
Répertoires<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Fournisseurs</li>
<li>Patients</li>
<li>Professionels</li>
</ul>
</li>
<li><span class="icon icon120">Tâches</li>
<li><span class="icon icon96">Réglages</li>
<li>Disponibilités</li>
<li><span class="icon icon3">Patient</li>
<li><span class="icon icon151">Déconnexion</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" id="searchboxappointment" name="searchboxappointment" placeholder="Rechercher un patient" class="form-control searchboxappointment searchengine " size="35" value="<?php echo isset($_POST['searchboxappointment']) ? $_POST['searchboxappointment'] : "";?>" />
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header
Your loading 2 versions of jQuery. Get rid of the 1.11.0 version.
<script src="/scripts/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
I added your code to a codepen. HERE li It seems to be working for me. Perhaps your problem is somewhere else.
Have you checked if those CDN resources are actually providing you with their libraries or even connecting online with your site? Are working off your server in offline mode? If you are, the CDN references will not connect.
I would save those CDN references inside your root. They are great for testing purposes, but they are not meant to be permanent resources. If their server goes down, so will your site. Not to mention, you can't modify the code in them, should you needed to do so.
I'm just following a bootstrap tutorial, but I got stuck with some weird thing.
chrome and safari show mobile collapse differently with the same code.
I even tried 'copy and paste'!!
this is mobile nav-collapse on safari which it is a correct view.
but on chrome, it just doesn't work somehow.
this is the same one on chrome.
i got no error on console.
I used bower to download jquery and bootstrap.
this is the html code.
main.js and main.css are just empty files.
this is just a very basic bootstrap... but I don't know why..
how can I fix it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Set the viewport so this responsive site displays correctly on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3 Responsive Design Tutorial | RevillWeb.com</title>
<!-- Include bootstrap CSS -->
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/assets/main.css">
</head>
<body>
<!-- Site header and navigation -->
<header class="top" role="header">
<div class="container">
<a href="#" class="navbar-brand pull-left">
BS3 TUTORIAL
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="navbar-nav nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<!-- Include jQuery and bootstrap JS plugins -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/assets/main.js"></script>
</body>
</html>