I am struggling with trying to align my responsive images center. If I don't use the <img-responsive> tag they do align centre.
The images are the grey placeholder squares, I want them to be placed center above the text, and then the text AND images to be aligned vertical.
I am using Bootstrap 3
Here is my code.
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<title>Layout3</title>
<style>
.panel1 {
background-color: pink;
height:768px;
align-items: center;
}
.panel2a {
background-color:white;
text-align: center;
align-content: center;
height:384px;
margin:0 auto;
}
.panel2b {
background-color:#3DB39E;
text-align: center;
align-content: center;
height:384px;
margin:0 auto;
}
.panel3 {
background-color:#efc75e;
height:768px;
}
.panel4 {
background-color:#e2574c;
height:768px;
}
.panel5 {
background-color:#3db39e;
height:768px;
}
.panel6 {
background-color:#e2574c;
height:768px;
}
.footer {
background-color:#000000;
</style>
</head>
<body>
<div class="container-full">
<div class="col-lg-12 panel1">
<div class="col-lg-6">
<img class="img-responsive" src="http://placehold.it/456x366" alt="" />
</div>
<div class=" col-lg-6">
<h1>Title</h1>
<p class="lead">description</p>
<p><input type="text" class="form-control" placeholder="e-mail"><a class="btn btn-large btn-success" href="#" target="ext">NOTIFY ME</a></p>
</div>
</div>
<div class="row vcenter">
<div class="col-xs-12 col-md-4 panel2a">
<img class="img-responsive" src="http://placehold.it/80x91" alt="" />
<h1>1</h1>
<p>abc</p>
</div>
<div class="col-xs-12 col-md-4 panel2a">
<img class="img-responsive" src="http://placehold.it/80x91" alt="" />
<h1>2</h1>
<p>def</p>
</div>
<!-- 2b -->
<div class="col-xs-12 col-md-4 panel2a">
<img class="img-responsive" src="http://placehold.it/80x91" alt="" />
<h1>3</h1>
<p>ghi</p>
</div>
<div class="col-xs-12 col-md-4 panel2b">
<img class="img-responsive" src="http://placehold.it/80x91" alt="" />
<h1>4</h1>
<p>jkl</p>
</div>
<div class="col-xs-12 col-md-4 panel2b">
<img class="img-responsive" src="http://placehold.it/80x91" alt="" />
<h1>5</h1>
<p>mno</p>
</div>
<div class="col-xs-12 col-md-4 panel2b">
<img class="img-responsive" src="http://placehold.it/80x91" alt="" />
<h1>6</h1>
<p>pqr</p>
</div>
</div>
>
</div> <!-- /container full -->
</body>
</html>
You can get rid of most of your inline css and apply this general concept to each of your image containers:
<div class="outer" >
<div class="inner">
<img class="img-responsive center-block" src="//placehold.it/200x100" />
<span class="text-center">Description</span>
</div>
</div>
CSS
.outer {
display: table;
width: 100%;
}
.inner {
display: table-cell;
text-align: center;
vertical-align: middle;
}
DEMO: http://www.bootply.com/rE4V28TBqw
Related
Unable to set card footer as expected output
Expected output:
My Code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3">
<div class="card">
<img src="https://images.unsplash.com/photo-1523805009345-7448845a9e53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" class="card-img-top" alt="...">
<div class="card-img-overlay">
<h5 class="card-title"></h5>
</div>
<div class="card-footer text-center">
<h6>
Africa
</h6>
<h4>
Kenya
</h4>
</div>
</div>
</div>
jsfiddle: https://jsfiddle.net/sidh_41/p8sdfy7u/2/
.card-footer:last-child {
border-radius: 0!important;
}
.card-footer {
padding: 0!important;
background-color: unset!important;
border-top: unset!important;
}
.text-center {
color: #fff;
}
.card-img-overlay {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3">
<div class="card">
<img src="https://images.unsplash.com/photo-1523805009345-7448845a9e53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" class="card-img-top" alt="...">
<div class="card-img-overlay">
<h5 class="card-title"></h5>
<div class="card-footer text-center">
<h6>
Africa
</h6>
<h4>
Kenya
</h4>
</div>
</div>
</div>
</div>
Try this:
.card-footer:last-child {
border-radius: 0!important;
}
.card-footer {
padding: 0!important;
background-color: unset!important;
border-top: unset!important;
}
.text-center {
color: #fff;
}
.card-img-overlay {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3">
<div class="card">
<img src="https://images.unsplash.com/photo-1523805009345-7448845a9e53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" class="card-img-top" alt="...">
<div class="card-img-overlay">
<h5 class="card-title"></h5>
<div class="card-footer text-center">
<h6 class="m-0 small">
AFRICA
</h6>
<h1>
Kenya
</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="card">
<img class="card-img" src="https://images.unsplash.com/photo-1523805009345-7448845a9e53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" alt="...">
<div class="card-img-overlay">
<h5 class="card-title"></h5>
<div class="card-footer text-center">
<h6>
Africa
</h6>
<h4>
Kenya
</h4>
</div>
</div>
</div>
</div></div>
I think you need to add another div surrounding the card. This div needs to have the class row
.img-wrapper{
position: relative;
text-align: center;
color: white;
}
.card-footer{
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
h3, h1{
color: #fff
}
<div class="col-md-3">
<div class="card">
<div class="img-wrapper">
<img src="https://images.unsplash.com/photo-1523805009345-7448845a9e53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" class="card-img-top" alt="...">
<div class="card-img-overlay">
<h5 class="card-title"></h5>
</div>
</div>
</div>
<div class="card-footer text-center">
<h3>
Africa
</h3>
<h1>
Kenya
</h1>
</div>
</div>
</div>
I am trying to align images with Bootstrap 4. I've used .row within a .container. I now have whitespace between images and I don't want it to be that way. I want the images aligned immediately next to each other without any spaces. Any suggestions would be appreciated.
<div class="container mycontainer">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6" id="one"> <!-- FIRST ROW LEFT SIDE-->
<img src="./images-for-sample/images-for-sample/investors-img-1.jpg" alt="" class="img-responsive" id="photo-1">
</div>
<div class="col-sm-12 col-md-6 col-lg-6" id="two"> <!-- FIRST ROW RIGHT SIDE-->
<img src="./images-for-sample/images-for-sample/investors-img-4.jpg" alt="" class="img-responsive" id="photo-4">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6" id="three"> <!-- SECOND ROW LEFT SIDE-->
<img src="./images-for-sample/images-for-sample/investors-img-2.jpg" alt="" class="img-responsive" id="photo-2">
</div>
<div class="col-sm-12 col-md-6 col-lg-6" id="four"> <!-- SECOND ROW RIGHT SIDE-->
<img src="./images-for-sample/images-for-sample/investors-img-5.jpg" alt="" class="img-responsive" id="photo-5">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6" id="five"> <!-- THIRD ROW LEFT SIDE-->
<img src="./images-for-sample/images-for-sample/investors-img-3.jpg" alt="" class="img-responsive" id="photo-3">
</div>
<div class="col-sm-12 col-md-6 col-lg-6" id="six"> <!-- THIRD ROW RIGHT SIDE-->
<img src="./images-for-sample/images-for-sample/investors-img-6.jpg" alt="" class="img-responsive" id="photo-6">
</div>
</div>
</div>
The output I get currently is:
In order to achieve your targeted goal you have to remove Bootstrap's paddings for each div and set the images width to 100% of those:
// you could also use img as a selector
.img-responsive {
width: 100%;
}
// this is the selector of your div's
.col-sm-12 {
padding: 0;
}
However, due to your current implementation this would result in the following (for a running fiddle click here):
If you additionally want to remove the whitespaces shown in the image, you could use Bootstrap's card columns like this:
<div class="card-columns">
<div class="card" id="one"> <!-- FIRST ROW LEFT SIDE-->
<img src="https://via.placeholder.com/350x200" alt="" class="img-responsive" id="photo-1">
</div>
<div class="card" id="two"> <!-- FIRST ROW RIGHT SIDE-->
<img src="https://via.placeholder.com/350x150" alt="" class="img-responsive" id="photo-4">
</div>
<div class="card" id="three"> <!-- SECOND ROW LEFT SIDE-->
<img src="https://via.placeholder.com/350" alt="" class="img-responsive" id="photo-2">
</div>
<div class="card" id="four"> <!-- SECOND ROW RIGHT SIDE-->
<img src="https://via.placeholder.com/350x450" alt="" class="img-responsive" id="photo-5">
</div>
<div class="card" id="five"> <!-- THIRD ROW LEFT SIDE-->
<img src="https://via.placeholder.com/350" alt="" class="img-responsive" id="photo-3">
</div>
<div class="card" id="six"> <!-- THIRD ROW RIGHT SIDE-->
<img src="https://via.placeholder.com/350" alt="" class="img-responsive" id="photo-6">
</div>
</div>
and adjust it with some css to your need:
// the default column count is 1 and there should not be a space between the columns
.card-columns {
column-count: 1;
column-gap: 0;
}
// for medium devices and larger set the count to two
#media (min-width: 768px) {
.card-columns {
column-count: 2;
}
}
// reset card's margin bottom
.card {
margin: 0 !important;
}
// scale images properly to fit the divs
img {
width: 100%;
max-width: 100%;
}
The result looks like this:
You can find the running fiddle here.
If you are using Bootstrap 3, have a look at this Medium article.
Good luck!
My code:
.items {
display: grid;
grid-template-columns: repeat(3, 1fr);
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
}
How can I properly display my images as a 3 column grid?
<section id="work-a" class="text-center py-3">
<div class="container">
<h2 class="section-title">My Work</h2>
<div class="bottom-line"></div>
<p class="lead">
Check out some of my projects
</p>
<div class="items">
<div class="item">
<div class="item-image">
<img src="img/items/item1.png" alt="">
</div>
<div class="item-text">
<div class="item-text-wrap">
<p class="item-text-category">Design</p>
<h2 class="item-text-title">Great Gradients</h2>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<img src="img/items/item2.png" alt="">
</div>
<div class="item-text">
<div class="item-text-wrap">
<p class="item-text-category">Design</p>
<h2 class="item-text-title">Great Gradients</h2>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<img src="img/items/item3.png" alt="">
</div>
<div class="item-text">
<div class="item-text-wrap">
<p class="item-text-category">Design</p>
<h2 class="item-text-title">Great Gradients</h2>
</div>
</div>
</div>
</div>
</div>
</section>
What is the best way to Change width of drop down in semantic UI, so that it will be responsive.
<div id="city" class="colomn ui search selection dropdown" style="min-width: 121px; white-space: nowrap; max-width: 251px;">
<input type="hidden" name="country">
<i class="dropdown icon"></i>
<div class="default text">Select City</div>
<div class="menu">
<div class="item" data-value="Ahmedabad">Ahmedabad</div>
<div class="item" data-value="Bangalore">Bangalore</div>
<div class="item" data-value="Chennai">Chennai</div>
<div class="item" data-value="Delhi">Delhi</div>
<div class="item" data-value="Hyderabad">Hyderabad</div>
<div class="item" data-value="Kolkata">Kolkata</div>
<div class="item" data-value="Mumbai">Mumbai</div>
</div>
</div>
<style>
.ui.dropdown>.text {
display: block !important;
overflow: hidden;
}
</style>
I am completely new to bootstrap. And I have made an website in Bootstrap 3.0.
the website was working properly on my laptop. But when I hosted that website some of the images are not loaded in webpage. And further when i try to open the website in mobile device the carousel images are not fitted to carousel i mean it leaves some blank space it does not cover the entire carousel space. And while loading the website on the mobile device the background image is also not fully fitted to screen. Please help me out I am totally stuck. my website url is WWW.krishzone.com
and my code is
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Krishh Kidss Zone</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<link href="css/lightbox.css" rel="stylesheet">
<link href="css/navbar.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body style="background: url(../img/background1.png) no-repeat center center fixed"
style="-webkit-background-size: cover"
style="moz-background-size: cover"
style="-o-background-size: cover"
style="background-size: cover">
<div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top " role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Krishh Kidss Zone</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-right">
<li>About Us
</li>
<li>Why Krishh Kidss
</li>
<li>Admissions
</li>
<li>Events
</li>
<li>Gallery
</li>
<li>Achivements
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Header Carousel -->
<header id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="../img/school.jpg" alt="learn" style="max-width:100%" style="height:auto" class="img-responsive">
<div class="carousel-caption">
<h2>Krishh Kidss Zone...</h2>
</div>
</div>
<div class="item">
<img src="../img/learning.JPG" alt="Fun" style="max-width:100%" style="height:auto" class="img-responsive">
<div class="carousel-caption">
<h2>Where Learning is...</h2>
</div>
</div>
<div class="item">
<img src="../img/playing.jpg" alt="play" style="max-width:100%" style="height:auto" class="img-responsive">
<div class="carousel-caption">
<h2>Fun</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
<!-- Page Content -->
<div class="container">
<!-- Marketing Icons Section -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Krishh Kidss Zone
</h1>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Vision</h4>
</div>
<div class="panel-body">
<p>
"To make your child grow into complete personality and develop the strength to meet the challenges ahed."
<br/>
<br/>
<br/>
<br/>
</p>
<div class="text-center">
Read More
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4>About Us</h4>
</div>
<div class="panel-body">
<p>We have started Krishh Kidss Zone pre school in 11th February 2010 with motto to give best primary education to children with out any burden. We adopt the simple and effective slogan “Where learning is Fun” , where we always focus on the children’s learning with the help of fun.</p>
<div class="text-center">
Read More
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Events</h4>
</div>
<div class="panel-body">
<p>
We celebrate almost each and every festivals and days as a part of our curriculam. That will help the children to know and understand the impotance of the festivals and days. We try to fill the colours in education by celebrating such events.
<br/>
<br/>
</p>
<div class="text-center">
See More
</div>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<!-- /.row -->
<hr>
<!-- Call to Action Section -->
<div class="well">
<div class="row">
<div class="col-md-8">
<h3> Contact Us:</h3>
<p>Adress:<br/>
18 Sarita Vihar,<br/>
Opp. Kartavya Bunglows,<br/>
Anand Nadiad Road,<br/>
Lambhvel, 387-310<br/>
Anand, Gujarat</p><br/>
</div>
<div class="col-md-4">
<p>Contact Details<br/>
Ph.No. +91 99799 64200 <br/>
Like Us On Facebook
<ul class="list-unstyled list-inline list-social-icons">
<li>
<i class="fa fa-facebook-square fa-2x"></i>
</li>
</ul></p>
<p>Copyright © Krishh Kidss Zone 2015</p>
<p>Developed By: Shree InfoTech Ltd.</p>
</div>
</div>
</div>
<hr>
<!-- Footer -->
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/lightbox.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</body>
You have multiple div and nav tags that are duplicates or out of place completely. Your images inside the carousel contain multiple style tags style="max-width:100%" style="height:auto" which should be style="max-width:100%; height:auto;" but are unnecessary and should go into a stylesheet if you do need to apply rules.
This example should provide a better starting point for you.
$('.carousel').carousel({
interval: 5000 //changes the speed
})
body {
background: url(http://placehold.it/1350x1050/5E58D1/fff/) no-repeat center center fixed;
background-size: cover;
}
html,
body {
height: 100%;
}
.navbar.navbar-default {
font-size: 16px;
background-color: #3A368C;
border-width: 0px;
border-radius: 0px;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #FAF2F2;
background-color: #161263;
}
.navbar.navbar-default .navbar-nav > li > a:hover {
color: #FAF2F2;
background-color: #3C3880;
}
.navbar.navbar-default .navbar-brand,
.navbar.navbar-default .navbar-brand:hover {
color: #fff;
}
.navbar.navbar-default .navbar-toggle {
border-color: #5E58D1;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.carousel.fade {
opacity: 1;
}
.carousel.fade .item {
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
left: 0 !important;
opacity: 0;
top: 0;
position: absolute;
width: 100%;
display: block !important;
z-index: 1;
}
.carousel.fade .item:first-child {
top: auto;
position: relative;
}
.carousel.fade .item.active {
opacity: 1;
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
z-index: 2;
}
.carousel-control {
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav id="#custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> Krishh Kidss Zone</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-right">
<li>About Us
</li>
<li>Why Krishh Kidss
</li>
<li>Admissions
</li>
<li>Events
</li>
<li>Gallery
</li>
<li>Achivements
</li>
<li>Contact Us
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel fade">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://desktop-pictorials.com/SingleScreen/SinglePage01/Island002-1920x1080.jpg');"></div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://img.phombo.com/img1/photocombo/4448/The_Best_HD_HQ_Hi-Res_Wallpapers_Collection_-_Cityscape_by_tonyx__145_pictures-61.jpg_HDTV_monaco_1920x1080.jpg');"></div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('https://interfacelift.com/wallpaper/7yz4ma1/01407_harboursunset_1920x1080.jpg');"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span>
</a>
</header>
<div class="container">
<!-- Marketing Icons Section -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"> Krishh Kidss Zone </h1>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Vision</h4>
</div>
<div class="panel-body">
<p>"To make your child grow into complete personality and develop the strength to meet the challenges ahed."
<br/>
<br/>
<br/>
<br/>
</p>
<div class="text-center"> Read More
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4>About Us</h4>
</div>
<div class="panel-body">
<p>We have started Krishh Kidss Zone pre school in 11th February 2010 with motto to give best primary education to children with out any burden. We adopt the simple and effective slogan “Where learning is Fun” , where we always focus on the children’s
learning with the help of fun.</p>
<div class="text-center"> Read More
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Events</h4>
</div>
<div class="panel-body">
<p>We celebrate almost each and every festivals and days as a part of our curriculam. That will help the children to know and understand the impotance of the festivals and days. We try to fill the colours in education by celebrating such events.
<br/>
<br/>
</p>
<div class="text-center"> See More
</div>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<!-- /.row -->
<hr>
<!-- Call to Action Section -->
<div class="well">
<div class="row">
<div class="col-md-8">
<h3> Contact Us:</h3>
<p>Adress:
<br/>18 Sarita Vihar,
<br/>Opp. Kartavya Bunglows,
<br/>Anand Nadiad Road,
<br/>Lambhvel, 387-310
<br/>Anand, Gujarat</p>
<br/>
</div>
<div class="col-md-4">
<p>Contact Details
<br/>Ph.No. +91 99799 64200
<br/>Like Us On Facebook
<ul class="list-unstyled list-inline list-social-icons">
<li> <i class="fa fa-facebook-square fa-2x"></i>
</li>
</ul>
</p>
<p>Copyright © Krishh Kidss Zone 2015</p>
<p>Developed By: Shree InfoTech Ltd.</p>
</div>
</div>
</div>
<hr>
<!-- Footer -->
</div>
<!-- /.container -->