I am trying to use data-bs-toggle. I am very new in using bootstrap. I am not sure if I am forgetting to add a library.
When I start typing data-bs the only ones that my autocomplete show me is data-bs-target and data-bs-popper and if I add data-bs-toggle does not work it's like is not included in the package.
My code:
header.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title>{% block title %}{% endblock%}</title>
</head>
<body>
{% block body %}{% endblock%}
</body>
</html>
index.html
{% include 'header.html' %}
{% block title %} Home {% endblock %}
{% block body %}
<div class="container">
<div class="row">
<div class="col md 12">
<div class="jumbotron p-3">
<h2>Manage <b>Student </b><button type="button" class="btn btn-success float-right"
data-bs-toggle="modal" data-bs-target="#mymodal">Add new Student</button></h2>
</div>
</div>
</div>
</div>
Not necessarily related to your auto-complete issues, but you have not properly included the Bootstrap libraries. Read through the Introduction and specifically the Starter template.
Your template should look something like the following:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>{% block title %}{% endblock%}</title>
</head>
<body>
{% block body %}{% endblock%}
<!-- bootstrap.js belongs down here ONCE, after ALL the content -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Related
In my VS Code editor when I code for a responsive web sites (for example - the below code), the output web page should be responsive for long/small/medium screen size(expectation) but the output web page is not as I have expected although I have included the Bootstrap CDN links in the head tag.
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- 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">
</head>
<body>
<div class="row">
<div class="col-md-6 col-sm-3" style="background-color:grey; border: 1px solid;">col-md-6</div>
<div class="col-md-3 col-sm-3" style="background-color:grey; border: 1px solid;">col-md-3</div>
<div class="col-md-3 col-sm-3" style="background-color:grey; border: 1px solid;">col-md3</div>
<div class="col-md-3 col-sm-3" style="background-color:grey; border: 1px solid;">col-md3</div>
</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 tried to make an responsive website using HTML, CSS, and Bootstrap and the code is above. I was expecting from it to be responsive for long/small/medium screen size but it is not responsive.
Use this 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://cdn.jsdelivr.net/npm/bootstrap#4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 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.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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://cdn.jsdelivr.net/npm/bootstrap#4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
There were problems connecting the css file to the project. If you specify styles inside the html file, through - everything works well. But if you refer to a project style file, many styles simply refuse to work.
css file:
.imgsize{
width: 350px;
height:350px;
}
html file:
{% load staticfiles %}
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/tren.css' %}">
<link rel="shortcut icon" href="{% static 'image/h.png' %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<title>Hello</title>
</head>
<body>
<div class="der">
<div class="container">
<div class="border border-success rounded bg-light text-dark">
<div class="ml-1">
<img class="imgsize" src="{% static 'image/1.jpg' %}" alt="Картинка"> //This does not work
</div>
</div>
</div>
</div>
</body>
</html>
https://i.stack.imgur.com/alEe3.png
I have a layout.html where I am setting the general layout for my project and then for each page I want to render different HTML based on the layout.html
For my home page I want to render a slider that provides a welcome message to the page, nice pictures etc, I only want this displayed on the home page.
The issue I am having is that when I I have {% include "slider.html" %} on my layout.html, the slider renders fine, but when I move it to my home.html which extends layout.html the slider is not rendered.
How can I do this so teh slider is only rendered when the user goes to home?
home.html
{% extends "layout.html" %}
{% include "slider.html" %}
{% block content %}
<div class="container clearfix">
<div class="heading-block topmargin-lg center">
<h2>My super blog</h2>
</div>
</div>
{% endblock %}
layout.html
{% load static %}
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="SemiColonWeb" />
<!-- Stylesheets
============================================= -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Raleway:300,400,500,600,700|Crete+Round:400i" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}" type="text/css"/>
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/swiper.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/dark.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/font-icons.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/animate.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/style-rtl-vars.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'app/content/responsive.css' %}" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Document Title
============================================= -->
<title>Super blog</title>
</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">
{% include "header.html" %}
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
{% block content %}
{% endblock %}
</div>
</div>
</section>
{% include "footer.html" %}
</div>
<script type="text/javascript" src="{% static 'scripts/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'scripts/plugins.js' %}"></script>
<script type="text/javascript" src="{% static 'scripts/functions.js' %}"></script>
</body>
slider.html
<section id="slider" class="slider-element slider-parallax swiper_wrapper full-screen clearfix">
<div class="slider-parallax-inner">
<div class="swiper-container swiper-parent">
<div class="swiper-wrapper">
<div class="swiper-slide dark" style="background-image: url('/static/images/typing-on-mac.jpg');">
<div class="container clearfix">
<div class="slider-caption slider-caption-center">
<h2 data-animate="fadeInUp">super blog</h2>
<p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">some text</p>
</div>
</div>
</div>
</div>
</div>
<i class="icon-angle-down infinite animated fadeInDown"></i>
</div>
</section>
You need to include it in a {% block %}, since otherwise, it is of course not included in the final content.
If you extend a template, then you can only override the blocks. All content not in the blocks, will be interpreted, but will not be put into the final response.
So you can for example include the content of the {% include %} part in:
{% extends "layout.html" %}
{% block content %}
{% include "slider.html" %}
<div class="container clearfix">
<div class="heading-block topmargin-lg center">
<h2>My super blog</h2>
</div>
</div>
{% endblock %}
I am trying to create a web app with flask. On each image I am adding descriptors underneath but for some images the descriptions are longer then others.
The image below is an example of my app running but as you can see the third image got shifted over and so the fourth image is now below that
full view of what's going on:
the pictures are the size I want but you can see how the longer text shifts the 3rd image,
here is the html (warning I know very little html )
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{{image_names}}
<hr>
{% for image_name in image_names %}
<img class="img-responsive" src=" {{url_for('send_image', filename=image_name)}}">
<p>Hi</p>
{% endfor %}
</body>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- <h1 class="page-header">Thumbnail Gallery</h1> -->
</div>
<!-- {{image_names}} -->
<hr>
{% for element in range(size) %}
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<img class="img-responsive" src=" {{url_for('send_image', filename=image_names[element])}}">
<p> {{test[element]}}</p>
<!-- grabbing from a dictionary <p> {{test2["bob"]}}</p> -->
</div>
{% endfor %}
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
</body>
</html>
I have an <audio> element that's seems to work fine. However, whenever I try to use the seeker, it just takes the audio back to the beginning. This is the HTML:
<audio id="audio-player" src="/music/You-Too-Much.mp3" type="audio/mp3" controls="controls"></audio>
I've searched online, but I can't seem to find a cause or solution for this. I need this fixed. Thanks.
Full HTML code:
{% extends 'base.html.twig' %}
{% block title %}
Welcome
{% endblock %}
{% block nav_head %} Havilah Radio {% endblock %}
{% block content %}
<div class="music-player">
<div class="row">
<div class="col-md-3">
<img class="cover" src="/img/album-art/HANILAH.jpg" alt="">
<div class="footer-song-info">
<h4>
You Too Much
</h4>
<h6>Unknown Artist</h6>
</div>
</div>
<div class="col-md-6">
<audio id="audio-player" src="/music/untitled05.mp3" type="audio/mp3" controls="controls"></audio>
</div>
</div>
</div>
{% endblock %}
The main code extends this base.html.twig:
<!DOCTYPE html>
<!--suppress HtmlUnknownTarget -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="theme-color" content="#9e1935">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock %} | Havilah Radio</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Fira+Sans' />
<!-- Bootstrap CSS -->
<link href="{{ asset('lib/bootstrap/css/bootstrap.css') }}" rel="stylesheet" type="text/css" media="all"/>
<!-- Font Icons -->
<link href="{{ asset('lib/iconsmind/iconsmind.css') }}" rel="stylesheet" type="text/css" media="all"/>
<!-- Extra CSS -->
{% block css %}{% endblock %}
<!-- Custom CSS -->
<link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css" media="all"/>
</head>
<body style="background: {% block body_background %}#fff {% endblock %}">
<div class="body">
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-nav">
<i class="icon-Align-Right icon"></i>
</button>
<a class="navbar-brand" href="/"><img src={{ asset('img/havilahradio-logo.png') }} />
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-nav">
</div>
</div>
</nav>
{% block content %}{% endblock %}
</div>
</body>
<!-- JQuery -->
<script src="{{ asset('lib/jquery/jquery-3.1.0.min.js') }}"></script>
<script src="{{ asset('lib/jquery/jquery.easing.1.3.js') }}"></script>
<!-- Bootstrap JS -->
<script src="{{ asset('lib/bootstrap/js/bootstrap.min.js') }}" ></script>
<script src="{{ asset('lib/bootstrap/js/bootstrap_select.min.js') }}" ></script>
<!-- Extra JS -->
{% block js %}{% endblock %}
<!-- Custom JS -->
<script src="{{ asset('js/app.js') }}"></script>
</html>