<!DOCTYPE html>
<html>
<head>
<title>GucciGang Website</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.css') }}">
</head>
<body>
<header>
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="/">Real Python (for the web!)</a>
<ul class="nav">
<li class="active">Home</li>
<li>Welcome</li>
<li>222</li>
</ul>
</div>
</div>
</header>
<div class="container">
{% block content%}
{% endblock %}
</div>
</body>
</html>
With the template.html above with Bootstrap, I expected my page to look like
but it actually looks like
Which part of my code is wrong? Am I missing something?
Just add navbar-nav class to your unordered list tag
<ul class="nav navbar-nav">
https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
Related
I am using Django and I have bootstrap4 loaded with min.css/js files included in my stylesheet references that are properly linked and yet my mobile toggle menu refuses to toggle when clicked.
My browser source shows that it has loaded these files without any errors so I am assuming I am missing a file that is required to use bootstrap toggle menus in Django.
{% load static %}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Flash Stacks</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.js' %}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<!--NAVIGATION-->
<header class="main-head">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">EXAMPLE APP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--COLLAPSIBLE CONTENT-->
<div class="collapse navbar-collapse" id="main-nav">
<!--LINKS-->
<ul class="nav navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href='#'>About</a>
</li>
<li class="nav-item">
<a class="nav-link" href='#'>Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href='#'>Products</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="page-header container-fluid">
<h1>Flash Card Stacks</h1>
</div>
</header>
<!--BODY CONTENT -->
<div class="content container-fluid">
{% block content%}
{% endblock %}
</div>
<!--FOOTER CONTENT-->
<div class="footer container-fluid">
<p>This is the footer of the webpage!</p>
</div>
</body>
</html>
first you have to check all html tags and other item;
i`m using layout page called home.blade.php .here is the code.
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Training Management</title>
<meta name="description" content="Free Bootstrap Theme by BootstrapMade.com">
<meta name="keywords" content="free website templates, free bootstrap themes, free template, free bootstrap, free website template">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,300|Raleway:300,400,900,700italic,700,300,600">
<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
{!! Charts::assets() !!}
</head>
<body>
<div class="loader"></div>
<div id="myDiv">
<!--HEADER-->
<div class="header">
<div class="bg-color">
<header id="main-header">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="home#">MOB<span class="logo-dec">ITEL</span></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="">Trainee Details</li>
<li class="">User Registration</li>
<li class="">Downloads</li>
<li class="">Certificate & Evaluation</li>
<li class="">Training Programs</li>
<li class="">Contact Us</li>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
</nav>
</header>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="banner-info text-center wow fadeIn delay-05s">
</div>
</div>
</div>
</div>
#yield('content')
</div>
<footer id="footer" >
<div class="container">
<div class="row text-center">
<p>© All Rights Reserved.</p>
<div class="credits">
</div>
</div>
</div>
</footer>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/custom.js"></script>
<script src="contactform/contactform.js"></script>
</body>
</html>
This layout need to use in a web page and it has extend by me but not working.here is the code.
`#extends('layouts.home')
#section('content')
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-6 col-md-offset-3">
<table class="table table-bordered">
<tbody>
<tr>
<td>Training ID</td>
<td>{{ $item['trainee_id'] }}</td>
</tr>
<tr>
<td>Name With Initials</td>
<td>{{ $item['trainee_name'] }}</td>
</tr>
<tr>
<td>Download Details</td>
<td><a class="btn btn-success" href="BankExport/{{ $item->trainee_id }}">See Here</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
#endsection`
This the screenshot what um getting.
This is the type of design um expexting
put all the css and js under the public directory and then
change all the js and css call like this
<link rel="stylesheet" type="text/css" href="{{ public_path('css/jquery.bxslider.css') }}">
It seems that your "extends" link is not correct, based on what the question says. You say that "i'm using layout page called home.blade.php," yet in your code you extend a page called "layouts.home" (#extends('layouts.home'))!
You might need to make sure you are actually calling #extends('home.blade.php').
If this doesn't work, and since there aren't any errors on other pages, can we see the framework for those pages to compare with this one?
Hope this helps!
My project directory structure:
myapp/
index.html
jquery-2.1.1.js
css/
bootstrap.min.css
img/
*
js/
bootstrap.min.js
My index.html 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.0">
<title>First Bootstrap</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<script src="jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
When I open this in any browser I see:
But my <navbar> element was literally cut-n-pasted from W3Schools where it looks like this:
So:
Have I misconfigured Bootstrap somehow? If so, where did I go wrong?
I want to make sure that my app is responsive; have I configured bootstrap-responsive.css correctly? Here I'm confused because I don't have an assets directory anywhere in my project...
This is working fine as per the snippet below. Note that I am referencing both jQuery and Bootstrap from CDN. This is the recommended way to do it as it can make your website load a little faster.
Not sure what the bootstrap-responsive.css file is though, but it's certainly not needed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
I am newbie to bootstrap, trying to get a make a template.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[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.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Tech Site
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
Top image is what i wanted, but, what i am getting is the below output,
As one can see in the image, the links are in the same line as the brand name, which i do not want, it should be in the next line.
Style like this.
<ul class="nav navbar-nav">
to
display:block;
The Twitter Bootstrap API tells me to add my css to add padding to the body element in between the bootstrap css and the bootstrap-responsive css. I have done so in the _master file, but it doesn't seem to be adding the padding still.
Am I reading this incorrectly or could something else potentially be wrong?
My _master head section
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Bootstrapped</title>
<link href="#Url.Content("~/css/bootstrap.css")" rel="stylesheet" />
<link href="#Url.Content("~/css/skin.css")" rel="stylesheet" />
<link href="#Url.Content("~/css/bootstrap-responsive.css")" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<div>
#RenderBody()
</div>
</div>
<script src="~/js/bootstrap.js"></script>
</body>
CSS
body {
padding-bottom: 40px;
}
A visualization of the body padding not working (scrolled all the way to the top)
What you need to do is to give a padding-top: 40px to the div which contains the body.
Ex: Fiddle
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<div style="padding-top: 40px">
some content 1<br />
some content 2<br />
some content 3<br />
some content 4<br />
</div>
</div>
I think you might want to use padding-top: 40px instead?