Bootstrap has always been so popular among front end developers. It provides many built in components to work with and modal is one of them. A modal can genuinely create huge impact over the audience. Bootstrap provides an easy way to create a modal however customization needs little bit practice. So in this post i will explain about everything we can do with bootstrap modal. In addition to it i will also show you guys how to customize it.

What is modal?

A Modal is a just a dialog box or popup window and it’s is displayed over the current page. There may be various reasons to use a modal. Let’s list some of the situations where modal works better.

  • A subscribe popup for you blog

subscribe popup

  • Special offers of your E-commerce

ecommerce modal

  • A popup sign up form for your website

login modal

  • Any discount offer or ads that your are promoting

ads popup

I think above 4 is enough however you can use it where ever you would like. Before we start to write codes or explain bootstrap modal you need bootstrap first. Don’t worry if you don’t have it you can download it here or you can use cdn. Ok so let’s move to the next section and start coding.

Bootstrap modal

First of all create a project directory and name it whatever you like. Inside that directory create 2 folder one for css and other for javascript and one html file. Now add bootstrap css file in css folder and js file in javascript folder. Always add jquery before bootstrap js file in html because bootstrap uses jquery. Finally open the html file and write the markup.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
	<script src="javascript/jquery.min.js"></script>
	<script src="javascript/bootstrap.min.js"></script>
</body>
</html>

In the above code i have just shown you the structure to use bootstrap. Now i will add markup for the modal.

<div class="container-fluid">
  	<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
	<div class="modal fade" id="myModal" role="dialog">
    	<div class="modal-dialog">

      		<div class="modal-content">
        		<div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal">×</button>
			        <h4 class="modal-title">Modal Header</h4>
			    </div>
	        	<div class="modal-body">
	          		<p>Some text in the modal.</p>
	        	</div>
	        	<div class="modal-footer">
	          		<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        	</div>
      		</div>
    	</div>
  	</div>
</div>

First of all i have added a container which is necessary. The first button element is toggle button which will be use to hide or show the modal. After that our modal starts which has classes modal and fade. Modal class is used for modal styles and fade is used to animate it. Inside of modal there’s modal dialog which contains modal content which has further 3 parts(div). If you notice that all the class name are in plain English language so i think it already explains what it is for. So now save the code open your browser and run it. Now you know the markup to create a bootstrap modal. Actually modal is plugin of bootstrap so it also has some options to customize. I have created a list of it to make it less complicated check it out below.

  • modal sizing modal-lg, modal-sm add right after modal-dialog class in that div.
  • A html attribute data-backdrop specifies whether the modal should have a dark overlay and it has 3 possible values true or false or static.
  • Another html attribute data-keyboard specifies whether the modal can be closed with the esc key. It will be either false or true.
  • Finally data-show specifies whether to show the modal when initialized. Possible values are true or false.

So now we have covered the basics of bootstrap modal. Therefore its the perfect time to start our customization project.

Customize bootstrap modal

First of all you will need the exact same directory structure. In addition to all just create a style sheet and link it in html after bootstrap css. You guys know how to add bootstrap modals and assets so create a html file and add everything there. Just remove the modal body and modal footer. We will need 2 boxes(div) inside modal body one is left part other one is right part. So now add the following markup for for left part of modal body.

<div class="left">
	<form>
		<div class="form-group">
			<label for="name">Your name</label>
			<input type="text" class="form-control">
		</div>
		<div class="form-group">
			<label for="email">Your email</label>
			<input type="text" class="form-control">
		</div>
		<a href="#" class="signup">Sign Up</a>
	</form>
</div>

I have just added a simple form and an anchor tag. Now let’s move to right part of modal body.

<div class="right">
	<h4>REGISTER NOW AND GET FREE SERVICE FOR 2 WEEKS</h4>
	<small>No credit cards are required</small>
	<a href="#" class="btn-dark" data-dismiss="modal">No thanks</a>
</div>

The right part has some text and an anchor tag which has the data-dismiss attribute to dismiss the modal. So finally our markup is ready let’s move to the css.

Customize bootstrap modal with css

Anyway before moving to the css check below to ensure you are doing it right.

I hope you guys have liked this post so let’s move to the css. First of all lets add some styles to our container.

.container-fluid {
	background-image:url('url of the image');
	background-position:center;
	background-size:cover;
	height:100vh;
	text-align:center;
}

I have just added a background image and set its background position size and height. Now we need to make our modal transparent and position left and right block.

.modal-content {
	background:transparent;
}
.modal-body {
	display:flex;
	padding:0;
}
.left,.right {
	text-align:left;
	flex:1;
	padding:10px;
}

While i have used flexbox to make things easy so if you don’t know about it read it here. So now we have positioned 2 blocks now its time to add styles to those.

.left {
	color:hotpink;
}
.form-control {
	background:rgba(17,17,17,0.5);
	border:0;
	color:#fff;
}
.signup {
	background:linear-gradient(#fb5760,#f655a1);
	color:#fff;
	padding:8px 14px;
	display:block;
	width:80px;
	border-radius:4px;
	margin:0px auto;
	transition:all 0.6s linear;
}
.signup:hover {
	color:#fff;
	text-decoration:none;
	background:rgba(0,0,0,0.9);
}

In the above code i have styled the signup link and forms. So now let’s head over to right block and add some styles.

.right {
	background:linear-gradient(#fb5760,#f655a1);
	color:#fff;
}
.right small {
	display:block;
	position:absolute;
	bottom:30px;
	margin-bottom:20px;
	color:rgba(255,255,255,0.75);
}
.btn-dark {
	background:rgba(0,0,0,0.7);
	display:block;
	text-align:center;
	padding:6px 10px;
	border-radius:4px;
	color:rgba(255,255,255,0.75);
	position:absolute;
	bottom:10px;
	transition:all 0.3s linear;
}
.btn-dark:hover {
	text-decoration:none;
	background:rgba(0,0,0,0.9);
	color:rgba(255,255,255,0.9);
}

Finally in the right block a background gradient has been applied and links are styled. So that’s all, we have learned today how to use bootstrap modal. In addition to that we have also done a customization project. If you guys have any queries regarding this guide then comment below. I will be happy to assist you as soon as possible.

So guys if you like this short and simple guide then visit regularly and share with your friends. Subscribe us and get our latest posts and offers directly by email.


Subham Mitra

A coder who loves to solve real-world problems through coding.

4 Comments

Ajay chander · October 11, 2017 at 10:04 am

Nice information bro. Keep going.. i was searching some for it earlier , now i got some idea from your article..

oussama · October 12, 2017 at 8:17 pm

really nice articl and helpful

moda verano 2017 mujer · November 30, 2017 at 3:49 am

Genial el post. Me suscribo al blog!!

sims 4 cats and dogs free code · December 6, 2017 at 5:51 pm

I have interest in this.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.