I am trying to make pictures be in a carousel horizontally, however whenever I try, it displays it weird like it is vertical. Here is a snippet of my code
<div class="owl-carousel owl-theme">
<div class="item">
<a href="link">
<img class="gameimg" src="default-placeholder.png" />
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$('.owl-carousel').owlCarousel({
responsive: {
0: {
items: 1,
},
700: {
items: 6,
},
1000: {
items: 9,
},
},
});
</script>
Picture of what it looks like
I attempted to try to change the height, hoping that would maybe solve it however it didn't do anything but resize the container it was in.
The problem is that you're not including Owl Carousel's stylesheets in your HTML, you can see the installation guide on their docs:
Here is the working code after adding these stylesheets:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>🦉</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css"
/>
</head>
<body>
<div class="owl-carousel owl-theme">
<div class="item">
<a href="link">
<img class="gameimg" src="https://via.placeholder.com/200" />
</a>
</div>
<div class="item">
<a href="link">
<img class="gameimg" src="https://via.placeholder.com/200" />
</a>
</div>
<div class="item">
<a href="link">
<img class="gameimg" src="https://via.placeholder.com/200" />
</a>
</div>
<div class="item">
<a href="link">
<img class="gameimg" src="https://via.placeholder.com/200" />
</a>
</div>
<div class="item">
<a href="link">
<img class="gameimg" src="https://via.placeholder.com/200" />
</a>
</div>
<div class="item">
<a href="link">
<img class="gameimg" src="https://via.placeholder.com/200" />
</a>
</div>
<div class="item">
<a href="link">
<img class="gameimg" src="https://via.placeholder.com/200" />
</a>
</div>
<div class="item">
<a href="link">
<img class="gameimg" src="https://via.placeholder.com/200" />
</a>
</div>
<div class="item">
<a href="link">
<img class="gameimg" src="https://via.placeholder.com/200" />
</a>
</div>
<div class="item">
<a href="link">
<img class="gameimg" src="https://via.placeholder.com/200" />
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$('.owl-carousel').owlCarousel({
responsive: {
0: {
items: 1,
},
700: {
items: 6,
},
1000: {
items: 9,
},
},
});
</script>
</body>
</html>
Related
I have an issue with < a > < finger > < img > < figcaption > ...!
Whey I use only tag < a > and < img > in loop of :::
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 view-waid">
<a href="#">
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
</a>
<a href="#">
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
</a>
Its just work fine view
But when I just insert this
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 view-waid">
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
</div>
It just broke off into vertical. Look Here
I need this to horizontal like a image gallery.
Where is the problem???
I am not using extra CSS.
Here is my full code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title><tag:main_title /></title>
<!-- Bootstrap 4 CSS. This is for the alpha 3 release of Bootstrap 4. This should be updated when Bootstrap 4 is officially released. -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="http://192.168.0.103/style/mynew_1.0/css/custom.css" rel="stylesheet">
<!-- For icons -->
<link href="http://192.168.0.103/style/mynew_1.0/css/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet">
<!-- 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]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav id="topNav" class="navbar navbar-full navbar-fixed-top navbar-dark bg-inverse m-b-1">
<button class="navbar-toggler hidden-md-up pull-right" type="button" data-toggle="collapse" data-target="#navbar">
☰
</button>
<a class="navbar-brand" href="#"><tag:site_name /></a>
<div class="collapse navbar-toggleable-sm" id="navbar">
<tag:main_dropdown />
<!-- Search -->
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-secondary" type="submit">Search</button>
</form>
</ul>
</div>
</nav>
<header>
<div class="header-blurb">
<div class="container">
<div class="row">
<tag:main_header />
</div>
<div class="row">
<div class="col-sm-12 header-blurb-ads">
<h6>ads</h6>
</div>
</div>
<div class="row">
<div class="col-sm-12 header-blurb-ssmenu">
<h6>sub-menu</h6>
</div>
</div>
<div class="row">
<div class="col-sm-12 header-blurb-slideshow">
<h6>slide-show</h6>
</div>
</div>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<!-- Left Column -->
<div class="col-sm-1 view-waid">
<tag:main_left />
</div>
<!-- /Left Column -->
<!-- Center Column -->
<div class="col-sm-8 view-waid">
<!-- Articles -->
<tag:main_content />
<!-- Img test 2 -->
<!-- Img test 2 -->
</div>
<!-- /Center Column-->
<!-- Right Column -->
<div class="col-sm-3 view-waid">
<tag:main_right />
</div> <!-- /Right Column -->
</div>
</div>
<!--/container-fluid-->
<!-- Image box testing -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 d-flex view-waid">
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
</div>
</div>
</div>
<!-- /Image box testing -->
<footer>
<div class="footer-blurb">
<div class="container">
<div class="row">
<div class="col-sm-3 footer-blurb-item">
<h3><i class="fa fa-text-height" aria-hidden="true"></i> ADS-1</h3>
<p>PLEASE GIVE ADS</p>
<p><a class="btn btn-primary" href="#">FOR SHOW</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
<h3><i class="fa fa-wrench" aria-hidden="true"></i> ADS-2</h3>
<p>PLEASE GIVE ADS -- 2 </p>
<p><a class="btn btn-success" href="#">FOR SHOW - 2</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
<h3><i class="fa fa-paperclip" aria-hidden="true"></i> ADS-3</h3>
<p>PLEASE GIVE ADS -- 3</p>
<p><a class="btn btn-primary" href="#">FOR SHOW - 3</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
<!-- Thumbnails -->
<h3><i class="fa fa-camera" aria-hidden="true"></i> ADS-4</h3>
<div class="row">
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=vine" alt="">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=sky" alt=""></a>
</div>
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=sky" alt="">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=vine" alt="">
</a>
</div>
</div>
</div>
</div>
<!-- /.row -->
<h4>MY-Test_IS NOT GOOD</h4>
</div>
</div>
<div class="small-print">
<div class="container">
<p>Terms & Conditions | Privacy Policy | Contact</p>
<p>Copyright © Example.com 2015 </p>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<!-- Tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<!-- Bootstrap 4 JavaScript. This is for the alpha 3 release of Bootstrap 4. This should be updated when Bootstrap 4 is officially released. -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
// Initialize popover component
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<!-- Placeholder Images -->
<script src="js/holder.min.js"></script>
</body>
</html>
Based on your code, just add class row or d-flex next to col-sm-12.
Based on your BS link, just add CSS like:
.row{
display:flex;
flex-wrap:wrap;
}
DEMO
.row{
display:flex;
flex-wrap:wrap;
}
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/…" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 row view-waid">
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
</div>
</div>
</div>
I am trying to put a background video on my SharePoint but instead of setting it as a background video it starts playing it and does not work. It works perfectly out of SharePoint (in browser) Need Help Please
Evidently there isn't something fundamentally wrong with my html since it renders in the browser. Are there any sharepoint html5 wizards out there who can help?
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Oryx Technologies</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/normalize.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/bootstrap.min.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/owl.carousel.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/owl.theme.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/animate.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/slicknav.min.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/responsive.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<video poster="" id="bgvid" autoplay muted loop>
<source src="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/Jon%20Hopkins%20-%20Immunity%20(Rowbyte%20Plexus).mp4.webm" type="video/webm">
<source src="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/Jon%20Hopkins%20-%20Immunity%20(Rowbyte%20Plexus).mp4" type="video/mp4">
</video>
<section class="intro" id="home">
<div class="menu-bar menu">
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="logo">
<im src="images/logo.png" alt="" title="" height="40px" style="float: left;"/>
</div>
</div>
<div class="col-md-8">
<ul class="list-unstyled" id="main-menu">
<li><a class="active" href="#home">Home</a></li>
<li>Facebook</li>
<li>Twitter</li>
<li>LinkedIn</li>
<li>Website</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Menu Ends here -->
<div class="intro-content">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 intro-image">
<img src="images/logo.png" alt="" />
</div>
<div class="col-md-8 col-sm-6 col-xs-12 intro-texts">
<h1>Welcome to Oryx Technologies Intranet Portal</h1>
<p>Explore Your Posibilities | Run With Oryx</p>
<p>Collabrative | Intelligent | Secure</p>
<ul class="list-unstyled">
<li>Human Resources</li>
<li>Finance</li>
<li>Sales </li>
<li>Technology </li>
<li>Operations </li>
<li>Marketing </li>
<li>Projects </li>
<li>Investors </li>
<li>Business Partners </li>
<li>Technology Partners</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Intro Section Ends -->
<section class="features" id="features">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 wow fadeIn">
<h2>Employee Self Services</h2>
</div>
<div class="col-md-3 col-sm-6 wow fadeInLeft">
<div class="single-service">
<p style="background:#EE3867;"><i class="fa fa-pencil"></i></p>
<h3>Submit a Leave Application</h3>
<p>Click Me</p>
</div>
</div>
<div class="col-md-3 col-sm-6 wow fadeInLeft">
<div class="single-service">
<p style="background:#3DB39D;"><i class="fa fa-pencil"></i></p>
<h3>Claim an Expense</h3>
<p>Click Me</p>
</div>
</div>
<div class="col-md-3 col-sm-6 wow fadeInRight">
<div class="single-service">
<p style="background:#57C7ED;"><i class="fa fa-pencil"></i></p>
<h3>Follow a Request</h3>
<p>Click Me</p>
</div>
</div>
<div class="col-md-3 col-sm-6 wow fadeInRight">
<div class="single-service">
<p style="background:#324E5C;"><i class="fa fa-pencil"></i></p>
<h3>Submit a Petty Cash Request</h3>
<p>Click Me</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section Ends Here -->
<section class="app-screenshot">
<div class="container" id="screenshots">
<div class="row">
<div class="col-md-12 wow fadeInUp">
<h2>Case Studies</h2>
</div>
<div id="owl-example" class="owl-carousel col-md-12 wow fadeInUp">
<div><img src="images/casesstdtg.png" alt="" /></div>
<div><img src="images/ateis.png" alt="" /></div>
<div><img src="images/wadi.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
</div>
</div>
</div>
</section>
<!--Other Features Ends Here-->
<!-- App Screenshot Ends Here-->
<!--Testimonial Section Ends Here-->
<section class="clients-logo" id="clients">
<div class="container">
<div class="row">
<div id="clients-logo" class="owl-carousel col-md-12 wow slideInRight">
<div><img src="images/linkedin.png" alt="" /></div>
<div><img src="images/twitter.png" alt="" /></div>
<div><img src="images/facebook.png" alt="" /></div>
<div><img src="images/facebook.png" alt="" /></div>
<div><img src="images/skype.png" alt="" /></div>
<div><img src="images/google-plus.png" alt="" /></div>
</div>
</div>
</div>
</section>
<!-- Clients Logo Section Ends Here -->
<!-- Price List Section Ends Here -->
<!-- About App Section Ends Here -->
<!-- Get App Section Ends Here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#owl-example").owlCarousel({
items : 4,
navigation : false,
navigationText : ["prev","next"],
paginationNumbers: true
});
$("#testimonial-carousel").owlCarousel({
items : 1,
itemsCustom : true,
itemsDesktop : [1199,1],
itemsDesktopSmall : [980,1],
itemsTablet: [768,1],
itemsTabletSmall: true,
itemsMobile : [479,1],
singleItem : true,
itemsScaleUp : true,
responsive : true
});
$("#clients-logo").owlCarousel({
items : 6,
paginationNumbers : false,
navigation : false,
});
});
</script>
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
// handle links with #href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
// target element id
var id = $(this).attr('href');
// target element
var $id = $(id);
if ($id.length === 0) {
return;
}
// prevent standard hash navigation (avoid blinking in IE)
e.preventDefault();
// top position relative to the document
var pos = $(id).offset().top;
// animated top scrolling
$('body, html').animate({scrollTop: pos}, 1000);
});
</script>
<script type="text/javascript">
// Create a clone of the menu, right next to original.
$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').css('background','#000').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;
if ($(window).scrollTop() >= (orgElementTop)) {
// scrolled past the original position; now only show the cloned, sticky element.
// Cloned element should always have same left position and width as original element.
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
$('.original').css('visibility','hidden');
} else {
// not scrolled past the menu; only show the original menu.
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}
</script>
<script src="js/jquery.slicknav.min.js"></script>
<script>
$(function(){
$('#main-menu').slicknav();
});
</script>
</body>
</html>
I am creating a small website using bootstrap and angular.js and stuck in thumbnails alignment. I am having three thumbnail and I want them centrally aligned. I have tried so many css properties but didn't get through it. Please help me out.Here is my code
<div ng-controller = "ModuleController as module">
<div class="row">
<div class="col-md-4 col-sm-4 text-center" ng-repeat="i in module.item" ng-hide="module.item.soldOut">
<img class="img img-responsive center-block" ng-src="{{i.images[0]}}" /><br>
<ul class="clearfix">
<li class="pull-left thumbnail" ng-repeat="image in i.images">
<img ng-src="{{image}}"/>
</li>
</ul>
<span> <b>{{i.name}}</b> </span><br>
<span> <b>{{i.price | currency : '₹' }}</b> </span><br>
<span> <b>{{i.description}} </span></b> <br><br>
<span> <button class="btn btn-primary" ng-show="i.canPurchase">Add to Cart</button> </span>
</div>
</div>
</div>
Here, is the fiddle
https://jsfiddle.net/rajatgarg/vgknhc6f/1/
You have the class "pull-left" on the thumbnail image in the html. Should be centered after you remove it.
You could use bootstrap's helper class: center-block.
I wrapped the images in a div - like below which seems to do the trick:
<div class="center-block">
<a href="#" class="">
<img src="http://lorempixel.com/50/50/" />
</a>
<a href="#" class="">
<img src="http://lorempixel.com/50/50/" />
</a>
<a href="#" class="">
<img src="http://lorempixel.com/50/50/" />
</a>
</div>
</div>
See Docs - Running Demo below...
.col-md-4 {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-4 col-sm-4 text-center">
<img class="img img-responsive center-block" src="http://lorempixel.com/75/75/" />
<div class="row">
<br>
<div class="center-block">
<a href="#" class="">
<img src="http://lorempixel.com/50/50/" />
</a>
<a href="#" class="">
<img src="http://lorempixel.com/50/50/" />
</a>
<a href="#" class="">
<img src="http://lorempixel.com/50/50/" />
</a>
</div>
</div>
<span> <b>name</b> </span>
<br>
<span> <b>currency</b> </span>
<br>
<span> <b>description</b> </span>
<br>
<br>
<span> <button class="btn btn-primary">Add to Cart</button> </span>
</div>
</div>
Bootstrap columns have a default padding and floating and that why the columns aligned left. If you want to centered the div you have to remove your float like this
float:none; margin:0 auto;
Thanks
Need the Portfolio and Services buttons turned around to lie horizontally and in line with the About Us and Contacts buttons.
I can provide the CSS if needed.
Preview of what the website looks now:
very confusing
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<link rel="icon" href="images/favicon.ico">
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.1.1.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.equalheights.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script>
</script>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home? strong textocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<link rel="stylesheet" media="screen" href="css/ie.css">
<![endif]-->
</head>
<body class="page1">
<!--==============================header=================================-->
<header>
<div class="container_12">
<div class="grid_12">
</div>
<div class="grid_4">
<div class="port"><div>
<a class="link_img" href="index-2.html"><img src="images/page1_img1.jpg" alt="">
<span></span></a>
About Us
</div>
</div></div>
<div class="grid_4"><h1><a href="index.html"><img src="images/logo.png" alt="Brand
Identity"></a></h1></div>
<div class="grid_4 fright">
<div class="port">
<a class="link_img " href="index-2.html"> <img src="images/page1_img2.jpg" alt="">
<span></span></a>
Contacts
</div>
</div>
<div class="clear"></div>
<div class="port1">
<div class="grid_12">
<div class="port">
<a class="link_img " href="index-2.html"><img src="images/page1_img3.jpg" alt="">
<span></span></a>
Portfolio
</div>
<div class="port">
<a class="link_img " href="index-2.html"><img src="images/page1_img4.jpg" alt="">
<span></span></a>
Services</div>
</div>
</div>
<div class="port2">
<div class="grid_12">
<div class="port">
<a class="link_img " href="index-2.html"><img src="images/page1_img5.jpg" alt="">
<span></span></a>
Work for PixelMi<sup>2</sup>
</div>
<div class="port">
<a class="link_img " href="index-2.html"><img src="images/page1_img6.jpg" alt="">
<span></span></a>
Blog</div>
</div>
</div>
</div>
<div class="ic"></div>
</header>
<footer>
<div class="container_12">
<div class="grid_12">
<div class="socials">
</div>
<div class="copy">
</div>
</div>
</div>
</footer>
</body>
</html>
I am coding a website using onepage-scroll, and I'm encountering a very strange issue. In my last section (fourth), I added some content (notify me!), it displayed perfectly, and now I did something else (added scripts) and all the content disappeared.
Demo here: https://opencubes.github.io/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>OpenCubes</title>
<link rel="stylesheet" href="stylesheets/styles.css">
...
<script type="text/javascript" src="//cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(document).ready(function () {
$(".main").onepage_scroll({
sectionContainer: "section",
...
direction: "vertical"
});
$('a.notify').on('click', function () {
...
});
});
</script>
</head>
<body>
<div class="main">
<section class="first-page">
<div class="description">
<h1>The Minecraft Mod Marketplace</h1>
<div>
OpenCubes...
</div>
</div>
<a href="#" class="scroll-down">
<i class="fa fa-chevron-circle-down"></i> Scroll Down
</a>
</section>
<section class="second-page">
<div class="description">
<h1>Browse mods</h1>
<div>
With OpenCubes,...
</div>
</div>
<img src="images/browse.png" />
<a href="#" class="scroll-down">
<i class="fa fa-chevron-circle-down"></i> Keep scrolling...
</a>
</section>
<section class="third-page">
<div class="features">
<div class="feature-spotlight sl-1">
<div>
<h2>Comment and vote</h2>
...
</div>
<img src="images/comments.png" />
</div>
<div class="feature-spotlight sl-2">
<img src="images/files.png" />
<div>
<h2>Files and version manager</h2>
In OpenCubes,...
</div>
</div>
</div>
</section>
<section class="fourth-page">
<div class="main">
<h1>OpenCubes is still in development.</h1>
<div class="send">
<h2>Enter your email here to be notified when it's ready</h2>
<input class="email" type="email"/>
Notify me!
</div>
</div>
</section>
</div>
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
</body>
</html>