I have added code for thumbnail sliders it should display all the thumnail images and should move one by one.It is working fine for mobile devices but getting problem in desktop.It is displaying only one image and it is sliding but i need to display all the images and the image should slide one by one.
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<!-- Quote 1 -->
<div class="item active">
<div class="row">
<div class="col-xs-18 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="images/gallery/01.jpg" alt="">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
</div>
</div>
</div>
</div>
</div>
<!-- Quote 2 -->
<div class="item">
<div class="row">
<div class="col-xs-18 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="images/gallery/02.jpg" alt="">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
</div>
</div>
</div>
</div>
</div>
</div>
This is the code which i have added.
Here is the fiddle link: http://jsfiddle.net/5j07ogyc/
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel carousel-showmanymoveone slide" id="carousel123">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-3">
<img src="images/gallery/01.jpg" class="img-responsives">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
similique suscipit</p>
</div>
</div>
</div>
<div class="item">
<div class="col-md-3">
<img src="images/gallery/02.jpg" class="img-responsives">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
similique suscipit</p>
</div>
</div>
</div>
<div class="item">
<div class="col-md-3">
<img src="images/gallery/03.jpg" class="img-responsives">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
similique suscipit</p>
</div>
</div>
</div>
<div class="item">
<div class="col-md-3">
<img src="images/gallery/04.jpg" class="img-responsives">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
similique suscipit</p>
</div>
</div>
</div>
<div class="item">
<div class="col-md-3">
<img src="images/gallery/01.jpg" class="img-responsives">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
similique suscipit</p>
</div>
</div>
</div>
<div class="item">
<div class="col-md-3">
<img src="images/gallery/02.jpg" class="img-responsives">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
similique suscipit</p>
</div>
</div>
</div>
<div class="item">
<div class="col-md-3">
<img src="images/gallery/03.jpg" class="img-responsives">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
similique suscipit</p>
</div>
</div>
</div>
<div class="item">
<div class="col-md-3">
<img src="images/gallery/04.jpg" class="img-responsives">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
similique suscipit</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Jquery:
(function () {
$('#carousel123').carousel({ interval: 2000 });
$('#carouselABC').carousel({ interval: 3600 });
}());
(function () {
$('.carousel-showmanymoveone .item').each(function () {
var itemToClone = $(this);
for (var i = 1; i < 4; i++) {
itemToClone = itemToClone.next();
// wrap around if at end of item collection
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
// grab item, clone, add marker class, add to collection
itemToClone.children(':first-child').clone()
.addClass("cloneditem-" + (i))
.appendTo($(this));
}
});
}());
solved by adding this as a slider and responsive
Related
i have the problem with tailwind that the w-96 show correct and w-86 show not correct, what is the problem ?
<body>
<div class="mx-auto mt-20 mx-10">
<div class="mx-auto justify-center w-98">
<img class="" src="/image-product-mobile.jpg" alt="" srcset="" />
<h1 class="font-bold">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Incidunt, accusamus.</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Cupiditate praesentium eius deserunt aliquid cum saepe quod nemo provident magni modi.</p>
</div>
</div>
</body>
</html>
here the picture
w-86 is not a Tailwind class.
https://tailwindcss.com/docs/width
See the section on "Customizing your theme" and "Arbitrary values" on the above link.
I'm trying to figure out how to dynamically calculate the width and padding-left within a custom div within a bootstrap "container-fluid".
The setup looks like this:
<div class="container-fluid">
<div class="row">
<!-- Text - Slider component -->
<div class="container-fluid">
<div class="row">
<div class="col-6 text"></div>
<div class="col-6 slider"></div>
</div>
</div>
<!-- Text - Slider component -->
<div class="container">
<div class="row">
<div class="col-12 text-to-line-up-with">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, totam.
</div>
</div>
</div>
</div>
</div>
Within the text-slider component I would like the col-6 "text" to lineup with the text asif it lives in the regular 'container'.
I understand that I need to use some sort of calc() for the padding-left and width, but I can't wrap my head around this.
Any help or suggestions are very much welcome!
Disclaimer, this is an old project, which is still using bootstrap 3, and I can't change the html structure.
I also made a codepen to give a better picture
You don't have to calculate the width. The solution can be much easier with simply adding linear-gradient to your container-fluid background.
The HTML code structrure looks like this:
<div class="container-fluid red-blue py-4">
<div class="row">
<div class="container">
<div class="row">
<div class="col-6 red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
<div class="col-6 blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
</div>
</div>
</div>
</div>
<br>
<div class="container">
<div class="row">
<div class="col-6 red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
<div class="col-6 blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
</div>
</div>
And the CSS:
.red-blue {
background: linear-gradient(to right, red 50%, blue 50%,blue 100%);
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
Hope this helps.
Below is the code sample... the cards are ordered vertically and not sure how to order or display them horizontally...
I am trying to get the data from a database (data will be ordered based on date) and want to display the latest posts on the top row, not the first column
any help would be appreciated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</head>
<style>
.cards-container {
column-break-inside: avoid;
}
.cards-container .card {
display: inline-block;
overflow: visible;
}
#media only screen and (min-width: 993px) {
.cards-container {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col s12 cards-container">
<div class="card">
<div class="card-image">
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<span class="card-title">Card Title</span>
<a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<p>Test Card 1</p>
<br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi!</p>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<span class="card-title">Card Title</span>
<a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<p>Test Card 2</p>
<br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi!</p>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<span class="card-title">Card Title</span>
<a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<p>Test Card 3</p>
<br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla rerum ea, magni repellat corporis ab voluptates cumque aut quisquam exercitationem obcaecati itaque voluptatem, laborum saepe, eveniet eos doloremque atque! Cum.</p>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<span class="card-title">Card Title</span>
<a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<p>Test Card 4</p>
<br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi!</p>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<span class="card-title">Card Title</span>
<a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<p>Test Card 5</p>
<br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi!</p>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<span class="card-title">Card Title</span>
<a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<p>Test Card 6</p>
<br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi deleniti sequi placeat ab molestias laborum error provident enim pariatur animi quos harum laudantium rerum veniam quisquam, eius nostrum molestiae facilis!</p>
</div>
</div>
</div>
</div>
</body>
</html>
<aside class="col-md-3 pull-left" style="display:table;position: absolute;height: 100%;">
<div class="row" style="display:table-cell;vertical-align: middle">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel 1</h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body" style="height:700px;overflow:scroll;">
<!--Panel content lorem Impsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod repudiandae adipisci ex officia numquam fugiat architecto voluptatum provident. Suscipit neque consectetur laudantium, doloremque fuga quaerat assumenda. Tempore laudantium quos reiciendis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, quis! Odit quam, fugit voluptates beatae dolor quod, aliquam recusandae, nemo impedit aliquid distinctio ratione. Nostrum quae praesentium nemo dignissimos tenetur-->
<dl>
<dt>Music</dt>
<dd>weekend hobby classes</dd>
<hr>
<dt>Digital Marketting</dt>
<dd>Email-Social media,Analytics </dd>
<hr>
<dt>Java</dt>
<dd>Programming classes</dd>
<hr>
<dt>Music</dt>
<dd>weekend hobby classes</dd>
<hr>
<dt>Digital Marketting</dt>
<dd>Email-Social media,Analytics </dd>
<hr>
<dt>Java</dt>
<dd>Programming classes</dd>
<hr>
<dt>Music</dt>
<dd>weekend hobby classes</dd>
<hr>
<dt>Digital Marketting</dt>
<dd>Email-Social media,Analytics </dd>
<hr>
<dt>Java</dt>
<dd>Programming classes</dd>
<hr>
</div>
</div>
</div>
</aside>
you have given height: 700px for panel-body. try to give a little more content and replace overflow: scroll to overflow: auto;
I need to make text wrap around image with bootstrap 4 wihout floats, is it possible?
Here my code:
<article class="row single-post mt-5 no-gutters">
<div class="image-wrapper col-md-6">
<?php the_post_thumbnail(); ?>
</div>
<div class="single-post-content-wrapper p-3">
<?php the_content(); ?>
</div>
</article>
Here what I have now:
Here what I need to have:
I need to make text wrap around image with bootstrap 4 wihout floats, is it possible?
No, in this case, you must use the float-left class for the image. But you don't have to use any wrapper for the image. You can get rid of that wrapper div entirely and add your classes to the image.
Another thing you absolutely must do:
Put all of your content into Bootstrap columns because only Bootstrap columns may be the direct children of Bootstrap rows.
Here's a working code snippet (note: I left the image wrapper div in there but I recommend you get rid of it because that's totally unnecessary code. Add your classes directly to the image):
<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">
<article class="row single-post mt-5 no-gutters">
<div class="col-md-6">
<div class="image-wrapper float-left pr-3">
<img src="https://placeimg.com/150/150/animals" alt="">
</div>
<div class="single-post-content-wrapper p-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
</div>
</div>
</article>
</div>
Updated for Bootstrap 5.0
<div class="container">
<article class="row mt-5 no-gutters">
<div class="col-md-6">
<div class="image-wrapper float-start pe-4 ">
<img src="https://placeimg.com/150/150/animals" alt="">
</div>
<div class="single-post-content-wrapper p-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
</div>
</div>
</article>
<div class="row">
<div class="col-lg-2 col-12">
<div class="icon mb-4 text-center"><i class="fa fa-github"></i></div>
</div>
<div class="col-10">
<h4 class="h4">Title</h4>
<p class="text-muted">Some text here</p>
</div>
I have used this in bootstrap 4.
Why don't you use something like this:
<div class="container">
<img src="img/example.png" align="left" width="50%">
<p>Text here</p>
</div>
Simpe
align="left"
will do the job!