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 -->
Related
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>
I am creating a blog using Laravel 5.8. I have a created master layout containing navbar, sidebar and footer. Rest areas are yielded in the subsequent layouts. Since I have included sidebar in the master layout file, my query is how can i load categories in the sidebar from the database.
The current situation is: I have kept the categories static.
Main Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Aarthna Maheshwari" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="A fully functional blog made from scratch using HTML5, CSS3, Javascript, Boostrap and Laravel In India" />
<link rel="stylesheet" type="text/css" href="{{asset('/css/bootstrap.min.css')}}" />
<link rel="stylesheet" type="text/css" href="{{ asset('/css/blog.css') }}" />
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet" />
<title>Laravel Blog - A complete blog with admin panel created using HTML and Laravel with Bootstrap</title>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
</head>
<body>
<div class="container">
<header class="blog-header py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-4 pt-1">
<a class="text-muted" href="#">Subscribe</a>
Create
</div>
<div class="col-4 text-center">
<a class="blog-header-logo text-dark" href="#">Large</a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
<a class="text-muted" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24" focusable="false"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2"/></svg>
</a>
<a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
</div>
</div>
</header>
<div class="nav-scroller py-1 mb-2">
<nav class="nav d-flex justify-content-between">
<a class="p-2 text-muted" href="#">World</a>
<a class="p-2 text-muted" href="#">India</a>
<a class="p-2 text-muted" href="#">Technology</a>
<a class="p-2 text-muted" href="#">Design</a>
<a class="p-2 text-muted" href="#">Culture</a>
<a class="p-2 text-muted" href="#">Business</a>
<a class="p-2 text-muted" href="#">Politics</a>
<a class="p-2 text-muted" href="#">Opinion</a>
<a class="p-2 text-muted" href="#">Science</a>
<a class="p-2 text-muted" href="#">Health</a>
<a class="p-2 text-muted" href="#">Style</a>
<a class="p-2 text-muted" href="#">Travel</a>
</nav>
</div>
<div class="jumbotron p-4 p-md-5 text-white rounded bg-dark">
<div class="col-md-6 px-0">
<h1 class="display-4 font-italic">Title of a longer featured blog post</h1>
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
<p class="lead mb-0">Continue reading...</p>
</div>
</div>
<div class="row mb-2">
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">World</strong>
<h3 class="mb-0">Featured post</h3>
<div class="mb-1 text-muted">Nov 12</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
Continue reading
</div>
<div class="col-auto d-none d-lg-block">
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">Design</strong>
<h3 class="mb-0">Post title</h3>
<div class="mb-1 text-muted">Nov 11</div>
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
Continue reading
</div>
<div class="col-auto d-none d-lg-block">
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
</div>
</div>
</div>
</div>
</div>
<main role="main" class="container">
<div class="row">
<div class="col-md-8 blog-main">
#yield('content')
</div><!-- /.blog-main -->
<aside class="col-md-4 blog-sidebar">
<div class="p-4 mb-3 bg-light rounded">
<h4 class="font-italic">About</h4>
<p class="mb-0">Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="p-4">
<h4 class="font-italic">Archives</h4>
<ol class="list-unstyled mb-0">
<li>March 2014</li>
<li>February 2014</li>
<li>January 2014</li>
<li>December 2013</li>
<li>November 2013</li>
<li>October 2013</li>
<li>September 2013</li>
<li>August 2013</li>
<li>July 2013</li>
<li>June 2013</li>
<li>May 2013</li>
<li>April 2013</li>
</ol>
</div>
<div class="p-4">
<h4 class="font-italic">Elsewhere</h4>
<ol class="list-unstyled">
<li>GitHub</li>
<li>Twitter</li>
<li>Facebook</li>
</ol>
</div>
</aside><!-- /.blog-sidebar -->
</div><!-- /.row -->
</main>
<footer class="blog-footer">
<p>Blog template built using Bootstrap by Aarthna Maheshwari.</p>
<p>
Back to top
</p>
</footer>
</body>
</html>
Expected output:
The app should load the categories from the database.
You can use view composer for to load your category each time your sidebar template are loaded.
see here : https://laravel.com/docs/5.7/views#view-composers
I'm newbee in Boostrap and I try since 2 days to manage Boostrap carouseul mode.
My images in slide are Disproportionate when I resize navigator ! I was unable to find solution. I try many solution in CSS but I naver finnd solution.
I use default CSS parameter, present in carousel mode. I try carousel mode from w3schools (image are not corrupt when we resize navigator).
My CSS
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
margin: auto;
}
My HTML
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="media/image1.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Secucampus.com</h1>
<p class="trans"> bla bla</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Plus d'informations</a></p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="media/image2.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Secucampus.com</h1>
<p class="trans">bla bla</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Contactez nous</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="media/image3.jpg" alt="">
<div class="container">
<div class="carousel-caption" style="text-align:left">
<h1>bla </h1>
<p></p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Contenu des cours</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
The result when I resize image to Smarphone mode :
Thank for your help
Regard
Edit : Banzay :
I try to remove it and the result decrease image in hignht when I reduce the width of the navigateur.
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
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