Bootstrap alert

Developer
Tushar Mehrotra
Size
2,509 Kb
Views
18,216
  1. Bootstrap alert Previews
  2. Bootstrap alert HTML Codes
  3. Bootstrap alert CSS Codes
  4. Bootstrap alert JS Codes

How do I make an bootstrap alert?

What is a bootstrap alert? How do you make a bootstrap alert? This script and codes were developed by Tushar Mehrotra on 13 September 2022, Tuesday.

Bootstrap alert Previews
IQ Test

Bootstrap alert - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bootstrap alert</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<body> <div class="container text-center"> <p>This is a bootstrap alert !!!</p> <button class="btn btn-danger">alert</button> </div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Bootstrap alert - Script Codes CSS Codes

body{ background: #011627;
}
.container{ margin-top: 20px; z-index: 1;
}
.container p{ padding: 5px; color: #fff; font-size: 20px;
}
.overlay{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(255,255,255,0.4); display: none; transition: all 2s ease-in-out;
}
.alert-warning{ background: #d9534f; padding: 0; position: relative; width: 70%; margin: 20px auto; border: none; transition: all 2s ease-in-out;
}
.btn.btn-danger{ margin-bottom: 20px; padding: 5px 30px; text-transform: uppercase; background: #ff9f1c; border: 1px solid #ff9f1c; font-weight: bold; font-size: 20px;
}
.alert-warning .close{ position: absolute; top: 6px; right: 7px; color: #fff; background: #d9534f; font-size: 24px; opacity: 1; }
.alert-warning .close span{ width: 20px; height: 20px;
}
.alert-warning p{ color: #fff; font-size: 20px; padding: 5px; margin: 0 5px
}

Bootstrap alert - Script Codes JS Codes

var $overlay = $('<div class="overlay"></div>');
var $alert = $('<div class="alert alert-warning" role="alert">');
var $button = $('<button type="button" class="close" aria-label="Close"></button>');
var $close = $('<i class="fa fa-times-circle"></i>');
var $p = $('<p></p>');
$alert.append($button);
$alert.append($p);
$button.append($close);
$overlay.append($alert);
$(".container").append($overlay);
$("button.btn-danger").on("click", function(){ $overlay.find($p).text("This is a custom bootstrap alert"); $overlay.fadeIn();
})
$button.on("click",function(e){ $overlay.fadeOut(); e.preventDefault();
})
Bootstrap alert - Script Codes
Bootstrap alert - Script Codes
Home Page Home
Developer Tushar Mehrotra
Username MTushar
Uploaded September 13, 2022
Rating 3
Size 2,509 Kb
Views 18,216
Do you need developer help for Bootstrap alert?

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!

Tushar Mehrotra (MTushar) Script Codes
Name
React JS add project
React Tabs
Less Color Functions
JS Calculator
Show Hide Alert with Angular JS
Full Page JS jQuery Plugin
Form Email validation
React JS Movie Info App
Simple chatbot javascript
Angular ToDo App
Create amazing marketing copy 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!