i have image with custom size and i want to show it on my website with carousel bootstrap but i am stuck to styling the carousel
this is the result
i want align the picture to center
This is my code
i just add style width on my html code
<div class="carousel-inner" style="width: 50%;">
<div class="carousel-item active">
<img src="img\post1.jpg"" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
Use d-flex on the image like this....
<img src="img\post1.jpg" class="d-flex align-items-center" alt="...">
or add a Div around the image and use d-flex like this....
<div class="d-flex justify-content-center">
<img src="img\post1.jpg" alt="...">
</div>
Then from your code remove
d-block w-100
As a side note, you have 2 sets of quote marks at the end of your image path....
<img src="img\post1.jpg""
Related
I want to have automatic multiple sliders and they should be side by side, each sliding in different periods of time.
I am a beginner coder and tried to make this work by trying myself and searching for solutions but nothing works, it would be great if i got the code how to do it
If you add bootstrap to your code you can use this:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>
Add the desired picture's location to img tag's src attribute and it will automaticly start to slide.
Note: To add bootstrap check this https://getbootstrap.com/docs/5.0/getting-started/introduction/
I have been searching quite some time for this but unfortunately all questions/answers are mostly 6/8 years old. Now that Bootstrap has evolved so much, I want to ask the question as maybe someone knows how to do this.
My requirement is to have a carousel of cards that adapts based on viewport, for example:
Default size: 3 items
Mobile size: just 1 item
This snippet is perfect for my needs: https://gosnippets.com/snippets/bootstrap-carousel-with-cards-in-3-columns, however I was unable to achieve what I want.
I have also played around with Slick carousel, but frankly I'm not a fan. It does exactly what I need but it's outdated, bugged and I would be much happier to use just bootstrap.
My project uses Webpack so I am able to use SCSS if that helps.
Please let me know if it's possible to achieve what I want with just plain Bootstrap 5.
You can do that in plain bootstrap by calling two carousel. Here is the following code and hopefully you will understand the code pattern.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner d-none d-sm-block"> //d-none: display none for all devices, d-sm-block: hide on screens smaller than sm (width < 768px)
//loops start
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-sm">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="col-sm">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="col-sm">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>
</div>
//loops end
</div>
<div class="carousel-inner d-sm-none">//d-sm-none: hide on sm (width < 768px) and wider screens
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>
Wish you good luck.
I have this code containing a row of bootstrap template cards:
<div id="row1-cards" class="row mx-5 mt-3 row-cols-1 row-cols-md-2 row-cols-lg-4">
<div class="card col m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
<div class="card col m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
<div class="card col m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
<div class="card col m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
</div>
I would like the cards to display with 4/row on large screens, 2/row on medium screens, and 1/row on small screens. When I remove the margin (m-3 class) from each card, this works perfectly. However, with the margin added, one or more of the cards ends up getting bumped down to another row, like the image below. How can I have these set numbers of cards in each row, while still allowing the cards to be spaced out nicely?
When you add side margin to columns then the calculation of bootstrap row gets disturbed, now the row have to accommodate that extra margin also with the columns and since the width of row here is fixed then it will shift the last column to next line. You can achieve the same effect by using padding in an inner container instead of using margin on cols.
<div id="row1-cards" class="row mx-5 mt-3 row-cols-1 row-cols-md-2 row-cols-lg-4">
<div class="col">
<div class="card inner-box m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
</div>
<div class="col">
<div class="card inner-box m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
</div>
<div class="col">
<div class="card inner-box m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
</div>
<div class="col">
<div class="card w-100 inner-box m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
</div>
</div>
</div>
</div>
But you can apply margin to cols from top and bottom,
Hope it helps !
So I have this carousel making my website 'fancy'. But I want to link the individual pictures to the websites it should got to once clicked on.
The following is my code:
<div class="carousel-item active">
<img class="d-block w-100" src="images/ncaa-bb-banner-1920x500 (1).png" alt="First slide" >
<div class="carousel-caption d-none d-md-block" >
<h5 href="sportsevents.php">Sport Events</h5>
</div>
</div>
I have added href="sportsevents.php" to the first div, img and the second div, but it doesn't seem to link up. Am I having a brain fart and missing something or is there something else I should do?
You can do like this and get desired result.
<div class="carousel-item active">
<img class="d-block w-100" src="images/ncaa-bb-banner-1920x500 (1).png" alt="First slide" >
<div class="carousel-caption d-none d-md-block" >
<h5>Sport Events</h5>
</div>
</div>
If I have a card inside a column, that needs to have an image with a set height, how do I make it not stretched out, as it currently is in my code example? And without having to have a set width on the image because I want it to be replaceable.
What am I missing and/or doing wrong? Thanks!
.card-block {
padding: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="col-md-6">
<div class="card">
<img class="card-img-top" src="https://placeimg.com/640/480/animals" alt="Card image cap" height="200">
<div class="card-block text-center">
<p class="card-text">Text goes here</p>
<p class="card-subtitle">More text goes here</p>
</div>
</div>
</div>
Your best solution is to instead of placing the image directly onto the page you can create an empty div and then set the background image to be https://placeimg.com/640/480/animals then set its size to cover and then it will cover the height and width of the div you have specified
so for example...
css
card-image-container{
background: url('https://placeimg.com/640/480/animals') 50% no-repeat;
background-size: cover;
}
Making an image responsive in Bootstrap 4 is very easy:
You just add the img-fluid class to the image.
HOWEVER... responsiveness comes at a cost and that is: You cannot set a minimum height for a responsive image (because that in itself would make the image non-responsive).
Luckily, there are a few workarounds for managing the size of your card image while still keeping it responsive. You can do that by manipulating the horizontal padding (use the px-* class and swap the * for a number between 0 and 5) as well as increasing or decreasing the column width.
Take a look at the 3 examples here:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row mt-3">
<div class="col-md-6">
<div class="card">
<img class="card-img-top img-fluid" src="https://placeimg.com/640/480/animals" alt="Card image cap">
<div class="card-block text-center">
<p class="card-text">Text goes here</p>
<p class="card-subtitle">More text goes here</p>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6 px-5">
<div class="card">
<img class="card-img-top img-fluid" src="https://placeimg.com/640/480/animals" alt="Card image cap">
<div class="card-block text-center">
<p class="card-text">Column with px-5 class</p>
<p class="card-subtitle">to make the image smaller</p>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-5 px-5">
<div class="card">
<img class="card-img-top img-fluid" src="https://placeimg.com/640/480/animals" alt="Card image cap">
<div class="card-block text-center">
<p class="card-text">Smaller column AND px-5 class</p>
<p class="card-subtitle">to make the image even smaller!</p>
</div>
</div>
</div>
</div>
</div>
Usually, when using Bootstrap you should use div with the class of container or container-fluid and after that div with the class of row. This worked for me
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<img class="card-img-top" src="https://placeimg.com/640/480/animals"
alt="Card image cap" height="200">
<div class="card-body text-center">
<p class="card-text">Text goes here</p>
<p class="card-subtitle">More text goes here</p>
</div>
</div>
</div>
</div>
</div>
Cards know to be pain in the.. But I hope this helps.