I am new to bootstrap and I'm using carousel for the first time however I'm having issues with styling. I tried to resize my image using CSS however there have been no changes. I will attach my code below. I am following a YouTube tutorial.
{% load static %}
<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
</html>
I'm sure I added bootstrap properly as well as the CSS file so I am unsure what the issue could be. I've also looked around on stack and all the solutions did not work for me.
I think you have used wrong element class name instead of .c-item use .carousel-item
.carousel-item{
height: 280px;
}
.c-img{
height: 100%;
object-fit: cover;
filter: brightness(0.6);
.carousel-item{
height: 280px;
}
.c-img{
height: 100%;
object-fit: cover;
filter: brightness(0.6);
}
<html lang="en" style="height: 100%;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SpendingTracker | {% block title %}{% endblock %}</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link href="{% static 'css/style.css' %}" rel="stylesheet" type="text/css" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
<div id="home-carousel" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#home-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#home-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#home-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.discover-the-world.com/app/uploads/2018/08/norway-northern-tromso-surrounds-with-aurora-istk.jpg" class="d-block w-100 c-img" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="https://imageio.forbes.com/specials-images/imageserve/63a32fa0d0e96ccdb4b9f8f3/Tromso-Aurora-Panorama-12-34-38-PM/960x0.jpg?format=jpg&width=960" class="d-block w-100 c-img" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="https://media.timeout.com/images/105731796/750/422/image.jpg" class="d-block w-100 c-img" alt="Slide 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#home-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#home-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
</html>
First things first, it is .carousel-item and not .c-item.
Next, please make sure that your CSS file is being used by the html file.
Replace
<link href="{% static 'css/style.css' %}" rel="stylesheet" type="text/css" >
With this tag
<link href="css/style.css" rel="stylesheet">
And push this link tag to the end of your head tag (your styles should always override other styles).
Keep in mind that this solution will work if you have a folder called css containing the file style.css (not styles.css) at the same level of the html file.
Regards
Related
I want to implement a carousel and for that I referred to the documentation for it in Bootstrap v5.1. Though the code is showing the carousel and is working but the slides are changing statically and I want to add the sliding effect in the carousel while moving the slides with arrows. Please refer some resources to learn that. Or in case something is wrong with my code then here it is:
<!-- CSS bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- JS bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>…..</h2>
</div>
<div class="carousel-item">
<h2 >…</h2>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</section>
Here:
demo: https://codesandbox.io/s/demo-slides-utnot?file=/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous"
/>
</head>
<body>
<h1>
<div
id="carouselExampleControls"
class="carousel slide"
data-bs-ride="carousel"
>
<div class="carousel-inner">
<div class="carousel-item active">
<img
src="https://i.ibb.co/cvpntL1/hats.png"
class="d-block w-100"
alt="..."
/>
</div>
<div class="carousel-item">
<img
src="https://i.ibb.co/px2tCc3/jackets.png"
class="d-block w-100"
alt="..."
/>
</div>
<div class="carousel-item">
<img
src="https://i.ibb.co/0jqHpnp/sneakers.png"
class="d-block w-100"
alt="..."
/>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleControls"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#carouselExampleControls"
data-bs-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</h1>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"
></script>
</body>
</html>
I solved this by adding the custom transition in CSS.
.carousel-item {
transition: transform .6s ease-in-out;
}
Collapse is not working when I click on the toggle button. Here's my code. What changes do I need to make to get this working?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Project Prototype</title>
</head>
<body>
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">About</h5>
<p class="text-muted">Toggleable via the navbar brand.</p>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="movie-cinema-svgrepo-com.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
Project
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
</body>
</html>
You need to add Bootstrap JavaScript bundle.
Place the following <script> near the end of your pages, right before the closing </body> tag.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
JavaScript bootstrap plugin missing in your code. You've to include both the plugins and dependency,bootstrap.bundle.js and bootstrap.bundle.min.js.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Just add the above script☝️
I'm learning bootstrap these days. I am developing a main page. But the carousal is not working. Please check the code and tell me which thing i'm missing in my code. I am just copy pasting the code of carousal from w3school. I don't know where i am missing. It'll be great if somebody can help me in this.
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="Solupo_h.png" width="500" height="180" class="d-inline-block align-top" id="header" alt="top header" loading="lazy" >
</a>
</nav>
<div id="ct">
<div class="corner "id="left_top"></div>
<div class="corner" id="left_bottom"></div>
<div class="corner" id="right_top"></div>
<div class="corner" id="right_bottom"></div>
<span>Winston Churchill</span>
<blockquote>
<p><i>“Success consists of going from failure to failure without loss of enthusiasm.” </i></p>
</blockquote>
</div>
<div class="container">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="654-500x3002.jpg" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="654-500x3002.jpg" alt="Chicago">
</div>
<div class="carousel-item">
<img src="654-500x3002.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You may not have downloaded the bootstrap stylesheet or javascript assets. The code is fine since you mentioned that you copy pasted the code directly from w3schools.
You need the following files downloaded and added to your folder:
css/bootstrap.min.css
js/bootstrap.min.js
OR
You can just paste the following in your <head> tag:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
And you can add the following at the end of your <body> tag:
<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>
Hope that helps!
i have manually downloaded and added the bootstrap library into my code and trying to click my bootstrap navbar-toggler button it is not working, but when i try to add the CDN Bootstrap Librabry it is working fine please somebody help me ho do i solve this issue for manual downloaded bootstrap library
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Bootstrap Navbar</title>
<link rel="stylesheet" href="font_awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/#popperjs/core/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<img src="img/logo/logo.png" width="150px" height="auto" style="border: 1px solid lightgrey; border-radius: 3px"></img>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navber-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu 1</a>
</li>
</ul>
</div>
</nav>
<script></script>
</body>
</html>
Try to add the jquery, proper & bootstrap js file at the end of the "body"
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Bootstrap Navbar</title>
<link rel="stylesheet" href="font_awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<img src="img/logo/logo.png" width="150px" height="auto" style="border: 1px solid lightgrey; border-radius: 3px"></img>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navber-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu 1</a>
</li>
</ul>
</div>
</nav>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/#popperjs/core/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script></script>
</body>
</html>
download files form here:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
put anywhere in your project (generally where js's and css's are kept)
provide a path to them in html via script tag :
<script src='<absolutepath>/<file_name>'> </script>
If you are using Bootstrap 5 use this: data-bs-toggle data-bs-target and insert into the button HTML tag like so:
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
html, body {
margin:0;
padding:0;
}
.nav {
margin:0px;
}
.navbar{
margin-bottom:0px;
}
.header{
margin:0px;
padding:0px;
display:block;
vertical-align:middle;
width:100%;
}
<! 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">
<meta name="description" content="">
<meta name="author" content="">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="css.css" rel="stylesheet" type='text/css'>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
<!--font family-->
<link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
</head>
<body >
<!--Navigation-->
<nav class="navbar navbar-inverse navbar-static-top">
<div class="conatiner-fluid">
<!--page scroll button for -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target= "#myNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-scroll">Website</a>
</div> <!--page scroll button-->
<div>
<div class="collapse navbar-collapse" id="#myNavbar">
<ul class="nav navbar-nav navbar-right" id="#myNavbar">
<li class="hidden"></li>
<li class="page-scroll">Home</li>
<li class="page-scroll">About</li>
<li class="page-scroll">Services</li>
<li class="page-scroll">Contact</li>
</ul>
</div> <!--ul-li-->
</div> <!--navbar collapse-->
</div> <!--container-fluid-->
</nav>
<!--Navigation-->
<!--Header-->
<header >
<div class="container" >
<div class="row">
<img src="work.jpg" class="img-responsive" >
</div>
</div>
</header>
<!--Header-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</body>
</html>
I'm coding my first website there's some unwanted white space around the header image that won't go away.
I've checked all the usual solutions like setting margin and padding:0;display: block and width:100% but they don't seem to be working.
Could somebody please take a look at the code and let me know what I'm doing wrong?
Replace the
<div class="container"> to <div class="container-fluid">
and give your image
width= 100%.
Something like:
<style>
.width_full {
width: 100%;
}
</style>
<div class="container-fluid">
<div class="row">
<img src="work.jpg" class="img-responsive width_full">
</div>
</div>