I'm trying to create a basic image gallery using Bootstrap in AngularJS. I'm following a tutorial here: http://www.tutorialspoint.com/bootstrap/bootstrap_thumbnails.htm but I've seen many other sites use the same or similar code.
When I run it on my page, instead of the 3 images appearing spaced out in the same row, they all appear centered on separate rows.
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="" class="thumbnail">
<img class="r" src="../Images/Test1.png" >
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="" class="thumbnail">
<img class="" src="../Images/Test2.png" >
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="" class="thumbnail">
<img class="" src="../Images/Test3.png" >
</a>
</div>
</div>
This code use Bootstrap framework and you probably forget to import it !
Make sure you have these imports, and the code will work like you expect it :
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Here is the prove that this html works fine once bootstrap imported :
LIVE DEMO
Related
Grid sistem doesn`t work on mobile: .col-xs-3 is on full screen, col-xs-3 works like col-xs-12, any ideias?
<div class="container">
<div class="row">
<div class="col-md-1 col-xs-3">
<a href="#">
<img src="/.." />
</a>
</div>
<div class="col-md-1 col-xs-3">
<a href="#">
<img src="/.." />
</a>
</div>
<div class="col-md-1 col-xs-3">
<a href="#">
<img src="/.." />
</a>
</div>
...
</div>
</div>
1) If the bootstrap version your are using is 4, In bootstrap 4 there is no xs breakpoint. Instead the xs breakpoint is the default and for other breakpoints you must use breakpoints.
so for example if you want 3 on mobile and 1 on md and above you must say
col-3 col-md-1
2) Please do check that the required meta tags is on the head section of your code i.e.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Are you certain that bootstrap is linked and that you're using chrome on your mobile device?
What error is in my code trying to make an image responsive and centre it however, I can't seem to successfully do it. What am I doing wrong? Example of how it looks on my screen. http://imgur.com/a/bqrKw
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" target="_blank">
<img src="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" alt="picture" class="img-responsive center-block" />
</a>
</div>
</div>
</div>
</div>
</body>
</html>
What you need is to add col-lg-12 in order to center for large desktops.
body .jumbotron {
background-color: #01BAEF;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="jumbotron text-center">
<h1>About Me</h1>
<p>Find out more about me!</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 col-lg-12">
<div class="thumbnail">
<a href="/w3images/lights.jpg" target="_blank">
<img src="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" alt="..." class="img-responsive" />
</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="well">
<h3>Who am I?</h3>
<p>My name is Liam Docherty and I'm 17 years old, currently studying at Hackney Community College. In 2016 when I was taking my GCSE exams, I found my passion which was IT. My favourite topic within IT is software development. The reason how I
found out this was my main passion with IT is because, I was assigned a task which was to create a website advertising myself to potential employees and really enjoyed learning multiple programming languages.</p>
<p>Overall, I have multiple experience within a range of different sectors within IT. For example, I have knowledge of installing and maintaining hardware and software in a technology system. Moreover, I have experience using application software
such as Adobe Photoshop CS6, Adobe Premier Pro CS6 and Adobe Illustrator CS6.</p>
</div>
</div>
<div class="col-sm-4">
<div class="well">
<h3>Skills I can offer</h3>
<p>Front-end Development</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>Installing and maintaining hardware such as</p>
<ul>
<li>Upgrading RAM</li>
<li>Installing network card</li>
<li>Using air duster to reduce dust build up in fan component</li>
</ul>
<p>Installing and maintaining software such as </p>
<ul>
<li>Installing an operating system</li>
<li>Installing anti-virus application software</li>
<li>Doing a defragment on hard drive</li>
</ul>
<p>Experience using application software such as...</p>
<ul>
<li>Adobe Photoshop CS6</li>
<li>Adobe Premier Pro CS6</li>
<li>Adobe Illustrator CS6</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="well">
<h3>Future goals within IT</h3>
<ul>
<li>Improve my skills on using programming language javascript</li>
<li>Learn how to use Adobe After Effects to improve editing skills</li>
<li>Expand my knowledge on bootstrap</li>
</ul>
</div>
</div>
</div>
</div>
You can also use offset to center the image.
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="thumbnail">
<a href="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" target="_blank">
<img src="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" alt="picture" class="img-responsive center-block" />
</a>
</div>
</div>
For some reason bootstraps panel class doesn't seem to be getting applied here:
<div class="container main-content">
<div class="row">
<div class="col-sm-3">
<div class="panel panel-primary">
<div class="panel-heading">
<img src="http://cliparts.co/cliparts/8TE/6jz/8TE6jzq9c.png" class="stats-image" />
<h3>ACHIEVERS</h3>
</div>
<div class="panel-body stats-body">
<span class="stats-value">37%</span>
</div>
</div>
</div>
</div>
</div>
Plnkr here:
http://plnkr.co/edit/7e3mXCDixuJ4U06lu3TX?p=info
what am i missing here ?
You are using Bootstrap 4 alpha 2 which might not be having panel support. I couldn't find panel documentation here:
http://v4-alpha.getbootstrap.com/components/alerts/
Instead, try using bootstrap 3.3.6 in the plunk
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link data-require="bootstrap#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js" />
The header is all effed: How do I get this smartcat.png image to be the entire background for the header only?
I am hoping to add the answer to my stylesheet "cat.css" .
I appreciate all suggestions and better practices for coding with bootstrap.
Here is the website:
http://chillcastle.com/cat/felinedelirium
Here is my stylesheet:
.header-content {background: url("img/smartcat.png");}
.header {background: url("img/smartcat.png");}
Here is the webpage code:
<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>Feline Delirium</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/creative.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]-->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="www.chillcreatives.com">
<span class="sr-only">Poop</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Felines</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#about">Cat Tales</a>
</li>
<li>
<a class="page-scroll" href="#services">Cat News</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Cat Life</a>
</li>
<li>
<a class="page-scroll" href="#contact">Cat Stuff</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<header>
<div class="header-content">
<div class="header-content-inner">
<h1 id="homeHeading">Kitty Cats</h1>
<hr>
<p>Feline Delirium is a fun thing.</p>
Find Out More
</div>
</div>
</header>
<section class="bg-primary" id="about">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Cats</h2>
<hr class="light">
<p class="text-faded">Whoa. Cats.</p>
Get Started!
</div>
</div>
</div>
</section>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">BIJOUXXX</h2>
<hr class="primary">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-diamond text-primary sr-icons"></i>
<h3>Sturdy Templates</h3>
<p class="text-muted">Cats!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-paper-plane text-primary sr-icons"></i>
<h3>Ready to Ship</h3>
<p class="text-muted">You can use this theme as is, or you can make changes!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-newspaper-o text-primary sr-icons"></i>
<h3>Up to Date</h3>
<p class="text-muted">We update dependencies to keep things fresh.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-heart text-primary sr-icons"></i>
<h3>Made with Love</h3>
<p class="text-muted">You have to make your websites with love these days!</p>
</div>
</div>
</div>
</div>
</section>
<section class="no-padding" id="portfolio">
<div class="container-fluid">
<div class="row no-gutter popup-gallery">
<div class="col-lg-4 col-sm-6">
<a href="img/cubecat.png" class="portfolio-box">
<img src="img/cubecat.png" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="img/smartcat.png" class="portfolio-box">
<img src="img/smartcat.png" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="img/goldencat.png" class="portfolio-box">
<img src="img/goldencat.png" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="smokincat.jpg" class="portfolio-box">
<img src="img/smokingcat.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="img/5.jpg" class="portfolio-box">
<img src="img/" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="img/6.jpg" class="portfolio-box">
<img src="img/portfolio/thumbnails/6.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
<aside class="bg-dark">
<div class="container text-center">
<div class="call-to-action">
<h2>Bijouxxx</h2>
cats!
</div>
</div>
</aside>
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Let's Get In Touch!</h2>
<hr class="primary">
<p>Hit us up with your cat pic</p>
</div>
<div class="col-lg-4 col-lg-offset-2 text-center">
<i class="fa fa-phone fa-3x sr-contact"></i>
<p>123-456-6789</p>
</div>
<div class="col-lg-4 text-center">
<i class="fa fa-envelope-o fa-3x sr-contact"></i>
<p><a href="the chill castle # gmail.com >feedback#startbootstrap.com</a></p>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="vendor/scrollreveal/scrollreveal.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Theme JavaScript -->
<script src="js/creative.min.js"></script>
The aspect ratio of the cat picture compared to the header is way different. You could crop the image in height a little bit to help it fit.
After which you can use this code to get it scale to cover the entire header. You will need to mess around with the css position and the size of the cat image to see what works for you.
.header-content {
background: url(img/smartcat.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Here's the article link for a full width background image - https://css-tricks.com/perfect-full-page-background-image/
Happy coding!
Added Note
The header is very thin and currently has an approximate aspect ratio of 7:1. Which basically means in order to maintain aspect ratio ,every one increase in height will cause a 7 times increase in width. So if you double the height, the width will be 14 (i.e 14:2)
Now your image on the other hand has an aspect ratio of 25:24.
So imagine that you're trying to fit a square box inside a thin horizontal line. Not really going to fit without distorting the image.
So you basically have three options.
Change background-size:cover to background-size:contain. This will basically make the height of the image the same as the parent so that the whole image appears without breaking the ratio. Basically it will make sure your whole image is displayed in the container. But this also means that your container will not get fully covered by the image. Here is an example of option 1 . http://i.imgur.com/GxcF4aO.jpg?1
Keep background-size:cover and adjust the aspect ratio of the image to be more like the header. i.e. Crop the image in height.
Here is an example of a cropped image. http://i.imgur.com/GNEZq4U.jpg?1
Keep everything the way it is and increase the height of the header to match the image.
Here's a link to show how aspect ratio works. You can toggle the How to handle ratio mismatches radio buttons at the bottom to check the difference between options 1 and 2.
http://andrew.hedges.name/experiments/aspect_ratio/ Make sure you have the show sample image button checked. Enter the dimensions of the header and either the height or the width of the image to find out what ratio the image should be.
Hope this helps.
Currently I have my website looking like this.
http://imgur.com/jS1vEKq
Here's the html
<html ng-app="app">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/opencv_css.css" />
</head>
<nav class="navbar navbar-default">
<div class="container"> <!-- top intro part -->
<div class="navbar-header">
<a class="navbar-brand" href="#/"> OPENCV 3.0.0</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
<body ng-controller="MainController">
<div class="row"> <!-- Dropdown menu -->
<div class="col-md-20">
<div id="main">
<form class="form-horizontal" role="form">
<label class="control-label col-md-2">Filter List:</label>
<div class="col-md-5">
<select class="form-control"
ng-model="template"
ng-options="t as t for t in templates">
</select>
</div>
</form>
</div>
</div>
<input type="file" id="fileToUpload" name="fileToUpload">
<button ng-click="add()">Upload</button>
</div>
<div class="row">
<div class="col-md-push-2 col-sm-push-1 col-lg-push-1 col-md-8-col-sm-8 col-lg-6 text-warning">
<div id="imagesData">
<img id="img1" src="" alt="" class="data-image" />
</div>
</div>
<div class="col-md-push-4 col-sm-push-2 col-lg-push-2 col-md-16-col-sm-16 text-warning">
<div id="imagesData">
<img id="img2" src="" alt="" class="data-image" />
</div>
</div>
</div>
<script src="js/jQuery.js"></script>
<script src="js/angular.js"></script>
<script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I was wondering how I would move image elements just a few pixels lower so that they aren't right against the upload button? And I know that the way I've placed the images in bootstrap must be completely wrong and awful. I'm still a noob to web dev so I simply looked at someone else's code and made it fit to my needs.
Try a < br> (Without Space) it will break one line ;)
I saw this answer was given already, sorry
You can add a margin to your .data-image class
.data-image {
margin: 10px 0px;
}
Well theres a few ways you could do this firstly (kinda cheaty) just use simple <br> tags like so...
<br><br> <--- right here
<div class="row">
<div class="col-md-push-2 col-sm-push-1 col-lg-push-1 col-md-8-col-sm-8 col-lg-6 text-warning">
<div id="imagesData">
<img id="img1" src="" alt="" class="data-image" />
</div>
</div>
<div class="col-md-push-4 col-sm-push-2 col-lg-push-2 col-md-16-col-sm-16 text-warning">
<div id="imagesData">
<img id="img2" src="" alt="" class="data-image" />
</div>
</div>
</div>
you can add it in before or after the row tag i think but try this