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>
Related
I am trying to center the content of a column using Bootstrap. This is my current code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<!-- CODE -->
<header>
<div class="container-fluid">
<div class="row">
<!-- LEFT -->
<div class="col-md-6 p-md-5 p-4" style="background-color: lime;">
<div> <!-- THIS SHOULD BE IN THE CENTER -->
<h1>Welcome</h1>
<h2>to my web!</h2>
</div>
<div> <!-- THIS SHOULD BE IN THE BOTTOM -->
<p>Icons</p>
</div>
</div>
<!-- RIGHT -->
<div class="col-6 d-md-block d-none" style="background-color: red"></div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
I have tried using d-flex justify-content-center, as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<!-- CODE -->
<header>
<div class="container-fluid">
<div class="row">
<!-- LEFT -->
<div class="col-md-6 p-md-5 p-4 d-flex justify-content-center" style="background-color: lime;">
<div> <!-- THIS SHOULD BE IN THE CENTER -->
<h1>Welcome</h1>
<h2>to my web!</h2>
</div>
<div> <!-- THIS SHOULD BE IN THE BOTTOM -->
<p>Icons</p>
</div>
</div>
<!-- RIGHT -->
<div class="col-6 d-md-block d-none" style="background-color: red"></div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
But this is not working...
How can I do to put the elements correctly inside the column?
You can add “ align-items-center” to the class, if that still doesn’t work, make sure you’re not adding different margins to left and right of the section, but justify-content-center and align-items-center will work fine
Adding d-flex flex-column h-100 to the child, with an align-items-center solves the scenario.
I want a specific display depending on whether I have an image or not in a row bootstrap.
I want when I have an image and text content, I can have in the same row for a column size 4 my image and right my text content with a column size of 8
enter image description here
According to the display below and if the image is not there I can have instead of the image the content.
<div class="container ">
<div class="row ">
<div class="col-md-4"><img src="https://via.placeholder.com/150/b0f7cc" title="picture" style="width:100px;"></div>
<div class="col-md-8">
<div>
textdffjjfjfjfj
</div>
</div>
</div>
</div>
How can I do it
use align-items-center as class in parent div. here is the snippet
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container ">
<div class="row align-items-center">
<div class="col-4"><img src="https://via.placeholder.com/150/b0f7cc" title="picture" style="width:100px;"></div>
<div class="col-8">
<div>
textdffjjfjfjfj
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
use align-items-center as class in parent div. here is the snippet
and if you want to remove image then you have to add style of some specific height so it will align all items in center according to the height.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container ">
<div class="row align-items-center">
<div class="col-4"><img src="https://via.placeholder.com/150/b0f7cc" title="picture" style="width:100px;"></div>
<div class="col-8">
<div>
textdffjjfjfjfj
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
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>
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 have started to learn Bulma. I want to minimize container's (grey area in the picture) size in x-axis so I can embed elements into.Couldn't find any related content in documents. Here is my source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" it>
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">
</head>
<body>
<section class="hero is-medium">
<div class="hero-body has-background-danger">
<nav class="navbar has-background-primary">
<div class="container has-background-grey-light is-fluid ">
</div>
</nav>
</div>
</section>
</body>
</html>
This is the sample view of this code:
You can wrap it in a column class and then adjust its size. (ex. is-half)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" it>
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">
</head>
<body>
<section class="hero is-medium">
<div class="hero-body has-background-danger">
<div class="columns is-centered">
<div class="column is-half">
<nav class="navbar has-background-primary">
<div class="container has-background-grey-light is-fluid">
</div>
</nav>
</div>
</div>
</div>
</section>
</body>
</html>
Result: