A different approach to Bootstrap Alert

A Different approach to Bootstrap Notificaion

I was working on a project, where I had to design a login panel. It had two columns, one for Login and one for registration. Now the problem was, when I made the initial commit to git, I forgot to insert an alert notification. I have to show some error when someone use wrong username password or missed a field in the registration form, or the username he is trying to get is already registered. That sort of stuff.

Now as I was using bootstrap, I can simply use the bootstrap alert. All I needed to do is insert the HTML code. But that I thought, why not a different approach? Especially I loved the alert UI of WordPress admin panel. So I figured, let’s shake some code ( not booty ).

I was about to write the whole thing here, but a friend suggested that I should circulate it to a broad network. And my first choice was Bootsnip. Probably the largest collection of bootstrap snippets. Helping me in my work for more than a year. So i put it there.


CSS3 Modal – The Smart Way

So I believe You must have Heard about modal. IF not, I can bet you have already seen it, Just don’t know what it was. Lets just say, One of your Facebook Status got 50 Likes, Now you wanna see, By whom. Like ” Bill Gates, Linus Torvalds, Mark Shuttleworth And 47 others like this“. You will click on ” 47 Others like this ” and a box will come up, With the name of all those people liked it. Basically that box is a smart Example of HTML modal. Its one Kind of Inside Pop-up Window. You can use it for Login box, For Ads, For Information, For Anything. Now There are a lots of jQuery Stuff to create a model. Even The Great Bootstrap Has a modal built in. By the Way, Some people Even Call it Dialog ( As jQuery Officials Did ) .

Here is Some nice Example And link of JQuery Modal Aka Dialog [ Link ] .


Our Way

But, The Awesomeness of HTML5 And CSS3, Opened a new era of Web Development. Now, You can do the Complex work with jQuery or Simple Javascript [ If you prefer working much ]. Ad leave the Design Section to CSS3. Well, We will make a Similar modal with CSS3. So, if the client Browser Failed to load jQuery [ Lets just guess Google Was Sleeping ], Your Modal Will still work.

So what do we need? Nothing. Just get a Text Editor, Anything you prefer and Let set go.


To Trigger the modal, You will be needing a Action, What will be done with a link. A Anchor.

So, Now we need the Content of The modal,

Remember, The Model Will be triggered using the anchor, So you have to carefull about choosing the model ID.

 The CSS

So, Lets Kick some CSS.


Well, The Code is Pretty Clear, If you know what you are doing actually. Now Lets Get a Live View of It,



Hope You find It useful.