how to display all carousel picture on codeigniter - codeigniter

my website has connected to internet network, but i have a problem to my picture on that carousel. that carousel only display one picture (and that picture always automated change the size, from small to bigger). I want to display all picture on my carousel. how to fix it ?
and this is my code
<!-- BEGIN .om-slide-1 -->
<?php foreach($keyslide as $kim){?>
<div class="om-slide om-slide-2 isactive">
<div class="om-layer om-layer-1" data-animation-in="fadeIn" data-animation-out="fadeOut" data-delay="0" data-delayout="300" style="top: 0px; left: 0px; width: 100%;">
<img src="<?php echo base_url();?>assets/uploads/produk/1e5d3-cupgentong.jpg">/<?php echo $kim->img;?>&w=500&h=400" alt="<?php echo $kim->judul;?>" />
</div>
<div class="om-layer om-layer-2" data-animation-in="fadeIn" data-animation-out="fadeOut" data-delay="200" data-delayout="0" style="top: 190px; left: 80px;">
<!-- <h3><a class="button" href="<?php echo $kim->url;?>"><?php echo $kim->judul;?></a></h3> -->
</div>
<div class="om-layer om-layer-3" data-animation-in="fadeIn" data-animation-out="fadeOut" data-delay="500" data-delayout="0" style="top: 260px; left: 80px;">
<!-- <h6><?php echo $kim->tagline;?></h6> -->
</div>
<!-- END .om-slide-2 -->
</div>
<?php } ?>
<?php foreach($slide as $im){?>
<div class="om-slide om-slide-2">
<div class="om-layer om-layer-1" data-animation-in="fadeIn" data-animation-out="fadeOut" data-delay="0" data-delayout="300" style="top: 0px; left: 0px; width: 100%;">
<img src="<?php echo base_url();?>assets/uploads/produk/b4d9b-cupwafer.jpg">/<?php echo $kim->img;?>&w=1000&h=400" alt="<?php echo $kim->judul;?>" />
</div>
<div class="om-layer om-layer-2" data-animation-in="fadeIn" data-animation-out="fadeOut" data-delay="200" data-delayout="0" style="top: 190px; left: 80px;">
<!-- <h3><a class="button" href="<?php echo $im->url;?>"><?php echo $im->judul;?></a></h3> -->
</div>
<div class="om-layer om-layer-3" data-animation-in="fadeIn" data-animation-out="fadeOut" data-delay="500" data-delayout="0" style="top: 260px; left: 80px;">
<!-- <h6><?php echo $im->tagline;?></h6> -->
</div>
<!-- END .om-slide-2 -->
</div>
<?php } ?>
<!-- END .omnomnom-slider-inner -->
</div>
<div class="om-slider-pager">
1
2
<input type="text" class="dial" data-min="0" data-max="100" data-displayInput="false" data-readOnly="true" data-fgColor="#5d4d43" data-height="17" data-width="17" data-thickness="0.24" data-bgColor="rgba(0,0,0,0.1)">
</div>[enter image description here][1]

I'm using PHP in Codeigniter and had a similar problem. I fixed it with the following steps:
1) Use the Bootstrap carousel found here.
2) Click "try it" under one of the carousel examples and then grab the two script lines from the header and put them into your header.
Now all of my pictures are displaying properly.

Related

How to remove horizontal space between images in a table

Before I linked the images in the table to image galleries, there was no spaces between the images. I was able to remove the vertical spaces with font-size:0; but I can't seem to find a way to remove the horizontal spaces..
`
<div class="center">
<table id="Table_01" width="960" height="603" border="0" cellpadding="0" cellspacing="0">
<tr><!--
--><td><ul class="gallery clearfix"></ul><!--
--> <div class="c1"><!--
--> <ul class="gallery clearfix"><!--
--> <img src="img/maison/maison_01.png" width="644" height="253" alt=""><!--
--> </ul><!--
--> </div>
<div class="c1">
<ul class="gallery clearfix">
</ul>
</div>
<div class="c1">
<ul class="gallery clearfix">
</ul>
</div>
<div class="c1">
<ul class="gallery clearfix">
</ul>
</div>
<div class="c1">
<ul class="gallery clearfix">
</ul>
</div>
</td><!--
--><td><!--
--> <div class="c2"><!--
--> <ul class="gallery clearfix"><!--
--> <img src="img/maison/maison_02.png" width="316" height="253" alt=""><!--
--> </ul><!--
--> </div>
<div class="c2">
<ul class="gallery clearfix">
</ul>
</div>
<div class="c2">
<ul class="gallery clearfix">
</ul>
</div>
<div class="c2">
<ul class="gallery clearfix">
</ul>
</div>
</td><!--
--></tr><!--
--><tr><!--
--> <td><!--
--> <div class="bu"><!--
--> <ul class="gallery clearfix"><!--
--> <img src="img/maison/maison_03.png" width="644" height="121" alt=""><!--
--> </ul><!--
--> </div><!--
--> </td><!--
--><td rowspan="2">
<div class="sal">
<ul class="gallery clearfix">
<img src="img/maison/maison_04.png" width="316" height="350" alt="">
</ul>
</div>
<div class="sal">
<ul class="gallery clearfix">
</ul>
</div>
<div class="sal">
<ul class="gallery clearfix">
</ul>
</div>
</td><!--
--></tr><!--
--><tr><!--
--><td><!--
--> <div class="sej"><!--
--> <ul class="gallery clearfix"><!--
--> <img src="img/maison/maison_05.png" width="644" height="229" alt=""><!--
--> </ul><!--
--> </div>
<div class="sej">
<ul class="gallery clearfix">
</ul>
</div>
<div class="sej">
<ul class="gallery clearfix">
</ul>
</div>
<div class="sej">
<ul class="gallery clearfix">
</ul>
</div>
</td>
</tr><!--
--> </table>
</div>
</div>
<!-- PrettyPhoto SCRIPT -->
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("area[rel^='prettyPhoto']").prettyPhoto();
$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',slideshow:3000, autoplay_slideshow: false});
$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});
$("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
changepicturecallback: function(){ initialize(); }
});
$("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
changepicturecallback: function(){ _bsap.exec(); }
});
});
</script>
CSS:
.center {display: block;font-size: 0;max-width:1100px;margin-top: -30px;margin-left:auto;margin-right:auto;}
result: http://www.simoncokes.ovh/mais.html
Excuse me for the mess, I'm only a beginner/noob/learner !
Try this:
td, th {
border: 0px;
padding: 0px;
}
tr {
border: 0px;
padding: 0px;
margin: 0px;
}
img {
display: block;
}
Also, set table with this attributes:
cellspacing = "0" cellpadding = "0"
It should work

images are not properly shown in webpage

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 -->

slideshows container min-height on Joomla responsive site

I've got a problem with the slideshow (JS FlexSlider) container on my responsive Joomla 3 site.
On loadup the main content is loaded first and since the slideshow is still loading, the rest of the site is on top.
When the slideshow is ready and running, everything gets pushed downwards where it belongs.
Now since the site is responsive I can't just put a min-height to the slideshows container, since this value is changing according to the viewpoint.
Any tips on how to fix that?
my site
The div class is called "bigimage" and it is placed outside any other container to have it displayed in full width.
</head>
<body id="<?php echo ($itemid ? 'itemid-' . $itemid : ''); ?>">
<!-- Begin Navbar-->
<?php if ($this->countModules('position-9')): ?>
<div class="navbar navbar-inverse navbar-fixed-top">
<!-- navbar-inverse navbar-fixed-top -->
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#"><?php echo $sitename ?></a>
<div class="nav-collapse collapse">
<jdoc:include type="modules" name="position-9" style="none" />
</div>
</div>
</div>
</div><!--End navbar-->
<?php endif; ?>
<?php if ($this->countModules('position-5')): ?>
<div class="bigimage">
<jdoc:include type="modules" name="position-5" style="none" />
<div class="clearfix"></div>
</div><!--End Bigimage-->
<?php endif; ?>
<div class="container">
<!-- Begin Header-->
<div class="header">
<div class="header-inner">
You can set min-height for .bigimage for different resolutions with media queries.
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
.bigimage{
min-height: 300px;
}
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) {
.bigimage{
min-height: 500px;
}
}
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) {
.bigimage{
min-height: 800px;
}
}
as i see it hides all elements before it starts to run. try set .flexslider .slides > li:first-child { display: block } to display first element of the slider while page is loading. maybe this workaround will work

adding selected items to codeigniter cart

I am creating an online restaurant order system. I am using codeigniter. In the order page I have used the angular grid system which filters and sorts the items.
What I want to do is create a checkbox in every row. The checkboxes I click the item corresponding to them should be added to cart. I am using codeigniter cart class.
My code is as follow.
<html ng-app="myApp" ng-app lang="en"><head>
<title>Wah Bhai Wah</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>css/animate.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>css/bootstrap.css">
<script type="text/javascript" src="<?php echo base_url() ?>js/jquery.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>js/java.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>queries/insert_into_cart.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>js/bootstrap.js"></script>
<script type="text/javascript">
$(document).on("click", ".view_link", function() {
var id = $(this).data('id');
$(".modal-body #itemid").val( id );
var name = $(this).data('name');
$(".modal-body #itemname").val( name );
document.getElementById("descmodallabel").innerHTML = name;
var image = $(this).data('image');
document.getElementById("itemimagesrc").src = image;
$(".modal-body #itemimage").val( image );
var price = $(this).data('price');
$('.modal-body #itemprice').val( price );
});
</script>
</head>
<style>
.a
{
background-color:white;
}
body{
background: url("http://localhost/wah/images/slider/M3.png") fixed 100% 100%; background-size: cover;
}
.d{
background-color: green; height: 200px;
}
.c
{
background-color: yellow; height: 600px;
}
.item{
background-color: white; padding: 10px; margin-bottom: 20px;
box-shadow: 5px;-webkit-box-shadow: 0px 10px 45px 6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 45px 6px rgba(0,0,0,0.75);
box-shadow: 0px 10px 45px 6px rgba(0,0,0,0.75); border-radius: 6px;
}
.main
{
margin-top:200px;
}
.side-nav{background-color: white; padding: 30px; top:100px; }
table{
border-spacing: 0px;
border-collapse: separate;
}
td
{
padding-right: 20px; padding-top:10px;
}
.forms{background-color:white; padding-right:20px; margin-top:200px; position:static;}
</style>
<body>
<div class="modal fade" id="myModalmenu" tabindex="-1" role="dialog" 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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Menu</h4>
</div>
<div class="modal-body">
<table>
<tr>
<td>Item</td>
<td>Cost</td>
</tr><?php
foreach ($i as $items) {
?>
<tr>
<td>
<img src="<?php echo $items->img ?>" height="50px" width="50px">
<?php echo " ".ucfirst($items->item_name); ?>
</td>
<td>
<?php echo $items->price ?>
</td>
</tr>
<?php
}
?>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" 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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Cart</h4>
</div>
<div class="modal-body">
<table>
<tr><td>Item</td><td>Qty</td><td>Price</td><td>Total</td></tr>
<?php foreach($this->cart->contents() as $cart_items){ ?>
<tr>
<?php $id = $cart_items['rowid']; ?>
<?php echo form_open('cart_test/update/'.$id); ?>
<td><?php echo $cart_items['name'] ?></td>
<td><input type="number" class="span1" id="qty" value = "<?php echo $cart_items['qty'] ?>" name="qty"></td>
<td><?php echo $cart_items['price'] ?></td>
<td><?php echo $cart_items['subtotal'] ?> </td>
</tr>
<tr>
<td>
Remove
</td>
<td>
<input type="submit" value="Update" class="btn btn-primary">
</td>
</form>
</tr>
<?php } ?>
<tr><td colspan="5" ><hr style="background-color: #000000"></td></tr>
<tr><td colspan="2">Item Total</td><td colspan="2"><b style="text-align: right"><?php echo $this->cart->total_items()?></b></td></tr>
<tr><td colspan="2">Bill Total</td><td colspan="2"><b style="text-align: right"><?php echo $this->cart->total()?></b></td></tr>
<tr><td colspan="5" ><hr style="background-color: #000000"></td></tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<?php
if($this->cart->total_items()==0)
{
?>
Proceed To Checkout
<?php
}
else
{
?>
Proceed To Checkout
<?php
}
?>
</div>
</div>
</div>
</div>
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Wah Bhai Wah
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li >Home</li>
<li class="active">order</li>
<li>Menu</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Logout</li>
<li><a href="#" data-toggle="modal" data-target="#myModal">View Cart <b style="background-color:red; -moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 450px; padding:15px;" ><?php echo count($this->cart->contents()) ?></b></a></li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div ng-controller="customersCrtl" class="main">
<div class="container">
<div class="row">
<div class="col-md-2">PageSize:
<select ng-model="entryLimit" class="form-control">
<option>5</option>
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
</div>
<div class="col-md-3">Filter:
<input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" />
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12" ng-show="filteredItems > 0">
<table class="table table-condensed active" style="background-color:white; border-radius:6px; padding:20px;">
<thead>
<th class="success">Item Id <a ng-click="sort_by('id');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th class="danger">Item Name <a ng-click="sort_by('item_name');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th class="danger">Item <a ng-click="sort_by('img');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th class="danger">Price <a ng-click="sort_by('price');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th class="danger">Category <a ng-click="sort_by('category');"><i class="glyphicon glyphicon-sort"></i></a></th>
</thead>
<tbody>
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit" class="danger">
<td>{{data.id}}</td>
<td>{{data.item_name}}</td>
<td><img src={{data.img}} height="50px" width="50px"></td>
<td>{{data.price}}</td>
<td>{{data.category}}</td>
<td>Add to Cart</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12" ng-show="filteredItems == 0">
<div class="col-md-12">
<h4>No Items found</h4>
</div>
</div>
<div class="col-md-12" ng-show="filteredItems > 0">
<div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="«" next-text="»"></div>
</div>
</div>
</div>
</div>
<script src="<?php echo base_url() ?>apps/js/angular.min.js"></script>
<script src="<?php echo base_url() ?>apps/js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="<?php echo base_url() ?>apps/app/app.js"></script>
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="descmodal" tabindex="-1" role="dialog" 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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="descmodallabel"></h4>
</div>
<div class="modal-body">
<?php echo form_open('cart_test/add_from_desc') ?>
<input type="hidden" src="" value="" id="itemimage" >
<img src="" height="200" width="300px" id="itemimagesrc">
<input type="hidden" name="item_id" value="" id="itemid">
<input type="hidden" name="item_name" value="" id="itemname">
<input type="text" name="item_price" value="" id="itemprice">
<input type="number" name="quantity" value="" required>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Add to Cart</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body
></html>

Bootstrap 3 making images centre and content vertically center

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

Resources