Why wont this work? I am sure i have set it up correctly although this is my first time using bootstrap. I am trying to use CDN distribution but I cant seem to get it to work. It currently just displays them as links as oppose to the nav bar that can be seen when used on other sites.
<!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-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<title>Fictional Football Club</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="nav navbar-nav">
<ul>
<li>News</li>
<li>Matches</li>
<li>Table</li>
<li>Squad</li>
<li>Tickets</li>
</ul>
</div>
</div>
</nav>
<div class="container">
</div>
<!-- Optional JavaScript -->
<!-- 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.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>
</body>
</html>
The navbar structure is not Bootstrap 4. Read the Bootstrap 4 navbar docs. Bootstrap 4 is now beta.
https://www.codeply.com/go/4GM7ligFGu
<nav class="navbar navbar-light bg-light navbar-expand">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">News</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Matches</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Table</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Squad</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Tickets</a>
</li>
</ul>
</nav>
Related
I am working on a navbar and I need to align some part of it to the right:
This is what i have :
Also the collapse-navbar is not working , when I reduce the screen the collapse button appears but nothing happens when I click...
This is my codebase : Codebase
Here is a working example with Bootstrap, hope it is to any help:
.test {
color: white;
margin-left: 10px;
}
<!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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div id="app" class="container-fluid">
<nav class="navbar navbar-expand-md navbar-light bg-dark">
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<h1 class="test" href="#">Funds.</h1>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="test" href="#">Use funds for business </a>
</li>
<li class="nav-item">
<a class="test" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="test" href="#">Legal stuff</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
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/
I am new to django I want to create a responsive website im using django for it, the website works fine except for one thing when the website is switched to mobile view the navigation bar is not working.
This is my urls.py
from django.conf.urls import url
from app import views
urlpatterns =[
url(r'^$',views.index,name='index'),
url(r'^about/',views.about,name='about'),
url(r'^contact/',views.contact,name='contact'),
url(r'^portfolio_project1/',views.portfolio_project1,name='portfolio_project1'),
url(r'^portfolio_project2/',views.portfolio_project2,name='portfolio_project2'),
url(r'^portfolio_project3/',views.portfolio_project1,name='portfolio_project3'),
url(r'^resume/',views.resume,name='resume'),
url(r'^portfolio/',views.portfolio,name='portfolio'),
]
This is my header section
<header role="banner" class="banner clearfix" id="banner">
<div class="section-content">
<div class="branding clearfix">
<figure id="logo"><img src="{% static "images/logo.png" %}" alt="my logo" /></figure>
<h1>Sriram</h1>
<h2>Portfolio Website</h2>
</div>
</div>
Menu
</header>
<nav role="navigation" class="nav clearfix main-nav" id="nav">
<ul class="nav-menu">
<li class="menu-item">About</li>
<li class="menu-item">Resume</li>
<li class="menu-item">Portfolio
<ul class="sub-menu">
<li class="menu-item">Project 1</li>
<li class="menu-item">Project 2</li>
<li class="menu-item">Project 3</li>
</ul>
</li>
<li class="menu-item">Contact</li>
</ul><!--/.nav-menu-->
</nav>
This is my views.py
from django.shortcuts import render
from django.http import HttpResponse
def index (request):
return render(request,'index.html')
def about (request):
return render(request,'about.html')
def contact (request):
return render(request,'contact.html')
def portfolio_project1 (request):
return render(request,'portfolio_project1.html')
def portfolio_project2 (request):
return render(request,'portfolio_project2.html')
def portfolio_project3 (request):
return render(request,'portfolio_project3.html')
def resume (request):
return render(request,'resume.html')
def portfolio (request):
return render(request,'portfolio.html')
These are the scripts linked
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="{% static "js/vendor/jquery-1.12.0.min.js" %}"><\/script>')</script>
<script src="{% static "js/plugins.js" %}"></script>
<!-- Widowtamer -->
<script src="{% static "js/vendor/widowtamer-min.js" %}"></script>
<script src="{% static "js/main.js" %}></script>
I have tested the site without using django it works fine. But if i use django when i switch to mobile view the menu button is not working everything else works fine.
To solve this ...
in your main.html (other people choose to call it base.html) reference this Django template tag in the head tag session:
{% include "navbar.html" %}
and the navigation bar will appear on all your website session
Recommend watching this series for learning Django. https://www.youtube.com/playlist?list=PLEsfXFp6DpzTD1BD1aWNxS2Ep06vIkaeW
To make a nav bar with bootstrap
Add this starter Template to base.html
Next Add this to the top of the body
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>`
Source https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp
If you didn't find the starter template in this link
Then here is the code:
<!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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
When you're done Your code should look something like this:
<!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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>BASE</title>
</head>
<body>
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{% url 'link1' %}">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'link2' %}">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'link3' %}">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'link4' %}">Link 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'link5' %}">Link 5</a>
</li>
</ul>
</nav>
{% block content %}
Replace Me!
{% endblock %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I created an HTML "navbar.html" containing my navbar code
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Qina Smart Map</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href={%url "home"%}>Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href={%url "admin"%}>Admin</a>
</li>
<li class="nav-item">
<a class="nav-link " href={%url "about"%}>About</a>
</li>
</div>
</nav>
then I used this tag in my HTML files
{%include 'navbar.html'%}
my url.py
urlpatterns = [
url(r'^$', qinaschools.views.home, name='home'),
path('about/', qinaschools.views.about, name='about'),
url(r'^qinaschools_dataset/$', qinaschools_dataset, name='qinaschools'),
path('admin/', qinaschools.views.admin, name='admin'),
]
I created a two navigation bars using bootstrap.
<!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="style" href="css/main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>Klevin's</title>
</head>
<body>
<!-- ISLANDWIDE DELIVERY message -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-center" id="topmessage">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">ISLANDWIDE DELIVERY</a>
</li>
</ul>
</nav>
<!-- Actual navigation bar -->
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light" id="mainnavbar">
<!-- Brand -->
<a class="navbar-brand" href="/ecommercewebsite/index.php">Klevin's</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Shop
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Shoes</a>
<a class="dropdown-item" href="#">Handbags</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Offers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
<!-- Optional JavaScript -->
<!-- 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>
then I wanted to change the background color of the second navigation bar. So I put following code in main css file
body{
padding-top: 50px;
}
#mainnavbar{
background-color: #CC0000;
}
But it doesn't change the color. I'm doing this according to this tutorial video.
https://www.youtube.com/watch?v=C1phgYAzIfg&t=1066s
In his video it works correctly. But it doesn't work for me. I'm using a newer version of bootstrap. So not sure whether it is the reason.
Remove the bg-light. Since it uses an !important modifier it's overriding your CSS. You'll also want to use navbar-dark or navbar-light to give the Navbar content (links) a light or dark color.
<nav class="navbar navbar-expand-sm navbar-dark" id="mainnavbar"></nav>
#mainnavbar{
background-color: #CC0000;
}
Demo: https://www.codeply.com/go/gFgVhhsoRP
Replace your bg-light with navbar-light
<nav class="navbar navbar-expand-sm navbar-light" id="mainnavbar">
So I have this code below.
Using Bootstrap I would like to have this drop down on the left in the middle of the screen. https://screenshots.firefox.com/WKjwlW5eUiVdS0fO/null How would I do this?
Additional Question: How do I make the 3 lines bigger? Do I just make the navbar-toggler-icon bigger?
<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" type="text/css" href="css/bootstrap.css">
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-toggleable-md navbar-light bg-faded navbar-fixed-top">
<div class="container-fluid">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav">
<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="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Me</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- 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.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>
</body>
</html>
Using Bootstrap I would like to have this drop down that is currently on the left... in the middle of the screen. https://screenshots.firefox.com/WKjwlW5eUiVdS0fO/null How would I do this?
Additional Question: How do I make the 3 lines bigger? Do I just make the navbar-toggler-icon bigger?
Setting the left and right margin to auto might work. Try this! mx-auto - says margin on the x-axis (ie., left and right) is set to auto!
<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" type="text/css" href="css/bootstrap.css">
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-toggleable-md navbar-light bg-faded navbar-fixed-top">
<div class="container-fluid">
<button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#navbarNav">
<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="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Me</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- 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.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>
</body>
</html>
Hope this helps!
Bootstrap includes a flexbox grid system for building layouts. It’s based on a 12 column layout and has multiple tiers. It is basically a css class like any other. Bootstrap comes with these classes predefined.
For example:
<div class="col-lg-12">
This would take up all available screen space
</div>
Then all you have to do is center your content and you will end up with a div that takes up the area you want with content that is centered inside it.
The lg in this example stands for a large area, but there are several of these. They can be used in pairs to change the grid based on the available screen area. These col types are predefined and can be easily referenced.
Using this grid system is going to make whatever you create responsive. It is a joy to work with. I recommend you check it out.