Adapting text size to image & screen size in Bootstrap - javascript

Here is a the jsFiddle link to my SSCCE, but the gist of my code is below. I'm using Twitter Bootstrap 4.0 to make a simple page:
<!DOCTYPE HTML>
<html>
<head>
<title>FooBar</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container text-center mx-auto">
<div class="col-lg-12 col-sm-12 well-lg">
<img src="https://s3.amazonaws.com/smeeb-public-images/foobar.png" class="img-fluid mx-auto img-rounded" alt="FooBar logo" />
</div>
<div class="col-lg-12 col-sm-12 well-lg">
<h1 style="color: rgb(0, 170, 236); font-size: 40px;">FOOBAR</h1>
</div>
<div class="col-lg-12 col-sm-12 well-lg alert alert-danger">
<strong>Oops!</strong> Something went wrong!
</div>
<div class="col-lg-12 col-sm-12 well-lg">
<button type="button" class="btn btn-primary btn-lg">Sign In</button>
</div>
<div class="col-lg-12 col-sm-12 well-lg"> </div>
</div>
</body>
</html>
As you can see in the jsFiddle, there are several glaring issues:
The image is way too big; and
The h1 title under the image is way too small; and
Both the image + title aren't horizontally centered on a large screen/viewport
I'm trying to tune either the bootstrap classes or the CSS stylings directly so that:
The image and title are always perfectly centered
On a larger screen (desktop/laptop browser), the image only takes up maybe 20% height + width of the screen
On a smaller screen (mobile), the image takes up most of the width of the screen, maybe with a few % of padding on both sides
In all cases, the h1 title does its best to resize the text so that its width is more or less the same width of the image
Can anyone see where I'm going awry?

Here is an example of what you might do. Obviously the details of the styles are up to you to match your exact preference.
.well-lg img{
width:20%;
}
body{
display:flex;
justify-content:center;
}
#media screen and (max-width:468px){
.well-lg img{
width:80%;
}
.well-lg h1{
font-size:4em !important;
}
}
<!DOCTYPE HTML>
<html>
<head>
<title>FooBar</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container text-center mx-auto">
<div class="col-lg-12 col-sm-12 well-lg">
<img src="https://s3.amazonaws.com/smeeb-public-images/foobar.png" class="img-fluid mx-auto img-rounded" alt="FooBar logo" />
</div>
<div class="col-lg-12 col-sm-12 well-lg">
<h1 style="color: rgb(0, 170, 236); font-size: 40px;">FOOBAR</h1>
</div>
<div class="col-lg-12 col-sm-12 well-lg alert alert-danger">
<strong>Oops!</strong> Something went wrong!
</div>
<div class="col-lg-12 col-sm-12 well-lg">
<button type="button" class="btn btn-primary btn-lg">Sign In</button>
</div>
<div class="col-lg-12 col-sm-12 well-lg"> </div>
</div>
</body>
</html>

Related

How do i use coreui?

I am trying to use coreui for a project im starting but for somereasson it dosent work I tried using the template the site gives and I cant get it to work. Am I doing something wrong or am I forgeting something?
`
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CoreUI CSS -->
<link rel="stylesheet" href="https://unpkg.com/browse/#coreui/coreui#2.1.16/dist/css/coreui.min.css">
<title>Hello, world!</title>
</head>
<body class="app">
<h1>Hello, world!</h1>
<div class="container">
<div class="row">
<div class="col">
1/2
</div>
<div class="col">
1/2
</div>
</div>
<div class="row">
<div class="col">
1/3
</div>
<div class="col">
1/3
</div>
<div class="col">
1/3
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, Bootstrap, then CoreUI -->
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/browse/#coreui/coreui#2.1.16/dist/js/coreui.min.js"></script>
</body>
</html>
`
I tried following the tutorial on the page but i couldnt get coreui to work.

how to play same song on two different divs in the HTML using wavesurfer.js in jQuery or JavaScript

I want to play same song on 2 different places in the html. I'm using wavesurfer.js to play the song. I want that same song should paly somewhere in the page as well as in the footer of the page. May be something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Player</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
</head>
<body>
<div class="container mt-5">
<div class="row border mt-5">
<div id="pageDiv"></div>
</div>
</div>
<footer class="footer bg-secondary border w-100" style="position: fixed; bottom: 0;">
<div class="container">
<div class="row">
<p class="text-white text-center">Footer</p>
<div id="footerDiv"></div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/wavesurfer.js#5.2.0/dist/wavesurfer.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
var wavesurfer = WaveSurfer.create({
container: '#pageDiv , #footerDiv',
height:48,
responsive:true,
hideScrollbar:true,
waveColor: '#00000078',
progressColor: '#bbbbbb',
barRadius:4,
scrollParent: false
});
wavesurfer.load('songs/song1.mp3');
wavesurfer.on('ready', function(){
console.log('ready');
wavesurfer.play();
});
</script>
</body>
</html>
How can I play the same song on two different places. using jQuery or JavaScript?
You need to create another Instance for another audio.
const wavesurfer1 = WaveSurfer.create({
container: "#pageDiv"
});
wavesurfer1.load("sample.mp3");
const wavesurfer2 = WaveSurfer.create({
container: "#footerDiv",
});
wavesurfer2.load("sample.mp3");
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
<script src="https://unpkg.com/wavesurfer.js"></script>
<div class="container mt-5">
<div class="row border mt-5">
<div id="pageDiv"></div>
</div>
</div>
<footer class="footer bg-secondary border w-100" style="position: fixed; bottom: 0;">
<div class="container">
<div class="row">
<p class="text-white text-center">Footer</p>
<div id="footerDiv"></div>
</div>
</div>
</footer>

paroller.js not working good on first load of page

When I hard refresh the page in middle section, then paroller js transform: translateY(); css not working properly on div <div class="col col-6" data-paroller-factor="0.4" data-paroller-type="foreground" data-paroller-direction="vertical">, after that when i scroll this its working fine.. I want that this should be work fine on first hard refresh... when We wo simple refresh of page this also woke fine, but when we see middle of page then do hard refresh Ctrl+F5 transform: translateY(); css not working properly.
Source url: https://tgomilar.github.io/paroller.js/
Source demo url: https://www.jquery-az.com/jquery/demo.php?ex=145.0_2
After hard refresh this incorrect css added: (On middle of the page, without scroll)
transform: translateY(318px);
After scroll: (Correct css apply):
transform: translateY(-16px);
Here is my below code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div style="height:400px;"></div>
<div class="row">
<div class="col col-6" data-paroller-factor="0.4" data-paroller-type="foreground" data-paroller-direction="vertical">
<div class="card">
<img class="card-img-top" src="https://lorempixel.com/400/200/abstract/3" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card vertical</h4>
<p class="card-text">
<code>data-paroller-factor="0.4" data-paroller-type="foreground"
data-paroller-direction="vertical"</code>
</p>
</div>
</div>
</div>
<div class="col col-6">
<div class="card">
<img class="card-img-top" src="https://lorempixel.com/400/200/abstract/3" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card vertical</h4>
<p class="card-text">
<code></code>
</p>
</div>
</div>
</div>
</div>
<div style="height:400px;"></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://www.jquery-az.com/jquery/js/paroller/jquery.paroller.js"></script>
<script>
$('[data-paroller-factor]').paroller();
$(function () {
$(window).paroller();
});
$( document ).ready(function() {
$('.paroller').paroller({
factor: 0.4,
type: 'foreground'
});
});
</script>
</body>
</html>
I found solution which is best:
Use latest file of js for "jquery.paroller.min.js"
Download js and Replace this:
https://github.com/tgomilar/paroller.js/releases/tag/v1.4.6

No overflow: Full-screen Carousel with footer and navbar HTML CSS JS

This is the layout that I need to achieve. Full-screen carousel with footer and navigational bar:
I am almost done with this one but I can't find a tricky way to achieve it. Because there's the overflow. Here's my current output:
and
Here's my html code:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Cyclehouse MNL</title>
<meta name="description" content="">
<meta name="msapplication-tap-highlight" content="yes" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />
<!-- Google Web Font -->
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lekton:400,700,400italic' rel='stylesheet' type='text/css'>
<!-- Bootstrap 3-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- OWL Carousel -->
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<!-- Slider -->
<link rel="stylesheet" href="css/jquery.kenburnsy.css">
<!-- Animate -->
<link rel="stylesheet" href="css/animate.css">
<!-- Loader Style -->
<link rel="stylesheet" href="css/loader-2.css">
<!-- Costum Styles -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<!-- Favicon -->
<link rel="icon" type="image/ico" href="favicon.ico">
<!-- Full Height -->
<style>
html,
body {
height: 100%;
}
</style>
</head>
<body>
<!-- Preloader -->
<div class="cover"></div>
<!-- Navigation section -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<img src="img/cyclehouselogo.png" alt="Logo" style="width:300px;height: 50px;margin-top:10px;"/>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>INSTRUCTOR</li>
<li>CYCLE WITH US</li>
<li>LOGIN</li>
<li>RIDE NOW</li>
</ul>
</div>
</div>
</div>
<div class="slider-container">
<div class="slider-control left inactive"></div>
<div class="slider-control right"></div>
<ul class="slider-pagi"></ul>
<div class="slider">
<div class="slide slide-0 active">
<div class="slide__bg" style="background-image: url('img/full-slider/image_7.jpg');background-position: top; background-size:cover;"></div>
<div class="slide__content">
<svg class="slide__overlay" viewBox="0 0 1 1" preserveAspectRatio="xMaxYMax slice">
<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
</svg>
<div class="slide__text">
<br>
<Br>
<h2 class="slide__text-heading">Dont let your dreams, be dreams.</h2>
</div>
</div>
</div>
<div class="slide slide-1">
<div class="slide__bg" style="background-image: url('img/full-slider/image_5.jpg');background-position: center; background-size:cover;"></div>
<div class="slide__content">
<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
</svg>
<div class="slide__text">
<h2 class="slide__text-heading">Dont let your dreams, be dreams.</h2>
</div>
</div>
</div>
<div class="slide slide-2">
<div class="slide__bg" style="background-image: url('img/full-slider/image_9.jpg');background-position: center; background-size:cover;"></div>
<div class="slide__content">
<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
</svg>
<div class="slide__text">
<h2 class="slide__text-heading">Dont let your dreams, be dreams.</h2>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row" style="float:right;">
<a class="footer-link" onClick="window.location.href='https://www.eliteboxing.com.ph'"><b>ELITE BOXING ·</b></a>
<b>PARTNER WITH US ·</b>
<b>TERMS AND CONDITION ·</b>
<b>FAQS ·</b>
<b>CONTACT US</b>
</div>
</div>
</div>
<script src="js/vendor/jquery-1.11.2.min.js"></script>
<script src="js/vendor/pace.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/ef-slider.js"></script>
<script src="js/vendor/owl.carousel.min.js"></script>
<script src="js/vendor/wow.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
If you notice my css code:
<!-- Full Height -->
<style>
html,
body {
height: 100%;
}
</style>
The height is set 100% but when I try to put overflow:hidden; the footer will be no longer view able. Is there any tricky way to do this? Thanks.
These days I use height:100vh; for any element that needed 100% height rather than putting it in HTML and Body tag.
For the overflow I would use
.slider-container{
height: calc(100vh - HEADERpx - FOOTERpx;
}

Can't make bootstrap modal work. Using PHP the get data and display it using a modal

Using PHP, I am trying to get data and display it using a bootstrap modal.
I can't get the bootstrap modal to open.
My PHP code connects to the server and database, and sends the information back, but since the modal does not work, it can't display the data received.
I also tried to activate the modal using JavaScript, but it still did not work.
Here is my code:
<html lang="en">
<div id="head">
<!-- 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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- 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>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
<title> IUC Alumni Connect </title>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-4">
<img id="JLogo" src="ACILogo.png" alt="">
</div>
<div class="col-md-7">
<h1 id="JTitle" class="greeting"><b> Welcome to the IUC Reachout Page </b></h1>
<p id="JExplanation" class="greeting"> Find alumni, contact them, make the right choices.</p>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color: white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
</div>
<body>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<h4><span class="glyphicon glyphicon-search"></span>Results</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<?php
if($_SERVER["REQUEST_METHOD"]="GET"){
if (isset($_GET['uni_name']) && is_string($_GET['uni_name'])) {
$uname = $_GET['uni_name'];
} else {
$uname = "";
}
}
$con = mysqli_connect('', '', '', '');
if ($con->connect_errno) {
echo "
<script> alert('We are experiencing problems.') </script>";
exit;
}
$sql = "SELECT * FROM students WHERE university like '%".$uname."%'";
if (!$result = $con->query($sql)) {
echo "
<script> alert('Sorry, the website is experiencing problems.') </script>";
exit;
}
if ($result->num_rows === 0) {
echo "
<script> alert('We could not find a match for ID ".$uname.", sorry about that. Please attempt again.') </script>";
exit;
} else {
echo "<ul>
";
while($row = $result->fetch_assoc()){
echo sprintf("
<li>%s %s - %s</li>", $row["firstName"], $row["lastName"], $row["university"]);
//echo sprintf("
<li>%s</li>", $row["lastName"]);
//echo sprintf("
<li>%s</li>", $row["university"]);
}
echo "
</ul>";
}
$result->free();
$con->close();
?>
</div>
<div class="modal-footer">
<button onclick="graduateYearPage.html" type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">Return to search </button>
</div>
</div>
</div>
</div>
</body>
</html>
The main reason it is not working is because "Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3". Then you can in your own words "activate it using javascript" (jQuery).
There's a lot wrong with your HTML as well, but even while leaving that in place, using for example jQuery 1.12.4 makes the difference (left out your PHP):
<html lang="en">
<div id="head">
<!-- 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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- 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>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
<title> IUC Alumni Connect </title>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-4">
<img id="JLogo" src="ACILogo.png" alt="">
</div>
<div class="col-md-7">
<h1 id="JTitle" class="greeting" ><b> Welcome to the IUC Reachout Page </b></h1>
<p id="JExplanation" class="greeting"> Find alumni, contact them, make the right choices.</p>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color:white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
</div>
<body>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<h4><span class="glyphicon glyphicon-search"></span>Results</h4>
</div>
<div class="modal-body">
<p>Put your php code here</p>
</div>
<div class="modal-footer">
<button onclick="graduateYearPage.html" type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">Return to search </button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#myModal').modal();
});
</script>
</body>
</html>

Categories