I am creating an app using bootstrap which house tile like style. I am new to this web designing and I bit struggling to get these tiles arranged. My requirement is, I would like to place 4 tiles inside a carousel such that each slide should contain 4 tiles.
I tried using col-cm-6 to divide the container equally. But tile stays to left aligned.
<div class="container">
<div class="row">
<h1>Sample tiles using bootstrap classes</h1>
<div class="row">
<div class="col-sm-6">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive danger" /></a>
</div>
<div class="col-sm-6 ">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
</div>
<div class="col-sm-6 ">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
</div>
<div class="col-sm-6 ">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
</div>
</div>
</div>
</div>
Could anyone please tell me what I am missing.
Regards,
Raaj
Usetext-center
DEMO: demo full screen
<div class="container text-center">
<h1>Sample tiles using bootstrap classes</h1>
<div class="row">
<div class="col-sm-6">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive danger" /></a>
</div>
<div class="col-sm-6 ">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
</div>
<div class="col-sm-6 ">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
</div>
<div class="col-sm-6 ">
<a href="#" title="Image 1">
<img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a>
</div>
</div>
</div>
CSS:
.thumbnail {
margin: 0 auto;
}
Related
I have 6 photos and on md size I would like to have a slider to show them all, on lg they are all displayed side by side and on sm they are displayed 1 per row so there is no problem. Basically I am saying that I don't want to have 2 rows on md but 1 with a slider.
Here is how it looks now
but I would like to make it look like this
the blue line is supposed to be a slider that slides right to reveal more photos.
This is the code I am using now
<div class="row align-items-center text-center">
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" id="">
<img src="./assets/GAMES/fortnite.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/gta5.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/leagueoflegends.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/mobile legends.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/minecraft.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/rust.jpg" alt="" class="rounded">
</a>
</div>
</div>
Is it possible to do? What do i have to learn to do it? Any links would be appreciated.
You may use the media query to set the flex-wrap and overflow for the respective screen width. I have set the minimum width as 768px and max-width as 991.98px. You may change it accordingly. Please run the code snippet for the output.
#media (min-width: 768px) and (max-width: 991.98px) {
.row {
flex-wrap: nowrap !important;
overflow: auto !important;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="row align-items-center text-center">
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" id="">
<!-- <img src="./assets/GAMES/fortnite.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/gta5.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/leagueoflegends.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/mobile legends.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/minecraft.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/rust.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
</div>
You can dynamically create a corousel item (slide) for each of 4 card by using js and use corousel of bootstrap 4 to show sliding row.
Corousel
Instead of putting up a slider to move around the images, we can actually create a carousel effect with bootstrap. It will provide a breath-taking experience to the users. Here's the code for it.
PS: Edit the class and ID names as per your requirements.
<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>
This question already has answers here:
Bootstrap row with columns of different height
(3 answers)
Closed 6 years ago.
How to fix it?
Please look at this picture and tell me what's wrong.
PS: All the image is 400*250, but the green one is 399*250.I think "img-responsive" class will fix it,but it doesn't work.
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="img\1.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="img\2.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="img\3.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="img\4.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="img\5.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="img\6.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="img\7.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="img\8.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="img\9.jpg" alt="">
</a>
</div>
</div>
</div>
</body>
</html>
try this, may be this will help you, here i have taken guitar image (400*250) and aeroplane image(399*250) as you mentioned
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#media only screen and (min-width : 980px) {
.img-responsive {
height:250px !important;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="http://www.pilotstoresusa.com/resize/Shared/images/jcwings/JC4QBA020.jpg?lr=t&bh=250" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt="">
</a>
</div>
<div class="col-md-4">
<a href="" class="thumbnail">
<img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt="">
</a>
</div>
</div>
</div>
</body>
</html>
Creating a frontpage for a takeout restaurant.
The problem i am having is that the last row won't fit inside because of a double height element.
Code
<div class="row">
<a class="col-md-3 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x900">
</a>
<div class="col-md-9">
<div class="row">
<a class="col-md-4 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x600">
</a>
<div class="col-md-8">
<div class="row">
<a class="col-md-6 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
<a class="col-md-6 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
</div>
<div class="row">
<a class="col-md-6 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
<a class="col-md-6 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x600">
</a>
</div>
</div>
</div>
<div class="row">
<a class="col-md-4 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
<a class="col-md-4 img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
</div>
</div>
</div>
Screenshot of problem
How can I fit the last 2 elements on the same row as the rest?
http://www.bootply.com/KSRUmHINHw
You need to use nested grid rows with this. So the second column is really made up of two rows.
<div class="container">
<div class="row">
<div class="col-md-3"><img src="http://placehold.it/100x200"></div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/100x175"></div></div>
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/100x25"></div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/100x175"></div></div>
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/100x25"></div>
</div>
</div>
<div class="col-md-3"><img src="http://placehold.it/100x200"></div>
</div>
</div>
You need to set the rows differently. Think of the two rows on the left, as one group, and the double height item on the right, as a second group. They are both on the same row.
<div class="col-md-9">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
<a class="img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x600">
</a>
</div>
<div class="col-md-6">
<a class="img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
<a class="img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
</div>
</div>
<div class="row">
<div class="col-md-6">
<a class="img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
</div>
<div class="col-md-6">
<a class="img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
</div>
</div>
</div>
<div class="col-md-4">
<a class="img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x300">
</a>
<a class="img-box img-hover" href="#">
<img class="img-responsive" src="http://placehold.it/480x600">
</a>
</div>
</div>
codepen live example: http://codepen.io/narxx/pen/vGbzvR
I am trying to get 4 columns in a row.
Code:
<div class="banner-static" style="margin-top: 30px; margin-bottom: 15px;">
<div class="row">
<div class="home-banner">
<div class="col2 col-xs-12 col-sm-4 col-md-4">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner1_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner1.jpg" alt="" />
</a>
</p>
</div>
<div class="col2 col-xs-12 col-sm-4 col-md-4">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner2_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner2.jpg" alt="" />
</a>
</p>
</div>
<div class="col2 col-xs-12 col-sm-4 col-md-4">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner3_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner3.jpg" alt="" />
</a>
</p>
</div>
<div class="col2 col-xs-12 col-sm-4 col-md-4">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner3_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner3.jpg" alt="" />
</a>
</p>
</div>
</div>
</div>
</div>
But i only get 3 columns, the last image jumps into to next row. Can somebody point me into the right direction ?
Thanks
Just apply the col-sm-3, col-md-3 class on columns instead of col-sm-4, col-md-4.
<div class="banner-static" style="margin-top: 30px; margin-bottom: 15px;">
<div class="row">
<div class="home-banner">
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><img class="top" src="/img/cms/banner1_hover.jpg" alt="" /> <img class="bottom" src="/img/cms/banner1.jpg" alt="" /></p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><img class="top" src="/img/cms/banner2_hover.jpg" alt="" /> <img class="bottom" src="/img/cms/banner2.jpg" alt="" /></p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><img class="top" src="/img/cms/banner3_hover.jpg" alt="" /> <img class="bottom" src="/img/cms/banner3.jpg" alt="" /></p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><img class="top" src="/img/cms/banner3_hover.jpg" alt="" /> <img class="bottom" src="/img/cms/banner3.jpg" alt="" /></p>
</div>
</div>
</div>
</div>
Replace col-sm-4 and col-md-4 with col-sm-3 and col-md-3. Twitter Bootstrap is a 12 column grid system and hence 4+4+4+4= 16 will push the last column to next row.
<div class="banner-static" style="margin-top: 30px; margin-bottom: 15px;">
<div class="row">
<div class="home-banner">
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner1_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner1.jpg" alt="" />
</a>
</p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner2_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner2.jpg" alt="" />
</a>
</p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner3_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner3.jpg" alt="" />
</a>
</p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner3_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner3.jpg" alt="" />
</a>
</p>
</div>
</div>
</div>
</div>
Try this
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><img class="top" src="/img/cms/banner1_hover.jpg" alt="" /> <img class="bottom" src="/img/cms/banner1.jpg" alt="" /></p>
</div>
The Bootstrap grid is split up into 12 columns. Divide 12 by the number of columns you want, and you will get the number for that class.
For example, 12 divided by 4, is 3. So your classes should be col-sm-3 and col-md-3.
https://getbootstrap.com/examples/grid/
I managed to make a bootstrap3 modal box as a img slider to my thumbnails.
the only leftover problem i have is that if i click on a img it the slider always begins SOMEWHERE.. not at the img i clicked on.
Please Help me!!!
Here's my code:
<div class="container"data-toggle="modal" data-target="#myModal">
<div class="row">
<h1>Zeichnungen</h1>
<div class="row">
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 1" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/1.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 2" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/2.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 3" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/3.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 4" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/4.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 5" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/5.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 6" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/6.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 7" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/7.jpg"></a></div>
<div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 8" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/8.jpg"></a></div>
</div>
</div>
</div>
`
<!-- Modal-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" style="display: none;" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div id="modalCarousel" class="carousel">
<div class="carousel-inner">
<div class="item" title="Image 1">
<h3 class="modal-title">Image 1</h3>
<img class="thumbnail img-responsive" src="Zeichnungen/1.jpg">
</div>
<div class="item " title="Image 2">
<h3 class="modal-title">Image 2</h3>
<a href="#" title="Image 2">
<img class="thumbnail img-responsive" src="Zeichnungen/2.jpg">
</a>
</div>
<div class="item" title="Image 3"><h3 class="modal-title">Image 3</h3>
<a href="#" title="Image 3">
<img class="thumbnail img-responsive" src="Zeichnungen/3.jpg">
</a>
</div>
<div class="item" title="Image 4"><h3 class="modal-title">Image 4</h3>
<a href="#" title="Image 4">
<img class="thumbnail img-responsive" src="Zeichnungen/4.jpg">
</a>
</div>
<div class="item" title="Image 5"<h3 class="modal-title">Image 5</h3>
<a href="#" title="Image 5">
<img class="thumbnail img-responsive" src="Zeichnungen/5.jpg">
</a>
</div>
<div class="item" title="Image 6"<h3 class="modal-title">Image 6</h3>
<a href="#" title="Image 6">
<img class="thumbnail img-responsive" src="Zeichnungen/6.jpg">
</a>
</div>
<div class="item" title="Image 7"<h3 class="modal-title">Image 7</h3>
<a href="#" title="Image 7">
<img class="thumbnail img-responsive" src="Zeichnungen/7.jpg">
</a>
</div>
<div class="item" title="Image 8"<h3 class="modal-title">Image 8</h3>
<a href="#" title="Image 8">
<img class="thumbnail img-responsive" src="Zeichnungen/8.jpg">
</a>
</div>
</div>
<a class="carousel-control left" href="#modaCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="carousel-control right" href="#modalCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- Modal end-->`
To have the thumbnails link to an image within the slideshow, you'll have to link those thumbnails with the data attributes for the modal target and the slide it should reference. Documentation here: http://getbootstrap.com/javascript/#carousel
Example:
<div class="col-lg-3 col-sm-4 col-xs-6">
<a title="Image 3" href="#" data-target="#myModal" data-slide-to="2">
<img class="thumbnail img-responsive" src="Zeichnungen/3.jpg">
</a>
</div>