I'm currently studying Bootstrap 4 and was creating a Bootstrap 4 template for my personal study. However, the following code creates a left to right scrollbar on the website when you look at in the browser.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Practice</title>
<meta name="viewport" content="wdith-device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<style>
.Box{padding: 60px 10px; background: #ddd}
.Box:nth-child(even){background: #eee;}
h1, h2{margin: 30px 0;}
.container-fluid, .container{max-width:1400px;}
.carousel-indicators li {width: 10px; height: 10px; border-radius: 100%;}
/* .navbar-brand{position: relative;}
.custom-nav{position: absolute;}*/
</style>
</head>
<body>
<!-- MODAL POPUP -->
<div class="modal fade" id="modalExample">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title"> Modal Title </h2>
<button class="close" type="button" data-dismiss="modal">X</button>
</div>
<div class="modal-body">
<p>"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
</div>
</div> <!-- end .modal-content -->
</div> <!-- end .modal-dialog -->
</div> <!-- end .modal -->
<!-- MODAL END-->
<nav class="navbar navbar-expand-lg navbar-light bg-light row">
<a class="navbar-brand col-1 border border-primary" href="#">Navbar</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse col-11 custom-nav border border-primary" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">Tab 1</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown Tab</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div></li>
<li class="nav-item"><a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Tab 2</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="carousel slide" id="ExampleSlide" data-ride="carousel" data-interval="1000">
<ol class="carousel-indicators">
<li data-target="#ExampleSlide" data-slide-to="0" class="active"></li>
<li data-target="#ExampleSlide" data-slide-to="1"></li>
<li data-target="#ExampleSlide" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="1.png">
<div class="carousel-caption"><h5>Image 1</h5></div>
</div>
<div class="carousel-item">
<img class="w-100" src="2.png">
<div class="carousel-caption"><h5>Image 2</h5></div>
</div>
<div class="carousel-item">
<img class="w-100" src="3.png">
<div class="carousel-caption"><h5>Image 3</h5></div>
</div>
</div>
<a class="carousel-control-prev"href="#ExampleSlide" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next"href="#ExampleSlide" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
<div class="jumbotron jumbotron-fluid row">
<div class="offset-1 col-10">
<h1 class="display-1">Heading 1</h1>
<p class="h1">"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
<p class="lead">Stranded. Yes, she was now the first person ever to land on Venus, but that was of little consequence. Her name would be read by millions in school as the first to land here, but that celebrity would never actually be seen by her. She looked at the control panel and knew there was nothing that would ever get it back into working order. She was the first and it was not clear this would also be her last.</p>
</div>
</div>
<div class='container'>
<!-- ACCORDION -->
<div class="card-group" id="exampleAccordion">
<div class="card">
<div class="card-header text-white bg-primary">
<h3 class="card-title" data-target="#card-1" data-toggle="collapse">Accordion Example 1</h3>
</div>
<div class="collapse" id="card-1">
<div class="card-body">
<p>"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
</div>
</div>
</div>
</div>
<!-- ACCORDION END -->
<!-- Accordion은 기본적으로 열리고 닫히는 dropdown과 비슷한 기능을 가진 element라고 보면 된다. -->
<!-- Accordion은 collapse를 사용하여 만든다. -->
<div class="card-deck">
<div class="card">
<div class="card-header text-white bg-primary">
<h1>Heading 1</h1>
</div>
<div class="card-body">
<p>"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
<p>Stranded. Yes, she was now the first person ever to land on Venus, but that was of little consequence. Her name would be read by millions in school as the first to land here, but that celebrity would never actually be seen by her. She looked at the control panel and knew there was nothing that would ever get it back into working order. She was the first and it was not clear this would also be her last.</p>
</div>
<div class="card-footer">
<p>More Info</p>
</div>
</div>
<div class="card">
<div class="card-header text-white bg-danger">
<h1>Heading 1</h1>
</div>
<div class="card-body">
<p>"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
<p>Stranded. Yes, she was now the first person ever to land on Venus, but that was of little consequence. Her name would be read by millions in school as the first to land here, but that celebrity would never actually be seen by her. She looked at the control panel and knew there was nothing that would ever get it back into working order. She was the first and it was not clear this would also be her last.</p>
</div>
<div class="card-footer">
<p><span data-toggle="modal" data-target="#modalExample">More Info</p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script>
$(".nav li a").on("click", function(){
$(".nav li a").removeClass("active");
$(this).addClass("active");
});
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
$('.carousel').carousel({
pause: false,
});
</script>
</body>
</html>
I can't find the reason why this might be... Does anybody know why this is happening? I want the web page to be just 100% on the screen, not having to scroll from left to right.
https://jsfiddle.net/8wvszpqa/
*edit: The scrollbar I'm meaning is one the picture below:
I am not sure about your issue but tryin to help. Remove those codes from your script to get rid of the bar.
<div class="container">
<div class="carousel slide" id="ExampleSlide" data-ride="carousel" data-interval="1000">
<ol class="carousel-indicators">
<li data-target="#ExampleSlide" data-slide-to="0" class="active"></li>
<li data-target="#ExampleSlide" data-slide-to="1"></li>
<li data-target="#ExampleSlide" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="1.png">
<div class="carousel-caption">
<h5>Image 1</h5>
</div>
</div>
<div class="carousel-item">
<img class="w-100" src="2.png">
<div class="carousel-caption">
<h5>Image 2</h5>
</div>
</div>
<div class="carousel-item">
<img class="w-100" src="3.png">
<div class="carousel-caption">
<h5>Image 3</h5>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#ExampleSlide" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#ExampleSlide" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
Related
Please help with this code.
I have three items and I want when I press next or previous it passes to an another item but it didn't work it stays fixed at the item 1. I already compared my code with many other codes and it seems to me right.
It's a simple carousel with two buttons next and previous but nothing happened when I press them
'''
<div id="featured-products-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target= "#featured-products-carousel" data-slide-to="0" class="active" ></li>
<li data-target= "#featured-products-carousel" data-slide-to="1" ></li>
<li data-target= "#featured-products-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active image-container">
<div class="carousel-placeholder ">
</div>
<div class="container">
<div class="carousel-caption text-left">
<h2>Product 1.</h2>
<p>Your product description here.</p>
<p>
<a class="btn btn-lg btn-primary" href="#service-1" role="button">
Learn more..
</a>
</p>
</div>
</div>
</div>
<!--item-->
<div class="carousel-item ">
<div class="carousel-placeholder ">
</div>
<div class="container">
<div class="carousel-caption">
<h2>Product 2.</h2>
<p>Your product description here.</p>
<p>
<a class="btn btn-lg btn-primary" href="#service-2" role="button">
learn more..
</a>
</p>
</div>
</div>
</div>
<!--item-->
<div class="carousel-item ">
<div class="carousel-placeholder">
</div>
<div class="container">
<div class="carousel-caption text-right">
<h2>Product 3.</h2>
<p>Your product description here.</p>
<p>
<a class="btn btn-lg btn-primary" href="#service-3" role="button">
Learn more..
</a>
</p>
</div>
</div>
</div>
<!--item-->
<a class="carousel-control-prev" href="#featured-products-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
</span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#featured-products-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>
<!--carousel-->
'''
[![enter image description here][1]][1]
I'm guessing you are using Bootstrap version 5?
If so, a few things to check:
In the Bootstrap carousel example, the carousel uses data-bs-slide-to = "1" on the next button your one is data-slide-to="1", it's missing the 'bs' and that's the same with data-bs-ride and data-ride.
Check you correctly included the necessary Bootstrap JS file
I want to have a footer still at the end of the page.
Teoretically, it's working, but if I shrink the width of browser, the footer will go a little bit higher from the real end of the page.
That means, that I have some free background space under the footer - I don't want that.
Fullscreen of my page - no problem with footer
Shrinked page almost to half - problem with footer
Mobile shrinked - no problem
Here is the html code:
body
{
background-color: black;
}
.navbar
{
background-color: black;
}
.nav-pills .active
{
/* FARBA AKTÍVNEHO TABU V NAVIGÁCII A JEHO ZAOBLENIE */
background: linear-gradient(to bottom, #ffbb59 0%, #ff654d 100%);
border-radius: 2%;
}
.row.first-row {
margin-top: 1em;
margin-right: 4em;
margin-left: 4em;
}
h4.white
{
color: white;
}
#tl
/* TLAČIDLÁ "What I will learn?" */
{
margin-bottom: 1em;
margin-top: 0.5em;
}
/* info SÚ INFORMÁCIE O AUTOROVI V BIELOM PÁSE */
.info
{
margin-top: 3em;
padding-top: 2em;
padding-bottom: 2em;
margin-bottom: 130px;
}
.info p
{
padding-top: 0.2em;
}
footer
{
}
#media screen and (max-width: 768px)
{
div.col-md-4
{
margin-bottom: 1em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CONFT</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style/style_index.css">
<link rel="shortcut icon" href="images/logo_tab_icon.png" type="image/x-icon">
<script>
$(function ()
{
$('[data-toggle="popover"]').popover()
})
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="logo" style="width:50px;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav nav nav-pills">
<li class="nav-item active">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About author</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CCNA 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CCNA 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="popover" title="CCNA 3"
data-content="This course is already in progress. Stay tuned.">CCNA 3</a>
</li>
</ul>
</div>
</nav>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/gradient_bg.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1 class="display-1">Welcome to CONFT</h1>
<p>Drill your knowledge on your way to get CCNA certification.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/abstract_network.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1 class="display-2">Your job is on demand</h1>
<p>Networking field still need more and more skilled people. Join them!</p>
</div>
</div>
<div class="carousel-item">
<img src="images/programming.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1 class="display-2">Programming in networking</h1>
<p>If you know programming, you can apply a job in this field too - because of need of automation.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="row first-row">
<div class="col-md-4">
<div class="col-md-12 text-center" style="border-radius: 5px; background: linear-gradient(to bottom,#ffbb59 0%, #ff654d 100%">
<h1 class="text-center display-4 text-white" style="color: black;">CCNA 1</h1>
<h4 class="white text-center">Introduction to Networks</h4>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-outline-light btn-lg" id="tl" data-toggle="modal" data-target="#myModal1">What will I learn?</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">CCNA 1 v7.0</h4>
</div>
<div class="modal-body">
<p>The first course in the CCNA curriculum introduces the architectures, models, protocols, and networking elements that connect users,
devices, applications and data through the Internet and across modern computer networks – including IP addressing and Ethernet fundamentals.
</p>
<a class="btn btn-dark" href="#" role="button">Start learning now!</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="col-md-12 text-center" style="border-radius: 5px; background: linear-gradient(to bottom, #ffbb59 0%, #ff654d 100%">
<h1 class="text-center display-4 text-white" style="color: black;">CCNA 2</h1>
<h4 class="white text-center">Switching, Routing, and Wireless Essentials</h4>
<button type="button" class="btn btn-outline-light btn-lg" id="tl" data-toggle="modal" data-target="#myModal2">What will I learn?</button>
<!-- Modal -->
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">CCNA 2 v7.0</h4>
</div>
<div class="modal-body">
<p>The second course in the CCNA curriculum focuses on switching technologies and router operations that support small-to-medium business networks
and includes wireless local area networks (WLAN) and security concepts. Students learn key switching and routing concepts.
They can perform basic network configuration and troubleshooting, identify and mitigate LAN security threats, and configure and secure a basic WLAN.
</p>
<a class="btn btn-dark" href="#" role="button">Start learning now!</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="col-md-12 text-center" style="border-radius: 5px; background: linear-gradient(to bottom, #ffbb59 0%, #ff654d 100%">
<h1 class="text-center display-4 text-white" style="color: black;">CCNA 3</h1>
<h4 class="white text-center">Enterprise Networking and Security</h4>
<button type="button" class="btn btn-outline-light btn-lg" id="tl" data-toggle="modal" data-target="#myModal3">What will I learn?</button>
<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">CCNA 3 v7.0</h4>
</div>
<div class="modal-body">
<p>The third course in the CCNA curriculum describes the architectures and considerations related to designing, securing, operating,
and troubleshooting enterprise networks. This course covers wide area network (WAN) technologies and quality of service (QoS) mechanisms
used for secure remote access along with the introduction of software-defined networking, virtualization, and automation concepts
that support the digitalization of networks. Students gain skills to configure and troubleshoot enterprise networks,
and learn to identify and protect against cybersecurity threats. They are introduced to network management tools
and learn key concepts of software-defined networking, including controller-based architectures and how
application programming interfaces (APIs) enable network automation.
</p>
<a class="btn btn-dark" href="#" role="button">Start learning now!</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 text-center info" style="background-color: white;">
<p>Hi! I'm René the creator of this site. I appreciate you visit my site. If you want to know more about me, click here.</p>
</div>
<footer class="bg-primary text-white text-center text-lg-start">
<!-- Copyright -->
<div class="text-center p-3" style="background: linear-gradient(to bottom,#ffbb59 0%, #ff654d 100%">
© 2021 Copyright: René Martin Kuda, SPŠT Spišská Nová Ves, 3.D
</div>
<!-- Copyright -->
</footer>
</body>
</html>
Hey so i'm a student in High School
have an assessment coming up my computer studies class the assessment really is create a responsive informative website using HTML, BOOTSTRAP and CSS. Im saying this to warn people that I am shit at html and bootstrap so if there is organisation problems or just bad code thats because of my lack of knowledge
basically my problem is I have some images colliding when I resize.
most problems the my teacher said like put it in a div, resize image file not in html etc is not working
here is my html and css code which I need to fix
<body>
<!-- Nav -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#"><img src="ImagesFP/hollow.png" width="66" height="65.25" class="img-responsive"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- End of Nav -->
<!-- Image Slide -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" img src="ImagesFP/SL-1.jpg" width="960" height="720" class="img-responsive" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" img src="ImagesFP/SL-2.jpg" width="960" height="720" class="img-responsive" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" img src="ImagesFP/SL-3.jpg" width="960" height="720" class="img-responsive" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Image Slide -->
<!-- stuff -->
<div class="container text-center">
<h2> How did I make this website </h2>
<div class="row">
<div class="col-sm-4">
<div class="imgbox">
<img src="ImagesFP/rsz_html.png" class="rounded float-left" alt="Responsive image" id="icon">
<h4> HTML 5 </h4>
</div>
</div>
<div class="col-sm-4">
<img src="ImagesFP/rsz_bootstrap.png" class="rounded mx-auto d-block" alt="Responsive image" id="icon">
<h4> Bootstrap 4 </h4>
</div>
<div class="col-sm-4">
<img src="ImagesFP/rsz_css.png" class="rounded float-right" alt="Responsive image" id="icon">
<h4> CSS 3 </h4>
</div>
</div>
</div>
<!-- stuff -->
<div class="container">
<div class="row">
<div class="col-md-6">
<h4> Welcome To My Website </h4>
<p> this is website designed for using bootstrap for example (image slides) and (nav bars) but by no means is this a "good" website... now here is a copy paste i got from wikipedia on what bootstrap is and other ramdom facts... Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation and other interface components... Life is a characteristic that distinguishes physical entities that have biological processes, such as signaling and self-sustaining processes, from those that do not, either because such functions have ceased, or because they never had such functions and are classified as inanimate.</p>
</div>
<div class="col-md-4">
<img src="ImagesFP/man.png" width="430" height="335.5">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<h4> Welcome To My Website </h4>
<p> Pepe the Frog is an Internet meme. A green anthropomorphic frog with a humanoid body, Pepe originated in a comic by Matt Furie called Boy's Club. It became an Internet meme when its popularity steadily grew across Myspace, Gaia Online and 4chan in 2008.</p>
</div>
<div class="col-md-4">
<div class="jumbotron">
<h4> why look at this website </h4>
<ul>
<li> because you decided to look at </li>
<li>.</li>
<li> because i need to get practice and get excellence in all my com tests </li>
<li>.</li>
<li> if you really are confused as to how you got here you might want to call your GP </li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<h4>Are you not board yet if not click me</h4>
<div id="hidden" class=collapse>
<h4> well if you are not now let me make you </h4>
<p> Calculus, originally called infinitesimal calculus or "the calculus of infinitesimals", is the mathematical study of continuous change, in the same way that geometry is the study of shape and algebra is the study of generalizations of arithmetic operations. It has two major branches, differential calculus and integral calculus; the former concerns instantaneous rates of change, and the slopes of curves, while integral calculus concerns accumulation of quantities, and areas under or between curves. These two branches are related to each other by the fundamental theorem of calculus, and they make use of the fundamental notions of convergence of infinite sequences and infinite series to a well-defined limit.[1] Infinitesimal calculus was developed independently in the late 17th century by Isaac Newton and Gottfried Wilhelm Leibniz.[2][3] Today, calculus has widespread uses in science, engineering, and economics.[4]In mathematics education, calculus denotes courses of elementary mathematical analysis, which are mainly devoted to the study of functions and limits. The word calculus (plural calculi) is a Latin word, meaning originally "small pebble" (this meaning is kept in medicine). Because such pebbles were used for calculation, the meaning of the word has evolved and today usually means a method of computation. It is therefore used for naming specific methods of calculation and related theories, such as propositional calculus, Ricci calculus, calculus of variations, lambda calculus, and process calculus.</p>
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
<p> Last Updated: November 7, 2019 12:09 PM
<! EndDate <br>
2019
</p>
</footer>
<!-- FOOTER -->
</div>
</body>
CSS CODE
body{
background-image: url("https://lh3.googleusercontent.com/proxy/bH-E_bOZVvg8Tet9wNoSisRFjNCivlR-7GAY2Q6AWF4q4KU46sIgxUUGHjmb58JLVum7jviuNn40NJdWZkPVtBZOJMDrc2ORZP7mvj5f04k");
}
footer {
padding: 10px 0;
clear: both;
text-align: center;
}
footer a {
color: #00bcff:
}
ul {
text-align: center;
list-style-position: inside;
}
.container{
margin: 4% auto:
max-width: 200px;
}
ul
{
list-style-type: none;
}
.imgbox{
max-width: 150px;
display: inline-block;
vertical-align: top;
padding:0 10px;
}
anybody have any idea why
Your image width is fixed as of now as 960
Try adding below css:
.carousel-item img {
max-width: 100%;
}
Bonus: Use picture tag for responsive design : https://www.w3schools.com/tags/tag_picture.asp
I have a pretty simple website HTML, but when I run it in localhost, all the text that isn't within something such as the navbar, jumbotron, etc, automatically appears as a link (shows up blue, underlined, clickable and goes to the top of the page) and I can't see any reason for this. I'm working in Python/Flask/Bootstrap/Virtual Studio Code. Here is a screenshot showing what I mean:
And here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Complete Bootstrap 4 Website Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="{{url_for('hello_world')}}"><img src="{{url_for('static', filename='img/logo.png')}}"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Crap</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Crud</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Cheesey Potato</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Scorpion</a>
</li>
</ul>
</div>
</div>
</nav>
<!--- Image Slider -->
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{url_for('static', filename='img/background.png')}}">
<div class="carousel-caption">
<h1 class="display-2">HELLO!</h1>
<h3>WELCOME</h3>
<button type="button" class="btn btn-outline-light btn-lg">click here</button>
<button type="button" class="btn btn-primary btn-lg">no click here actually</button>
</div>
</div>
<div class="carousel-item">
<img src="{{url_for('static', filename='img/background2.png')}}">
</div>
<div class="carousel-item">
<img src="{{url_for('static', filename='img/background3.png')}}">
</div>
</div>
</div>
<!--- Jumbotron -->
<div class="container-fluid">
<div class="row jumbotron">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
<p class="lead">This is an example site.</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
<a href="#"><button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button></div>
</div>
</div>
</div>
<!--- Welcome Section -->
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Morning!</h1>
</div>
<hr>
<div class="col-12">
<p class="lead">Welcome to my website</p>
</div>
</div>
</div>
<!--- Three Column Section -->
<div class="container-fluid padding">
<div class="row text-center padding">
<div class="col-xs-12 col-sm-6 col-md-4">
<i class="fas fa-fish fa-5x text-danger"></i>
<h3>Fish</h3>
<p>Browse freshwater and exotic fish</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<i class="fas fas fa-dog fa-5x"></i>
<h3 class="text-danger">Dogs</h3>
<p>Browse our pedigrees</p>
</div>
<div class="col-sm-12 col-md-4">
<i class="fas fas fa-otter fa-5x"></i>
<h3>Otters</h3>
<p>Check out our new range of otters</p>
</div>
</div>
<hr class="my-4">
</div>
<!--- Two Column Section -->
<div class="container-fluid padding">
<div class="row padding">
<div class="col-md-12 col-lg-6">
<h2>If you build it...</h2>
<p>According to Platts estimates and to thermal coal traders who spoke to Platts,
Russian producers continue to seek domination on the European market and have been
putting in a lot of effort to grab more market shares on the Asian markets such as South
Korea and Taiwan.</p>
<p>Last year, the average free on board (FOB) coal prices for the Atlantic and Pacific markets were
both higher compared to 2017, which could be a big incentive for Russia to continue producing and
exporting more coal to seaborne destinations, according to Platts.</p>
<p>Russia’s Energy Minister Alexander Novak briefed on Thursday President Vladimir Putin on the Russian
energy sector production in 2018, saying that the coal production of around 433 million tons was
planned to be reached in 2020. Russia plans to invest around $22.4 billion
(1.5 trillion Russian rubles) in its coal industry and port infrastructure, Novak told Putin.</p>
</div>
</div>
</div>
I don't have any links I haven't closed so I can't see why it'd do this. If anyone could help it'd be great, thanks. The link issue is in the 'three column' and 'two column' sections in the code.
Seems like you forgot to close an anchor tag somewhere. On a side note,
<a href="#"><button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button></div>
Did you close the </a> tag here?
Not an html expert but i noticed on line 84
Web Hosting
you haven't closed
as i said not html expert but i hope i helped :D
There's an extra div and missing tag. Have left comments which highlight where issues are. C
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
<a href="#"><button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button></div>
// Missing an </a> tag in above line, also incorrect by html5 spec to include a button within an a tag but that's a separate problem.
</div>
</div>
</div> // Extra div here
For my school I have to do a website with a video slider. I chose to work with bootstrap 4.0. So far I got a template from it and tried to put a video inside it on one of the sliders. Unfortunately the video won't be shown full. I would like to have it fitting in the slider. (and of course that in the left and in the right of the video will be only the arrows to slide right or left)
Right now it looks like that:
So in the width its full, but the height you cant see anything
what i would like to have is that:
it fits in the slider with his whole width and height. if you scale the window, the white blocks should get smaller
Here is the code I'm using:
/*!
* Start Bootstrap - Half Slider (https://startbootstrap.com/template-overviews/half-slider)
* Copyright 2013-2017 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-half-slider/blob/master/LICENSE)
*/
#charset "UTF-8";
/* Body */
body {
width: 50%;
margin: auto;
}
.carousel-item {
height: 65vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.carousel-item iframe {
margin-top: 55px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.tales {}
.iframe {
max-height: 40% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Half Slider - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/half-slider.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Fact Attack</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<header>
<!--Carousel Wrapper-->
<div id="video-carousel-example2" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#video-carousel-example2" data-slide-to="0" class="active"></li>
<li data-target="#video-carousel-example2" data-slide-to="1"></li>
<li data-target="#video-carousel-example2" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!-- First slide -->
<div class="carousel-item active">
<!--Mask color-->
<div class="view">
<!--Video source-->
<div class="embed-responsive embed-responsive-16by9 video-fluid"><iframe src="https://player.vimeo.com/video/193266260" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
<div class="mask rgba-indigo-light"></div>
</div>
<!--Caption-->
<div class="carousel-caption">
<div class="animated fadeInDown">
<h3 class="h3-responsive text-dark">Light mask</h3>
</div>
</div>
<!--Caption-->
</div>
<!-- /.First slide -->
<!-- Second slide -->
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<!--Video source-->
<div class="embed-responsive embed-responsive-16by9 video-fluid"><iframe src="https://player.vimeo.com/video/193266260" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
<div class="mask rgba-indigo-light"></div>
</div>
<!--Caption-->
<div class="carousel-caption">
<div class="animated fadeInDown">
<h3 class="h3-responsive">Super light mask</h3>
</div>
</div>
<!--Caption-->
</div>
<!-- /.Second slide -->
<!-- Third slide -->
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<!--Video source-->
<div class="embed-responsive embed-responsive-16by9 video-fluid"><iframe src="https://player.vimeo.com/video/193266260" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
<div class="mask rgba-indigo-light"></div>
</div>
<!--Caption-->
<div class="carousel-caption">
<div class="animated fadeInDown">
<h3 class="h3-responsive">Strong mask</h3>
</div>
</div>
<!--Caption-->
</div>
<!-- /.Third slide -->
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#video-carousel-example2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#video-carousel-example2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--Carousel Wrapper-->
</header>
<!-- Page Content -->
<section class="py-5">
<div class="container">
<h1>Half Slider by Start Bootstrap</h1>
<p>The background images for the slider are set directly in the HTML using inline CSS. The rest of the styles for this template are contained within the
<code>half-slider.css</code> file.
</p>
</div>
</section>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Your Website 2018</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Thank you for your help, and just tell me if you need to know something more :)
First you need to fix your layout. All the content of the body should be inside a container, row, and col-12.
<div class="container">
<div class="row">
<div class="col-12">
</div>
</div>
</div>
All of the carousel related code should go inside the col-12. Doing so, the carousel's width is the same as that of the nav, and there are free space on both sides of it.
The controllers are positioned absolute. Two of their parents are positioned relative. If you do not have enough information on CSS positioning, read this post.
There are a couple of ways to get the controllers outside of the carousel.
Method 1
Put the two controllers code below the container.
<div class="container">
<div class="row">
<div class="col-12">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#video-carousel-example2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-danger" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#video-carousel-example2" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-danger" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
Put all the above code inside an another element with position-relative class.
<div class="position-relative">
<div class="container">
<div class="row">
<div class="col-12">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#video-carousel-example2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-danger" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#video-carousel-example2" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-danger" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Check this pen
Method 2
Override the position property of carousel and the col-12 using the code below. They are relatively positioned.
.position-initial {
position: initial !important;
}
<div class="postion-relative">
<div class="container">
<div class="row">
<header class="col-12 position-initial">
<!--Carousel Wrapper-->
<div id="video-carousel-example2" class="carousel slide carousel-fade position-initial" data-ride="carousel">
</div>
</header>
</div>
</div>
</div>
Now, since the div with position-relative class has full width and the controllers are absolutely positioned, the controller are inside the full-width div.
Check this pen