Last active
March 1, 2018 06:00
-
-
Save AkashShivanand/7c1ee3fdc578844f3b3dab111d63f0be to your computer and use it in GitHub Desktop.
Create Transparent Jumbotron with Bootstrap V.4.0.0
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
<meta name="description" content="How to create Transparent Jumbotron with Bootstrap V.4.0.0"> | |
<meta name="author" content="akashshivanand.com"> | |
<title>Transparent Jumbotron with Bootstrap V.4.0.0</title> | |
<!-- Bootstrap core CSS --> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> | |
<!-- Custom styles for this template --> | |
<style type="text/css"> | |
body { | |
padding-top: 5rem; /* Provide Space from Top */ | |
background: #942626; /* Set background color for body to justify transparency of Jumbotron */ | |
} | |
.jumbotron { | |
background: none; /* Transparent background */ | |
} | |
</style> | |
</head> | |
<body> | |
<main role="main" class="container"> | |
<div class="jumbotron"> | |
<h1 class="display-3 text-right">name</h1> | |
<hr class="my-4 text-right"> | |
<p class="lead text-right">description</p> | |
<p class="lead text-right"> | |
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> | |
</p> | |
</div> | |
</main> | |
<!-- /.container --> | |
<!-- Bootstrap core JavaScript | |
================================================== --> | |
<!-- Placed at the end of the document so the pages load faster --> | |
<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> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment