I have a bootstrap 5 carousel with controls. My desired output is a slideshow with 2 items per slide and I would like to scroll through one image at a time.
From here:
To here:
The problem with solutions I have found which use the bootstrap grid system like the ones posed on this topic are that they rely on the correct multiple of items to work and they scroll two items per click, not one. A lot of the solutions I have found online are buggy or overcomplicated.
Is there a simple way to achieve this?
you mean like this ?
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active ">
<div class="col-12 row">
<div class="col-6" style="background-color: yellow; height: 10vh;"></div>
<div class="col-6 " style="background-color: blue; height: 10vh;"></div>
</div>
</div>
<div class="carousel-item">
<div class="col-12 row">
<div class="col-6" style="background-color: red; height: 10vh;"></div>
<div class="col-6 " style="background-color: green; height: 10vh;"></div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Related
I have the following in Thymeleaf template:
<div class="row col-md-12">
<div th:each="item : ${itemList}">
<div class="col-md-3">
<div class="card custom-card"
style="width: 15rem; display: inline-block">
<div class="card-body">
<h5 class="card-title" th:text="${'item Id - ' + item.id}">Id</h5>
<p class="card-text" th:text="${item.itemname}">Name</p>
<p class="card-text" th:text="${item.itemdescription}">Desc</p>
<a th:href="#{'/createforItemId/' + ${item.id}}"
class="stretched-link btn btn-sm btn-primary mr-2"><i
class="fas fa-rocket mr-2"></i> Start New Discussion</a>
</div>
</div>
</div>
</div>
</div>
I am trying to iterate the itemList in such a way that each row in my html should have 4 cards in 4 columns (12/3).
But currently I am getting only one "Single" column (huge) stacked with my list of objects.
What I am missing here?
I am open for any alternative solution too. Please suggest.
ODD but I got a workaround and is pretty much what I wanted. The following did the trick for me (notice the table without <td></td>):
<table style="width: 100%">
<tr th:each="item : ${itemList}">
<div class="card custom-card text-center mr-2 mt-2 ml-2 mb-2"
style="width: 15rem; display: inline-block">
<div class="card-body">
<h5 class="card-title" th:text="${'item Id - ' + item.id}">Id</h5>
<p class="card-text" th:text="${item.itemname}">Name</p>
<p class="card-text" th:text="${item.itemdescription}">Desc</p>
<a th:href="#{'/createforItemId/' + ${item.id}}"
class="stretched-link btn btn-sm btn-primary mr-2"><i
class="fas fa-rocket mr-2"></i> Start New Discussion</a>
</div>
</div>
</tr>
</table>
I am getting nice looking 4 columns with 4 cards with this css to add rounded borders for the boxes/cards:
.custom-card {
border-radius: 20px;
}
However, I am still waiting for some expert's suggestion here as the solution I came up with looks more like a patch work instead of a clean solution.
You should be able to include the th:each one level up to create 4 cards in a 12 slot row by col-xl-3.
<div class="row">
<div class="col-xl-3" th:each="item : ${itemList}">
<div class="card">
<!-- other stuff -->
</div>
</div>
</div>
It is similar to this later posted question that uses 3 cards instead of 4.
A solution like you have that uses a <div> in the <tr> will have your IDE complain that <div> is not a valid element in that location.
Note that you may still need to constrain the height of the card if they are not of the same size.
I'm trying to setup a CSS carousel, when I wrote the code the automatic sliding seems to work okay, although it seems little buggy. However the main issue is the prev and next controls don't work properly. Every time you click one of them they always start you from the active-item image so you can never fully click through the images.
<body>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div id="my-slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/parvazlogo.jpg" alt="program" />
<div class="carousel-caption">
<h1></h1>
</div>
</div>
<div class="item">
<img src="images/program1.jpg" alt="programming image" />
<div class="carousel-caption">
<h1>ParwazTech Will Bring your Ideas To Life!</h1>
</div>
</div>
<div class="item">
<img src="images/innovation.jpg" alt="innovation" />
<div class="carousel-caption">
<h1>Learn More about Us</h1>
</div>
</div>
<div class="item">
<img src="images/office.jpg" alt="deal struck" />
<div class="carousel-caption">
<h1>Start looking at deals now!</h1>
</div>
</div>
<a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
#MatiasFernandezMartinez
https://youtu.be/7Hr-EBEpVJ0 this is a video of the problem just to prove it is happening. As you can see the bottom three buttons work fine but the two left and right buttons bring up the problem I described
I'm assuming the problem is with my bootstrap or my jquery since the code does not bring you all problems
Here is my header setup (bootstrap 4):
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="navbar-brand"><img src="..."></div>
</div>
<div class="col-md-6 text-right">
<div class="header-btn-grp">
<div class="header-call-us">Get a Quote, Call Today!</div>
<a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
<div class="header-address">XXX</div>
</div>
</div>
</div>
As expected on desktop the logo sits on the left and the button sits on the right.
When on smaller devices I would like the logo and button to align in the center.
I have tried to add a .text-md-center class to both columns but this caused both elements to center in there columns at all widths (desktop and mobile).
What is the correct way to do this?
An alternate to #cwanjt answer is using the text-center. You just then need to use text-md-left and text-md-right to keep the desired alignment on larger widths.
<div class="container">
<div class="row">
<div class="col-md-6 text-md-left text-center">
<div class="navbar-brand"><img src="//placehold.it/140x30"></div>
</div>
<div class="col-md-6 text-md-right text-center">
<div class="header-btn-grp">
<div class="header-call-us">Get a Quote, Call Today!</div>
<a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
<div class="header-address">XXX</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/Ijl31XHfRT
#TimothyAURA, if I'm understanding you question correctly, it's how to center the content of your header on smaller screens. If that's the case, you can look at the code in this codeply project to get an idea of how to do that. It seems like you have some familiarity with Bootstrap, but here's a reference to Bootstraps utilities for justifying content.
It uses a justify-content-center class for device sized medium and below, and a justify-content-lg-between on larger displays.
<header class="d-flex justify-content-center justify-content-lg-between">
<a class="navbar-brand" href="#">
<img src="http://via.placeholder.com/65x65" alt="">
</a>
<div class="header-btn-grp">
<div class="header-call-us">Get a Quote, Call Today!</div>
<a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
<div class="header-address">XXX</div>
</div>
</header>
I have a carousel which is actually a form.
One carousel item is a multi selectbox
How can i auto increase the height on only one carousel-item as the height of the multi select box increase.
The image 1 is how i get.
Image 2 how i want it.
Much thanks for much insights. I cannot refresh the carousel. It will unset my form inputs
<div class="row no-gutters" id="mob-carousel-row" [style.height.px]="mobileCarouselRowHeight">
<div class="col-1 col-sm-1">
<a href="#carouselExampleIndicators" role="button" data-slide="prev">
<i class="fa fa-angle-left mobile-form-nav" ></i>
</a>
</div>
<div class="col-10">
<div
#plMobileCarouselForm
id="carouselExampleIndicators"
class="carousel slide"
data-ride="carousel"
data-interval="false">
<div class="carousel-inner" role="listbox" id="mob-carousel">
<div class="carousel-item active">
<div class="form-group md-form mob inputbox">
<!-- first input box item -->
</div>
</div>
<div class="carousel-item active">
<div class="form-group md-form mob muti-select">
<!-- muti select box item need auto height -->
</div>
</div>
<div class="carousel-item active">
<div class="form-group md-form mob inputbox">
<!-- first input box item -->
</div>
</div>
</div>
</div>
</div>
<div class="col-1 col-sm-1">
<a href="#carouselExampleIndicators" role="button" data-slide="next">
<i class="fa fa-angle-right mobile-form-nav" ></i>
</a>
</div>
</div>
This is intended as a comment but I can't comment yet.
Since you haven't provided your CSS it's just guess work.
However, if you set the height to auto for the container that contains the input forms or select boxes, it will adjust itself as more options become available.
.carousel-item active {
height: auto;
}
I am displaying a list of search results. I am using col-md-4 from bootstrap to display 3 results per row - a bit like 3 cards. However when it moves to the next row it starts from the right and then the next item shows up only on the next one left... basically jumping a column.
Following code to be repeated as many time as needed. End goal is to display results like a grid.
<div class="outer-listings-container row-space-8">
<div class="row row-condensed listings-container">
<!-- PART TO REPEAT -->
<div class="col-md-4 row-space-1" data-id="36">
<div class="result">
<div class="panel-image listing-img">
<div id="36" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<a class="center-block" href="#">
<div class="center-block">
<img class="img-responsive center-block" src="#"> </div>
</a>
</div>
<div class="item">
<a class="" href="#">
<div class="center-block">
<img class="img-responsive center-block" src="#">
</div>
</a>
</div>
</div>
<div>
<a class="left carousel-control height-test" id="36" href="#36" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<div>
<a class="right carousel-control height-test" id="36" href="#36" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="panel-overlay-bottom-left panel-overlay-label panel-overlay-listing-label">
<div>
<sup class="h6">€</sup>
<span class="h3">456</span>
<sup class="h6">EUR</sup>
<span class="h6">/session of 2 hours</span>
</div>
</div>
</div>
<div class="panel-body panel-body-result">
<h4>
<div class="row">
<div class="col-xs-2">
<img src="#" class="avatar-sm" alt="Banana"> </div>
<div class="col-xs-10">
Banana R
<br>
<small>Banana R</small>
</div>
</div>
</h4>
<span class="stars2"><span style="width: 0px;"></span></span>
<span><b class="review_score">0</b> (0 reviews)</span>
<p>blabla</p>
<p>more blabla </p>
</div>
</div>
</div>
<!-- END REPEAT -->
</div>
</div>
Problem can be seen on the following page: https://gokyma.com/search?location=Paris%2C+France&country=FR&city=Paris&state=IDF&stype=5&selected_date=&selected_time=&_token=ZHXfiseRlAgE3fLY0f1ywr7qYzj9eFxGkSZ2SFIS
Well, your jsfiddle code is not really representative of the issue, but I guess one solution could be adding <div class="row"></div> for each series of 3 col-md-4 that you have in each line. So, the snippet would look something like this;
<row> <col-md-4> <col-md-4> <col-md-4> </row>
Remember, a row can't contain more than 12 columns.... that's another thing to take into consideration...