position img added using bootstrap - html

I added three images by bootstrap. but these images display in left side of page, while I want them display in center of page.
How can I do it?
this is code of images and bootstrap
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel" root="teal" >
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="img/pic1.jpg" class="d-block w-100" alt="..."width="1010"height="600px" >
</div>
<div class="carousel-item" data-interval="2000">
<img src="img/pic2.jpg" class="d-block w-100" alt="..."width="1010"height="600px">
</div>
<div class="carousel-item">
<img src="img/pic3.jpg" class="d-block w-100" alt="..."width="1010"height="600px">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>


According to this article, you can use bootstrap's .center-block css class to center align an image.
You would insert it into your <img> tag like so:
<img class=".center-block">

Related

Bootstrap Carousel doesn't change next/previous picture

So I've been trying to make a portfolio website in Django, I've been following some tutorial for this.
The Carousel on my page doesn't seem to change images when clicking next/previous button. The images displays properly (need to resize it for appropriate looks) but no matter what I do it won't show next/previous image.
I am providing the carousel code and the whole html code:
Carousel code:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?food,food" alt="First slide" style="width:100%;">
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?cat,cat" alt="Second slide" style="width:100%;">
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?car,car" alt="Third slide" style="width:100%;">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Whole HTML code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous">
<title>Home</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">OMEGA</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/project">Project</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-
label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?food,food" alt="First
slide" style="width:100%;">
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?cat,cat" alt="Second
slide" style="width:100%;">
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?car,car" alt="Third
slide" style="width:100%;">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- <h1>Hello, world!</h1> -->
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js"
integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js"
integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
crossorigin="anonymous"></script>
-->
</body>
</html>

Try to remove "active" from second and third img tags in your carousel code
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?food,food" alt="First slide" style="width:100%;">
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?cat,cat" alt="Second slide" style="width:100%;">
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?car,car" alt="Third slide" style="width:100%;">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
To
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?food,food" alt="First slide" style="width:100%;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?cat,cat" alt="Second slide" style="width:100%;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?car,car" alt="Third slide" style="width:100%;">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Change data-ride and data-slide to data-bs-ride and data-bs-slide. In bootstrap 5 data-ride and data-slide don't work anymore.

Solution 1
As your are using bootstrap 5, you must use data-bs-ride="carousel" and data-bs-slide="carousel" at the places of data-ride="carousel and data-slide="carousel. After that The .active class needs to be added to one of the slides otherwise the carousel will not be visible so remove it for the second and the third slide.
Link: Bootstrap 5 carousel with indicators
Solution 2
Just change the version of your bootstrap to 4 and remenber to set .active class for only one slide.

How to change navigation buttons in a bootstrap 4 carousel?

I was using a bootstrap carousel for my website when I realized that you could use other buttons for the carousel navigation(other buttons than the default ones of course).
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Does anyone know how to change the navigation buttons in this carousel. Thanks in advance !!

A dirty hack would be to override the carousel-control-prev-icon and carousel-control-next-icon classes.
See pen - https://codepen.io/buzztnt/pen/WNrjvbM

Bootstrap carousel moving to top when clicking next and before buttons?

Now I have this carousel I made with Bootstrap code:
<div id="carouselExample" class="carousel slide d-none d-sm-none d-md-block" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row logo justify-content-center">
<div class="col">
<img class="image-logo" src="img/..." alt=""/>
</div>
<div class="col">
<img class="image-logo" src="img/..." alt=""/>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row logo justify-content-center">
<div class="col">
<img class="image-logo" src="img/..." alt=""/>
</div>
<div class="col">
<img class="image-logo" src="img/..." alt=""/>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" 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="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
When I press next and prev butttons, the page moves itself to the top of the browser. How can I disable this?
Thanks!

I have the same problem on my site.
Fix:
href="#carouselExample" change to href="/#carouselExample"

try to remove
href="#carouselExample"

How to create bootstrap carousel with near by Next/Previous images?

I have created bootstrap carousel. it's working fine but how can i show next and previous images on next and previous buttons.
below in the url you can see what i have done till now.
https://imgur.com/a/vJnSuca
<div class="container image-slides">
<div class="row r">
<div class="col-md-2"></div>
<div class="col-md-8">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/festival-slider.jpg"
alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/festival-slider.jpg"
alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/festival-slider.jpg"
alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
I want to show next and previous nearby images in arrow buttons.now i just have changes arrow to static images.

my slider takes up the whole screen what should I do

I wanted to use the slider as banner pictures 800 x 400 but the slider is getting full screen when i want to test this is the code I wrote Where will I write sizing?
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" width="800" height="400">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/banner.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/banner2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/banner3.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

You will need to go use CSS to do this, I think Bootstrap has something to do with it not working in HTML.
.carousel .item {
width: 800px;
height: 400px;
}