Just beginning with Bootstrap and have had some success. However, bootstrap classes aren't rendering. What am I missing here?
<div class="position-absolute bottom-0 end-0 border border-dark">
However, using normal CSS styling works as expected.
<div style="position:absolute; bottom: 0; right: 0; border-style: solid;">
See full html code here:
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>{{ title }}</title>
</head>
<body>
<!-- <div id="background-div" style="margin-left:10px; margin-right: 10px;"> -->
<div id="background-div" class="position-relative mx-10">
<div id="title-div">
<h1>Title</h1>
<h3>One-liner goes here</h3>
<hr>
</div>
<div id="content-div" style="max-width: 66%;">
<div class="row">
{% block content %}
{% endblock %}
</div>
</div>
<!-- <div style="position:absolute; bottom: 0; right: 0; border-style: solid;"> -->
<div class="position-absolute bottom-0 end-0 border border-dark">
<div id="legend-div">
legend goes here
</div>
<div id="scale-bar-div">
scalebar goes here
</div>
</div>
</div>
</body>
</html>
While using Flask, if you are rendering HTML templates side by side (by running flask application) , you can try a hard refresh by pressing Ctrl+Shift+R (windows) because while using Flask changes in HTML or CSS don't take place immediately even after simple refresh!
OR
You try inspecting your HTML page in the developer's tool.
Opening developer's tool: Ctrl+Shift+J or Right click<inspect page
You can try seeing what CSS have been applied or not!
Found it! The CDN that I used was wrong. For reference, I was using the found on W3Schools (link).
The working CDN to use is this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
I realise that this doesn't fix the bootstrap styling (as the classes do not produce the same result as the style attributes), but the main problem of bootstrap simply not working is fixed.
If you're just getting started with Bootstrap, it might be best to start with a current version. v5 is currently in Beta but appears to be quite stable and workable https://getbootstrap.com/
Note, in your answer you are still using an outdated BS, if you want to use v4 start here: https://getbootstrap.com/docs/4.6/getting-started/introduction/
There are a lot of bug fixes from 4.0 > 4.6
Related
I have a problem My web app can't recognize the icons that I put with font-awesome, I dont know why. I have in my index.html in the header this:
<link rel="stylesheet" href="\~/lib/font-awesome/css/all.min.css"/>
<link rel="stylesheet" href="\~/lib/font-awesome/css/fontawesome.min.css"/>
Also have in my index.html:
<script src="\~/lib/font-awesome/js/all.min.js"></script>
<script src="\~/lib/font-awesome/js/fontawesome.min.js"></script>
In the component where I call the icon I have:
<div class="row g-3 ">
<div class="col-auto"><i class="fa-solind fa-circle-user"></i></div>
</div>
Is someone knows, why it does not work? I've tried everything and it doesn't work
I'm not sure which version you're using and if you are only allowed to use free icons.
The icons you use fa-solind and fa-circle-user cannot be found. Below an example with a free icon using version 5.15.4. Maybe it helps for you to find where you go wrong.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<div class="row g-3 ">
<div class="col-auto"><i class="fas fa-user"></i></div>
</div>
I am learning web development and i need advice.
I have bootstrap card and i want to align the minus-square icon from font awesome to right but nothing work.
Do you have some ideas?
Thanks for everything! I am also sending picture to good imagine.
if you are using bs4, you could use the float-right class.
Demo working snippet:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card">
<div class="card-body">
Basic card
<i class="some-fa-icon float-right">♠</i>
</div>
</div>
</body>
</html>
Please note that instead of the icon I have used a html unicode character and mentioned some-fa-icon class which would be replaced by your actual font awesome classes.
Hi i am new to bootstrap i am facing a problem here is my code
<!DOCTYPE html>
<head>
<title>Bootstrap Progress Bar</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body bgcolor="red">
<p>Progress Bar</p>
<div class="container">
<div class="progress bg-danger">
<div class="progress-bar bg-success text-center" style="width:77%;">11
</div>
</div>
</div>
</body>
</html>
i am trying to change background colour with
<body bgcolor="red">
but i don't know why this code is not working only working with inline css
style="background-color:red;"
is there any solution?
From https://getbootstrap.com/docs/4.3/getting-started/introduction/
Bootstrap requires the use of the HTML5 doctype
From https://www.w3schools.com/tags/att_body_bgcolor.asp
The bgcolor attribute is not supported in HTML5. Use CSS instead.
So basically if you are using bootstrap, you need to define the background color in css as you are bound to use html5 doctype (which does not support bgcolor attribute of the body tag).
Hope this helps you to understand your situation a bit better.
I've been trying to load a simple html page with a carousel but the carousel does not fit the screen. Here is a screenshot:
Html page
And below is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Carousel / Slider</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- My Custom CSS -->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="my-slider"class="carousel slide" data-ride="carousel">
<!-- Indicators dot nav -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/apple.jpg" alt="Fruits"/>
<div class="carousel-caption">
<h1>Assorted Fruits</h1>
</div>
</div>
</div>
<!-- Controls Next Prev buttons -->
</div>
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I don't know what is making the carousel to not fit the screen. I'm just beginning to learn frontend so if anyone could give a detailed explanation, I would be grateful.
EDIT: This is what it looks like if I add more than one picture to the carousel: The same page
Here is the working design.
You have missed a lot of code due to which it makes unworkable and also I didn't see the code for the second image. Rule is you will have to include all the images inside its respective class="item".
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="one.jpg" alt="...">
</div>
<div class="item>
<img src="two.jpg" alt="...">
</div>
</div>
This example was using data-attributes (data-ride="carousel"). You can also achieve this using Java script by calling carousel class manually $('.carousel').carousel()
Important Note : Always include Jquery before the bootstrap.js(or any library) file to avoid any bugs.
you html seems invalid the scripts tags should be on the head tag close to your stylesheet, another thing that that you forgot to close the head and open de body
To learn more about web development I am trying to make a webapp.
My first challenge is working out how to interface Django, Bootstrap and custom css.
I am trying to create a nav bar consisting of an image where I can overlay a profile image, a link to your account settings etc. I would like it to look like the following image:
Essentially it would be a responsive nav bar where the height is set at say 200px and the width is always 100% of your browser window.
I have got my custom css as below:
.wide {
width:100%;
height:100%;
height:calc(100% - 1px);
height:200px;
background-size:cover;
}
And I have tried to interface this with the HTML below:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load static %}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/mapvpage/style.css">
</head>
<body>
<div class="wide">
<img src="{% static "mapvpage/BananaFarm.jpg" %}" alt="My image"/>
<div class="col-xs-5 line"><hr></div>
<div class="col-xs-2 logo">Logo</div>
<div class="col-xs-5 line"><hr></div>
</div>
</body>
</html>
I have got the image into my page. However I cannot work out how to change the image size in any way. I am also a bit confused as to how custom CSS interacts with Bootstrap and Django. Can I just use a mix of Bootstrap and custom CSS as and when I want for different elements?
Many thanks for any help, I have been working on this for a while and getting nowhere so would appreciate some guidance!
Update:
CSS:
#header {
background-image:url("paper.gif");
max-width:100%;
max-height:auto;
}
HTML:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load static %}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="{% static "mapvpage/style.css" %}">
</head>
<body>
<div class="row" id="header">
<div class="col-md-3 col-md-offset-9">
<img src="{% static "mapvpage/BananaFarm.jpg" %}" alt="My image"/>
</div>
</div>
</body>
</html>
Note I loaded the CSS stylesheet in a different way (as suggested in the other answer). It was working before (as I tested it with simple font sizes etc) so not sure if that was necessary.
First of all I will answer your question about mixing things.
When you use Django, this means that you have a Django application that renders some html and sends it to the client to display it in a browser. This html, uses bootstrap in order to give a consistent and responsive style. What bootstrap does is to apply some css to your html. However, if the functionalities provided by bootstrap are not enough, you can always include your own custom css and there is no problem with that.
About your header, I would do it having a bootstrap row with a background image and a col with padding to include the image:
<div class="row" id="header">
<div class="col-md-3 col-md-offset-9">
<img src="{% static "mapvpage/BananaFarm.jpg" %}" alt="My image"/>
</div>
</div>
Then, you would need to add the background image of the header to the header div:
#header {
background-image:url("paper.gif");
}
You can easily find some more properties to add to the header css in order to center the image, expand it to fill the whole div...