Image gallery using Bootstrap

Developer
Andy
Size
2,570 Kb
Views
8,096
  1. Image gallery using Bootstrap Previews
  2. Image gallery using Bootstrap HTML Codes
  3. Image gallery using Bootstrap CSS Codes

How do I make an image gallery using bootstrap?

What is a image gallery using bootstrap? How do you make a image gallery using bootstrap? This script and codes were developed by Andy on 26 December 2022, Monday.

Image gallery using Bootstrap Previews
IQ Test

Image gallery using Bootstrap - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Image gallery using Bootstrap</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head>	<title>Image Gallery</title>	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">	<link rel="stylesheet" type="text/css" href="gallery.css">	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>	<!-- to have navbar fixed to the top add class of navbar-fixed-top -->	<nav class="navbar navbar-inverse navbar-fixed-top">	<div class="container">	<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>	<a href="#" class="navbar-brand"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> IMGS</a>	</div>	<div class="collapse navbar-collapse" id="bs-nav-demo">	<ul class="nav navbar-nav">	<li><a href="#">About</a></li>	<li><a href="#">Contact</a></li>	</ul>	<ul class="nav navbar-nav navbar-right">	<li><a href="#">Signup</a></li>	<li><a href="#">Login</a></li>	</ul>	</div>	</div>	</nav>	<div class="container">	<div class="jumbotron">	<h1><i class="fa fa-camera-retro" aria-hidden="true"></i> The Image Gallery</h1>	<p>Beautiful images to take a moment from your day</p>	</div>	<div class="row">	<div class="col-lg-4 col-sm-6">	<div class="thumbnail">	<img src="https://i.imgur.com/qK42fUu.jpg">	</div>	</div>	<div class="col-lg-4 col-sm-6">	<div class="thumbnail">	<img src="https://images.unsplash.com/photo-1435771112039-1e5b2bcad966?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">	</div>	</div>	<div class="col-lg-4 col-sm-6">	<div class="thumbnail">	<img src="https://images.unsplash.com/photo-1442406964439-e46ab8eff7c4?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">	</div>	</div>	<div class="col-lg-4 col-sm-6">	<div class="thumbnail">	<img src="https://images.unsplash.com/photo-1439524970634-649c37a69e5c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1450&h=825&fit=crop&s=bfda9916c885869b43b70738693428d9">	</div>	</div>	<div class="col-lg-4 col-sm-6">	<div class="thumbnail">	<img src="https://images.unsplash.com/photo-1444090542259-0af8fa96557e?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">	</div>	</div>	<div class="col-lg-4 col-sm-6">	<div class="thumbnail">	<img src="https://images.unsplash.com/photo-1434543177303-ef2cc7707e0d?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">	</div>	</div>	<div class="col-lg-4 col-sm-6">	<div class="thumbnail">	<img src="https://images.unsplash.com/photo-1436262513933-a0b06755c784?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">	</div>	</div>	<div class="col-lg-4 col-sm-6">	<div class="thumbnail">	<img src="https://images.unsplash.com/photo-1439396087961-98bc12c21176?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">	</div>	</div>	<div class="col-lg-4 col-sm-6">	<div class="thumbnail">	<img src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">	</div>	</div>	</div>	</div>	</div>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
</body>
</html>

Image gallery using Bootstrap - Script Codes CSS Codes

body {	padding-top: 70px;
}
.jumbotron {	color: #2c3e50;	background: #ecf0f1;
}
.navbar-inverse {	background-color: #2c3e50;
}
.navbar-inverse .navbar-nav>li>a { color: white;
}
.navbar-inverse .navbar-brand { color: white;
}
Image gallery using Bootstrap - Script Codes
Image gallery using Bootstrap - Script Codes
Home Page Home
Developer Andy
Username Andygirl
Uploaded December 26, 2022
Rating 3
Size 2,570 Kb
Views 8,096
Do you need developer help for Image gallery using Bootstrap?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy (Andygirl) Script Codes
Name
FormSolution
Build a Random Quote Machine - FreeCodeCamp
Todo list
Show the local weather
CSS tutorial
RGB GAME
Circles
SelectorsExercise
Html_table-quiz
Photo blog exercise
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!