In HTML, all is properly ranged and directly equal to the original Bootstrap 4 website:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../../assets/images/background/promo-bg.jpg" alt="Primera diapositiva">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../../assets/images/background/promo-bg-2.jpg" alt="Segunda diapositiva">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../../assets/images/background/promo-bg-3.jpg" alt="Tercera diapositiva">
</div>
</div>
</div>
styles.css:
/* You can add global styles to this file, and also import other style files */
#import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
/*#import '../node_modules/bootswatch/dist/yeti/bootstrap.min.css';*/
#import '../node_modules/font-awesome/css/font-awesome.min.css';
#import '../node_modules/alertifyjs/build/css/alertify.min.css';
#import '../node_modules/alertifyjs/build/css/themes/bootstrap.min.css';
#import '../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css';
/*Los imports del tema importado*/
#import '../src/assets/css/theme-1.css';
/*#import '../src/assets/fontawesome/js/all.js';*/
#import '../src/assets/plugins/pe-icon-7-stroke/css/pe-icon-7-stroke.css';
#import '../src/assets/plugins/flexslider/flexslider.css';
The carousel in the HTML page stays still, and I don't get why. All the needed code is already included in the components of the Angular. I took the carrousel from https://getbootstrap.com/docs/4.0/components/carousel/
But still, it does not work.
I edit to add the Js calls at the end of home.component.html:
Of course. At the end of the home.component.html there is this code: <!--
jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</div>
Related
When I hit run or preview in a browser, I am using Chrome, a static view of all three slides stacked 1-3 is displayed. So they do not toggle through each one.
This is only not working on codeply which I use often. It does work on codepen and it does work once I add it to my html and CSS files through atom code editor. Its only codeply that it will not run and I have javascript and bootstrap packages installed in codeply.
.carousel-item {
height: 150px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel" data-interval="1000">
<div class="carousel-inner">
<div class="carousel-item active" style="background-color: red;">
<img src="https://via.placeholder.com/600x150" class="d-block w-100" alt="First Slide">
</div>
<div class="carousel-item" style="background-color: yellow;">
<img src="https://via.placeholder.com/600x150/ff0000" class="d-block w-100" alt="Second Slide">
</div>
<div class="carousel-item" style="background-color: blue;">
<img src="https://via.placeholder.com/600x150" class="d-block w-100" alt="Third Slide">
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Disregard this question. I wasn't saving my selected framework which was latest bootstrap version in codeply. It works fine.
I'm in the process of learning Bootstrap (v4.5.2), and wanted to create a simple carousel that slides automatically for my website. I went to Bootstrap documentation and copied the example code for a carousel with slides only (https://getbootstrap.com/docs/4.5/components/carousel/), and added some color and height to the divs to see if it was working. Here is the code:
.carousel-item {
height: 100px;
}
<!-- Bootstrap v4.5.2 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<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/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" style="background-color:red;">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item" style="background-color:blue;">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item" style="background-color:yellow;">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>
As you can see, everything works fine except the sliding animation. If instead of v4.5.2 I use v4.0.0 of bootstrap (with the exact same code) it works perfectly fine:
.carousel-item{
height: 100px;
}
<!--Bootstrap v4.0.0 CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<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/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause: "hover";>
<div class="carousel-inner">
<div class="carousel-item active" style="background-color:red;">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item" style="background-color:blue;">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item" style="background-color:yellow;">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>
But I would like to use the latest version of the framework if possible.
I have noticed that even in the documentation pages, in v4.0.0 sliding animation works on the example slides (https://getbootstrap.com/docs/4.0/components/carousel/), but not in v4.5.2 (https://getbootstrap.com/docs/4.5/components/carousel/), so I'm guessing this might be a bug from the newer version? Or maybe as I'm a newbie I'm doing something wrong? Thanks in advance for your answers, I hope the question is clear and well written, it's my first time asking somtehing over here.
After hours of research I think I just found out what was causing the error. It seems like on the newest updates some bootstrap code has the feature (prefers-reduced-motion), a CSS media feature that is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. By using this feature the browser will check the configuration of your operating system, and wil display the animations accordingly.
So If you have reduced animations on your operating system configuration then the browser will not show some animations, like in this case. To be able to see the animation you must do the following:
OSX: Settings > General > Accessibility > Reduce Motion
IOS: System Preferences > Accessibility > Display > Reduce Motion
Windows: Settings > Ease of Access > Show animations in Windows > ON
For more info about this check out this issue on github.
Working from chrome using windows, I turned ON the "show animations in windows" button and everything works perfectly now. Hope this helps guys, and sorry if it was a trivial issue.
Slide Animation issue on Bootstrap v4.5.2 & v5.1 (https://getbootstrap.com/docs/4.5/components/carousel/)
I manage to fix it using additional CSS
<style>
.carousel-item{
transition: -webkit-transform .6s ease;
transition: transform .6s ease;
transition: transform .6s ease,-webkit-transform .6s ease;
}
</style>
then the animation slide started working, I don't need to explain reading the code tells everything.
Can you help me do a css for this sample?
I want to display the card in 1 column when it's view on tablet devices,
and 2 column if it's view on desktop.
Sample
Thanks!
You should use Bootstrap's grid system here. I have attached a sample code with just two divs. This is for your better understanding. Before you proceed to cards, first play around with the grid system and make yourself wise in it. This is as simple as it looks. A bootstrap row is divided by equal 12 columns. They can be represented using- lg- large device, md- medium device, sm- small device and xs- extra small device.
col-lg-6 col-md-12 -This implies that, the DOM elements should take 6 columns of a row when it is in Desktop view and 12 columns when it is in Tablet view.
Make sure you learn how media queries work, then proceed with bootstrap's grid system. Hope it helps!.. Happy coding.!!
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
#div1{
background: #0ef;
}
#div2{
background: #fe0;
}
</style>
</head>
<body>
<div class="jumbotron">
<div class="row">
<div class="col-lg-6 col-md-12" id="div1">div 1</div>
<div class="col-lg-6 col-md-12" id="div2">div 2</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Grid system - bootstrap 4
https://getbootstrap.com/docs/4.3/layout/grid/
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
It would be pretty simple using css grid.
Let’s say you have 4 divs. Put those in a container. Set that container to:
container {
display: grid;
grid-template-columns: auto auto;
}
This sets 2 automatically scaled columns normally.
and then set a media query for your selected width of a tablet
#media (max-width: 500px) {
container {
grid-template-columns: auto;
}
}
This means up to 500px, there will only be one column. No one else used css grid so I thought it would be cool to show.
I might have mixed up columns and rows cause I’m dumb but yea that’s it. I suggest you learn about media queries, and css grid/flexgrid/bootstrap
I'm in my beginning of Web development, and I built a simple HTML web page with bootstrap-4.
I want to display 2 card horizontally so the image card will be in the left to the text card. When the screen is small I want the image to be below the text card. But if the card in the left to the second card it automatically display above it.
My code is like that:
<div class="container">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Cranes_made_by_Origami_paper.jpg/220px-Cranes_made_by_Origami_paper.jpg" class="card-img-bottom" alt="...">
</div>
<div class="col-md-7">
<div class="card-body">
<p>The text card in the right to the image card.</p>
<p>In small page the text card below to the image card.<br>But I want to display it above the image card.</p>
</div>
</div>
</div>
</div>
</div>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title>Que</title>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Cranes_made_by_Origami_paper.jpg/220px-Cranes_made_by_Origami_paper.jpg" class="card-img-bottom" alt="...">
</div>
<div class="col-md-7">
<div class="card-body">
<p>The text card in the right to the image card.</p>
<p>In small page the text card below to the image card.<br>But I want to display it above the image card.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
The horizontal result is:
And the vertical result for small screen is:
I want to display the image in the bottom, below to the text card in small screens, but in the left in wide screens.
Thank you for your help!
Set order class order-1 ,order-2 and order-md-1, order-md-2 for changing position for desktop and mobile
Since Bootstrap 4 is flexbox, it's easy to change the order of
columns. The cols can be ordered from order-1 to order-12,
responsively such as order-md-12 order-2 (last on md, 2nd on xs)
relative to the parent .row, The responsive ordering classes are
order-first, order-last and order-0 - order-12.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title>Que</title>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-5 order-md-1 order-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Cranes_made_by_Origami_paper.jpg/220px-Cranes_made_by_Origami_paper.jpg" class="card-img-bottom" alt="...">
</div>
<div class="col-md-7 order-md-2 order-1">
<div class="card-body">
<p>The text card in the right to the image card.</p>
<p>In small page the text card below to the image card.<br>But I want to display it above the image card.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I have a square grid. I would like to make the size of the pictures smaller by specifying measurement, while retaining the 2x2 shape, or 3x3 shape etc. Tried setting the width property but did not work. Currently its too big.
How would I resolve this?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-6 p-0"><img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image" class="w-100 h-100"></div>
<div class="col-6 p-0"><img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7" class="w-100 h-100"></div>
<div class="col-6 p-0"><img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png" class="w-100 h-100"></div>
<div class="col-6 p-0"><img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpgColumn" class="w-100 h-100"></div>
</div>
</div>
Even though pictures are smaller , they should touching edge to edge-
For some reason, this is not working
make images the same size in bootstrap grid
This is one way in CSS, looking for Bootstrap way, using grid-template-columns
CSS:
.grid-container {
display: grid;
grid-template-columns: 100px 100px;
grid-gap: 0em;
padding: 0px;
}
img {
width: 100%;
height: auto;
padding:0px;
}
HTML:
<div class="grid-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
</div>
Another helpful site:
https://webdesign.tutsplus.com/tutorials/create-a-css-grid-image-gallery-with-blur-effect-and-interaction-media-queries--cms-32287
HTML Create an Equal Size Square Grid Picture System
Specify Number of Rows and Columns in Grid
HTML Specify Divider gap measurement in Square Grid Picture
Hopefully this will help you out?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="row no-gutters">
<div class="col-md-6">
<img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image" alt="Fruit" style="width:100%;height:400px">
</div>
<div class="col-md-6">
<img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg" alt="Fruit" style="width:100%;height:400px">
</div>
<div class="col-md-6">
<img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png" alt="Book" style="width:100%;height:400px">
</div>
<div class="col-md-6">
<img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg" alt="Book" style="width:100%;height:400px">
</div>
</div>
</div>
all images should be of same size e.g 512*512px.
<div class="row">
<div class="col-md-12 p-0">
<img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image"
class="">
<img
src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7" style="margin-left:-4px;">
</div>
</div>