I am trying to make simple carousel using bootstrap and im having a problem with image sizes, i want it to be full screen images. does that mean that i have to add media queries? if yes how can I do that?
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="imagehere.png">
</div>
<div class="item">
<img src="imagehere.png">
</div>
<div class="item">
<img src="imagehere.png">
</div>
</div>
</div>
No,you don't have to add media queries. Set image width to 100%. Give each image a class of img-fluid and set your body margin to 0
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-fluid" src="https://images.unsplash.com/photo-1472722886393-f2f51e9deec8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
width="100%" height="100%">
</div>
<div class="item">
<img class="img-fluid" src="https://images.unsplash.com/photo-1531682607150-08b2476a545a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=742&q=80"
width="100%" height="100%">
</div>
<div class="item">
<img class="img-fluid" src="https://images.unsplash.com/photo-1498595664159-2df8dee7e63c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
width="100%" height="100%">
</div>
</div>
Related
I want a carousel to occupy half the page and to be aligned to the right while the text should be aligned to the left of the box.
I am using bootstrap. Here is my html:
.main{
display: flex;
align-items: center;
}
#events{
display: flex;
justify-content: space-evenly ;
}
.card{
border-radius: 5%;
}
#myNavbar{
align-items: center;
}
.impact{
margin: 10px;
}
<div class="main">
<div class="impact">
<span>
IMPACTING THE BANGLADESHI COMMUNITY IN OMAN!
</span>
</div>
<div id="carousel" class="carousel slide impact" data-bs-ride="carousel">
<div class="carousel-inner impact" style="height: 500px;">
<div class="carousel-item active">
<img src="{% static 'social_club/web1.jpg' %}" class="d-block w-100 h-100" alt="">
</div>
<div class="carousel-item">
<img src="{% static 'social_club/web2.jpg' %}" class="d-block w-100" alt="">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="..."> </div>
</div>
</div>
</div>
Could someone please tell me how I can make this possible? I have searched quite a lot about making the carousel only occupy half the page, but without results.
If you are using Bootstrap 4 or Bootstrap 5, you have no need to add custom CSS. You can achieve this by using Bootstrap classes. In the following code snippet, I am using Bootstrap 5.
Here is the complete implementation of your code. Please make sure to add closing tags correctly.
Note: Don't add static height to any element for an accurate vertically center alignment effect.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main d-flex align-items-center">
<div class="impact w-50">
<span>
IMPACTING THE BANGLADESHI COMMUNITY IN OMAN!
</span>
</div>
<div id="carousel" class="carousel slide impact w-50" data-bs-ride="carousel">
<div class="carousel-inner impact">
<div class="carousel-item active">
<img src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" class="d-block w-100 h-100" alt="">
</div>
<div class="carousel-item">
<img src="https://www.winklix.com/blog/wp-content/uploads/2021/01/f1ce6a0af5cb.jpg.png" class="d-block w-100" alt="">
</div>
<div class="carousel-item">
<img src="https://htmlburger.com/blog/wp-content/uploads/2021/02/lets-talk-about-bootstrap.png" class="d-block w-100" alt="...">
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
I was trying to make a carousel for my website using Bootstrap, but the carousel just gives me this icon:
My Google dev tools did not give me errors, the same can be said for Pycharm; no errors. Here is my code:
<div class="container">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="C:\Users\pert\PycharmProjects\milestonewebsite\images\one.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="C:\Users\pert\PycharmProjects\milestonewebsite\images\two.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="C:\Users\pert\PycharmProjects\milestonewebsite\images\three.jpg" class="d-block w-100" alt="...">
</div>
</div>
</div>
</div>
ok, i found out the problem, for some reson, my computer only accepted gif links, now it is working properly
I'm currently working on my first ever website, this is using the twitter-bootstrap 4 framework. Everything was going swimmingly, until I have seemingly encountered the following issue.
I currently have this layout for my website:
Current Layout
When in fact I would like:
Desired Layout
I have attempted a plethora of solutions that I have found via browsing stack-overflow, such as nesting columns. None of it seems to work, I'm sure it is simply due to my inexperience, but I'm stumped as to how to get my desired appearance.
<div class="container-fluid bg-style-2">
<div class="row">
<div class="col-sm-9 par-style"><h2 class="par-heading">Welcome to my Website</h2>
</div>
<div class="col-sm-3">
<div id="myCarousel" class="carousel slide pull-right" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"><img src="img/Christina.JPG" alt="..."></li>
<li data-target="#myCarousel" data-slide-to="1"><img src="img/NickyAndChristina.JPG" alt="..."></li>
<li data-target="#myCarousel" data-slide-to="2"><img src="img/Nicky.JPG" alt="..."></li>
<li data-target="#myCarousel" data-slide-to="3"><img src="img/Meme.JPG" alt="..."></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/Christina.JPG" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/NickyAndChristina.JPG" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/Nicky.JPG" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/Meme.JPG" alt="Fourth slide">
</div>
</div>
</div>
</div>
</div>
</div> <!-- End of Carousel -->
<div class="container-fluid bg-style-2">
<div class="row">
<div class="col-sm-9 par-style"><h2 class="par-heading">Test Header</h2>
</div>
</div>
</div>
As seen above, I am trying to have a photo gallery slider to the right of my website and the formatting I have attached above, it simply will not work. Can someone please give me some guidance? I have been thoroughly enjoying working on this website, but I cannot progress until I have resolved this as it will plague my mind.
#nedge
https://jsfiddle.net/saurabhanand/4f0pztcu/2/
<div class="container">
<div class="row container-0">
<div class="col-sm-6">
<div class="row container-1">
<div class="col-sm-12">
<img class="rgt-side-img" src="https://via.placeholder.com/500x250">
</div>
</div>
<div class="row container-2">
<div class="col-sm-6">
<img class="rgt-side-img" src="https://via.placeholder.com/500">
</div>
<div class="col-sm-6">
<img class="rgt-side-img" src="https://via.placeholder.com/500">
</div>
</div>
</div>
<div class="col-sm-6">
<img class="rgt-side-img" src="https://via.placeholder.com/500">
</div>
</div>
</div>
I hope this one helps. You can replace img tag with your own contents.
I am trying to make two bootstrap columns the same height and responsive.
So far I have the two columns the same height but as the screen size gets smaller one columns becomes shorter than the other. Like this:
To make the two columns I used Bootstrap 3.
My HTML:
<div class="col-md-6">
<div class="col-md-12 pb-20">
<div class="btn-container">
<img src="http://via.placeholder.com/1200x500" alt="Snow" style="max-height: 500px;">
<button class="btn">BREAKFAST MENU</button>
</div>
</div>
<!--
-->
<div class="col-md-12 pb-20">
<div class="btn-container">
<img src="http://via.placeholder.com/1200x500" alt="Snow" style="max-height: 500px;">
<button class="btn">DRINKS MENU</button>
</div>
</div>
</div>
<!--
-->
<div class="col-md-6 hard--right">
<div id="carousel-example" class="carousel slide" data-ride="carousel" style="width:100%;">
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
<li data-target="#carousel-example" data-slide-to="3"></li>
<li data-target="#carousel-example" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://via.placeholder.com/1200x1200" alt="" style="max-height: 1020px; width:100%">
</div>
<div class="item">
<img src="http://via.placeholder.com/1200x1200" style="max-height: 1020px; width:100%" style="width:100%" alt="Second slide" />
</div>
<div class="item">
<img src="http://via.placeholder.com/1200x1200" style="max-height: 1020px; width:100%" alt="Third slide" />
</div>
<div class="item">
<img src="http://via.placeholder.com/1200x1200" style="max-height: 1020px; width:100%" alt="Fourth slide" />
</div>
<div class="item">
<img src="http://via.placeholder.com/1200x1200" style="max-height: 1020px; width:100%" alt="Fifth slide" />
</div>
</div>
<div class="main-text hidden-xs">
<div class="text-center">
<button class="btn">MAIN MENU</button>
</div>
</div>
</div>
</div>
The Codepen to my problem is https://codepen.io/mrsalami/pen/dKpdXO
Images have width: 100%, so when screen resizes they reduce their width based on parent's width (50% of screen width size).
This caused the height of the images to resize too, based on their original aspect ratio.
So this will work if:
right image's height = ( left images height * 2 ) + space between.
<div class="carousel-inner">
<div class="item active" >
<div class="carousel-caption">
<h3>Test</h3>
<p>
</p>
</div>
</div>
</div>
Here is my code.
Carousel slider worked correctly
and element was showed when i inspect it
but a images can't click in mobile and ipad version
can fix this
I've added onlick function into div elements
<div class="carousel-inner">
<div class="item active" onclick="window.open('test');" style="cursor: pointer;" >
<img src="/site_media/test_image.jpg" alt="test test" />
<div class="carousel-caption">
<h3>Test</h3>
<p></p>
</div>
</div>