I'm working with bootstraps cards. I have card-header and card-footer and they are working great. In the card-body I have a card-title. This title can take up 1 or 2 lines in the card-body. Also inside this card-body I have some information in a div. I want to align this informational div to the card-body bottom as I use row/col to align things nicely but because 1 card-title is 1 line and another is 2 lines when you look across cards in the page this additional information doesn't line up exactly between cards and bottom aligning would solve that I think.
So basically I want the orangered divs to line up at the bottom of their cards because then visually across cards they would look to line up.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
</style>
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>
I did a few things:
added position:absolute with some (24%) clearance from the bottom;
the container class implemented a width of 100%, which is why the box now went outside the boundary;
card-body class implemented a 20px padding
To get the exact styling, we removed the width 20px from the 100% width (from the cowntainer)
complete snippet below:
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
.orangeRedClass {
position: absolute;
bottom: 24%;
width: calc(100% - 40px) !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>
Related
I have posted the same question two days earlier but didn't get any
answer so I'm posting again this question. May be I get lucky this time.
My slider buttons are working fine with static data, but they don't
work with the dynamic data. And unable to show the next or previous
slide.
My HTML Code
<section class="browse-cat u-line section-padding">
<div class="container">
<div class="row">
<div class="col-12">
<div class="swiper-wrapper">
<div class="swiper-slide myreward-slider-item col-md-4" *ngFor="let reward of readableRewards; let i = index">
<a href="javascript:void(0);">
<div class="myreward-slider-img">
<img
src="{{reward?.Image}}"
class=""
alt="rewards">
</div>
</a>
<div class="row">
<div class="col-md-6 text-left padding-20">
<span class="text-light-black cat-name"><b>{{reward?.Title}}</b></span>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
</section>
My CCS Code
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 14px;
font-weight: 900;
color: #ff0018;
background: #ff0018;
}
.swiper-button-next {
right: 10px;
}
.swiper-button-prev {
left: 10px;
}
.swiper-button-disabled {
display: none;
}
i have a ready made owl carousal slider in which the images slide automatically and there is a navigation at the top, now i have added tow more sliders of the same. but the problem is the navigation arrows are coming in one line instead of its corresponding sliders like below:
<div class="owl-carousel" data-autoplay="true" data-items="1" data-sm-items="2" data-lg-items="3" data-xl-items="4" data-margin="30" data-mouse-drag="false" data-navigation-class="#owl-custom-nav-1">
i have tried using margin top and padding and all, but none of it is working, can anyone please tell mw how to make the arrows above its corresponding sliders. thanks
$(document).ready(function() {
$("#owl-demo, #owl-demo-1").each(function() {
$(this).owlCarousel({
items : 6, //10 items above 1000px browser width
itemsDesktop : [1000,6], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
});
// Custom Navigation Events
$(".next").click(function(){$(this).closest('.span12').find('.owl-carousel').trigger('owl.next');})
$(".prev").click(function(){$(this).closest('.span12').find('.owl-carousel').trigger('owl.prev');})
});
#owl-demo .item, #owl-demo-1 .item{
background: #3fbf79;
padding: 30px 0px;
margin: 10px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
width: 190px;
}
.customNavigation{
text-align: center;
}
.customNavigation a{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
<div class="item">
<h1>9</h1>
</div>
<div class="item">
<h1>10</h1>
</div>
</div>
<div class="customNavigation"> <a class="btn prev">Previous</a> <a class="btn next">Next</a> </div>
</div>
</div>
</div>
</div>
<div id="demo-1">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo-1" class="owl-carousel">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
<div class="item">
<h1>9</h1>
</div>
<div class="item">
<h1>10</h1>
</div>
</div>
<div class="customNavigation"> <a class="btn prev">Previous</a> <a class="btn next">Next</a> </div>
</div>
</div>
</div>
</div>
I'm just trying to make fluid responsive layout through <img src="" alt="" /> tags but I made it through background image.
Is there any way to make this layout with img tag ?
XD Example
Front End Code
html,
body {
height: 100%;
width: 100%;
}
.cmd-three-img-container {
margin-bottom: 30px;
height: 250px;
display: flex;
}
.cmd-main-img {
position: relative;
width: 50%;
height: 100%;
margin-left: 5px;
background: url(https://i.imgur.com/9Q9pgmR.jpg);
background-size: cover;
background-position: center;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.cmd-img-stacked {
width: 50%;
height: 100%;
}
.cmd-img-overlay {
padding-right: 10px;
padding-top: 10px;
}
.cmd-img-overlay h4 {
float: right;
font-size: 18px;
color: #fff;
}
.cmd-top-img,
.cmd-bottom-img {
width: 100%;
height: calc(50% - 2.5px);
}
.cmd-top-img {
background: url(https://i.imgur.com/9Q9pgmR.jpg);
background-size: cover;
background-position: center;
border-top-left-radius: 4px;
}
.cmd-bottom-img {
background: url(https://i.imgur.com/hxiPgcK.jpg);
background-size: cover;
background-position: center;
border-bottom-left-radius: 4px;
}
.cmd-top-img {
margin-bottom: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
</div>
</div>
You just split the child column within the parent column and add the bootstrap 4 default class d-flex align-items-stretch h-100 stretch the image until column end. set border-radis for corners separately as per your requirement. I hope this example you will find the solution.
.row.eqcol {
padding-right: 10px;
}
.row.eqcol div[class^="col-"] {
padding: 0;
padding-right: 5px;
}
.text-overlay h3 {
font-size: 20px;
color: #fff;
}
.text-overlay {
position: absolute;
font-size: 14px;
top: 5px;
right: 5px;
}
.cmd-three-img-container {
position: relative;
}
.cmd-three-img-container img {
object-fit: cover;
padding-bottom: 5px;
width: 100%;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container my-3">
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="row eqcol">
<div class="col-6">
<div class="cmd-three-img-container left-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
</div>
</div>
<div class="col-6">
<div class="cmd-three-img-container d-flex align-items-stretch h-100 right-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<div class="text-overlay">
<h3>Office</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="row eqcol">
<div class="col-6">
<div class="cmd-three-img-container left-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
</div>
</div>
<div class="col-6">
<div class="cmd-three-img-container d-flex align-items-stretch h-100 right-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<div class="text-overlay">
<h3>Office</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="row eqcol">
<div class="col-6">
<div class="cmd-three-img-container left-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
</div>
</div>
<div class="col-6">
<div class="cmd-three-img-container d-flex align-items-stretch h-100 right-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<div class="text-overlay">
<h3>Office</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="row eqcol">
<div class="col-6">
<div class="cmd-three-img-container left-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
</div>
</div>
<div class="col-6">
<div class="cmd-three-img-container d-flex align-items-stretch h-100 right-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<div class="text-overlay">
<h3>Office</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Hello I work on create bootstrap testimonials using bootstrap carousel, so I Divided every item into 3 boxes and it's work well but the problem will be appear in responsive media screen that the section height will be not proper:
so my Idea is the JQuery code will check If the window width is less than 767px then will cut the .col-xs-12:eq(1) and append it after .item then wrap it in row Div then Wrap it in .item Div:
Here a simple example:
Before:
<div class="item active">
<div class="row">
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
After: the code will check if the window width is less than 767px then will do this actions:
<div class="item active">
<div class="row">
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4 moved">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4 moved">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
Here my snippet:
; (function ($) {
"use strict";
var $windowWidth = $(window).width();
if ($windowWidth < 767) {
$('#pencil-testimonials_2 .item').each(function (index, element) {
$(this).find(".col-xs-12:eq(1)").addClass('moved').appendTo($(this)).wrap('<div class = "row"> </div>').wrap('<div class = "item" > </div>');
$(this).find(".col-xs-12:eq(2)").addClass('moved').appendTo($(this)).wrap('<div class = "row"> </div>').wrap('<div class = "item" > </div>');
});
}
})(jQuery);
#pencil-testimonials_2 {
min-height: 375px;
padding: 50px 0;
position: relative;
background-color:aquamarine;
}
#pencil-testimonials_2 .carousel-indicators {
width: 100%;
height: auto;
position: absolute;
bottom: 20px;
left: 0;
margin: 0;
list-style: none;
text-align: center;
}
#pencil-testimonials_2 .carousel-indicators > li {
display: inline-block;
width: 14px;
height: 14px;
margin: 0;
margin-right: 3px;
border:1px solid #838383;
background-color:transparent;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#pencil-testimonials_2 .carousel-indicators > li.active {
width: 14px;
height: 14px;
background-color: #838383;
border: 1px solid transparent;
margin-right: 3px;
}
#pencil-testimonials_2 .text-image{
height:150px;
border:1px solid #ffffff;
margin: 0 0 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="pencil-testimonials_2" class="carousel slide" data-ride="carousel" data-pause="hover" data-interval="100000" data-duration="1000">
<ol class="carousel-indicators">
<li data-target="#pencil-testimonials_2" data-slide-to="0" class="active">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="1">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="2">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="3">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="4">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="5">
</li>
</ol>
<div class="container">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<!-- End of First Slide -->
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<!-- End of Second Slide -->
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<!-- End of Third Slide -->
</div>
</div>
</div>
Here's what you can do:
.carousel.slide {
min-height: 375px;
padding: 50px 0;
position: relative;
background-color:aquamarine;
}
.carousel.slide .carousel-indicators {
width: 100%;
height: auto;
position: absolute;
bottom: 20px;
left: 0;
margin: 0;
list-style: none;
text-align: center;
}
.carousel.slide .carousel-indicators > li {
display: inline-block;
width: 14px;
height: 14px;
margin: 0;
margin-right: 3px;
border:1px solid #838383;
background-color:transparent;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.carousel.slide .carousel-indicators > li.active {
width: 14px;
height: 14px;
background-color: #838383;
border: 1px solid transparent;
margin-right: 3px;
}
.carousel.slide .text-image{
height:150px;
border:1px solid #ffffff;
margin: 0 0 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="pencil-testimonials_1" class="carousel slide hidden-xs hidden-sm" data-ride="carousel" data-pause="hover" data-interval="100000" data-duration="1000">
<ol class="carousel-indicators">
<li data-target="#pencil-testimonials_1" data-slide-to="0" class="active">
</li>
<li data-target="#pencil-testimonials_1" data-slide-to="1">
</li>
<li data-target="#pencil-testimonials_1" data-slide-to="2">
</li>
</ol>
<div class="container">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-4">
<div class="text-image">
Hello World 1
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 2
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 3
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="text-image">
Hello World 4
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 5
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 6
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="text-image">
Hello World 7
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 8
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 9
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="pencil-testimonials_2" class="carousel slide hidden-md hidden-lg" data-ride="carousel" data-pause="hover" data-interval="100000" data-duration="1000">
<ol class="carousel-indicators">
<li data-target="#pencil-testimonials_2" data-slide-to="0" class="active">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="1">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="2">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="3">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="4">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="5">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="6">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="7">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="8">
</li>
</ol>
<div class="container">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 1
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 2
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 3
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 4
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 5
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 6
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 7
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 8
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 9
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Basically, you just create two carousels and hide the one you don't want using Bootstrap's utility classes: hidden-xs, hidden-sm, hidden-md and hidden-lg. If you need more control, you can always create a third one for tablets.
I'm trying to create a footer with bootstrap rows and columns, and I want to make the footer smaller by reducing the space between rows. I've tried changing the margin and padding of the rows to no avail.
<footer class="footerClass">
<div class="row footerRow">
<div class="col-md-4">
<b>Content</b>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-4">
</div>
</div>
<div class="row footerRow">
<div class="col-md-4">
<p>Content</p>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-4">
<p> </p>
</div>
</div>
<div class="row footerRow">
<div class="col-md-4">
<p>Content</p>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-2">
<p><b>Content</b></p>
</div>
<div class="col-md-3">
<p><b>Content</b></p>
</div>
</div>
<div class="row footerRow table-condensed">
<div class="col-md-4">
<p> </p>
</div>
<div class="col-md-3">
<p>www.Content.org</p>
</div>
<div class="col-md-4">
<p> </p>
</div>
</div>
</footer>
It's likely that your additional classes have caused the spacing issues that you're seeing. I would rewrite your footer in the following way to see if it resolves your issue:
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<b>Content</b>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-4">
</div>
</div>
<div class="row">
<div class="col-md-4">
<p>Content</p>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-4">
<p> </p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<p>Content</p>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-2">
<p><b>Content</b></p>
</div>
<div class="col-md-3">
<p><b>Content</b></p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<p> </p>
</div>
<div class="col-md-3">
<p>www.Content.org</p>
</div>
<div class="col-md-4">
<p> </p>
</div>
</div>
</div>
</footer>
Also, typically when using bootstrap grids, your column width would add up to 12 for each row. This may have been intentional.
I use the following classes to handle vertical spacing in my designs:
.voffset { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }
.boffset { margin-bottom: 2px; }
.boffset1 { margin-bottom: 5px; }
.boffset2 { margin-bottom: 10px; }
.boffset3 { margin-bottom: 15px; }
.boffset4 { margin-bottom: 30px; }
.boffset5 { margin-bottom: 40px; }
.boffset6 { margin-bottom: 60px; }
.boffset7 { margin-bottom: 80px; }
.boffset8 { margin-bottom: 100px; }
.boffset9 { margin-bottom: 150px; }
The minimum width of the media query "col-md-xx" is 992px , Try to apply class with "col-sm-xx". May be You are asking this.