Building a bootstrap modal window

Question

I've built a modal window as seen in my modal HTML and CSS code below and was looking for any tips/advice regarding how well I've applied any best practices in both my HTML and styling with regards to building a modal window.

Here's the tutorial I followed.

Here's my modal HTML code:

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal_header">

        <div class="modal_title">Log In</div>
      </div>

      <div class="modal_body">

        <div class="log_in_div_option_a">
            <a class="btn-auth btn-facebook large" href="#">Log in with <b>Facebook</b></a>
        </div>

        <div class="log_in_div_option_b">
            <a class="btn-auth btn-google large" href="#">Log in with <b>Google</b></a>
        </div>

        <hr class="hr"></hr>

        <p class="log_in_div_option_c">Or log in using your e-mail</p>

        <div>
            <input title="Enter username" class="firstname" name="firstname" type="text" required placeholder="Enter e-mail">
        </div>

        <div>
            <input title="Re-enter password" class="reenterpassword" name="reenterpassword" type="password" required placeholder="Enter password">
        </div>         
      </div>

      <div class="modal-footer">
        <button type="button" class="btn_close" data-dismiss="modal">Close</button>

        <button type="button" class="btn_log_in">Log In</button>
      </div>

    </div>
  </div>
</div>

Here's my modal CSS code:

    /* */
.modal_header{
    min-height:16.43px;
    padding:15px;
    border-bottom:1px solid #e5e5e5;
    background-color: #A2E55A;
}

/* */
.modal_title{
    font-size: 25px;
    color: #999999;
    font-family:'Trebuchet MS', Tahoma, Sans-serif;
    background-color: #A2E55A;
    color: #FFFFFF;    
}

/* */
.modal_body{
    position:relative;
    padding:15px;
    background-color: #FFFFFF;
}

/* */
.log_in_div_option_a {
    font-family:'Trebuchet MS', Tahoma, Sans-serif;     
    background-color: #FFFFFF;
}

/* */
.log_in_div_option_b {
    font-family:'Trebuchet MS', Tahoma, Sans-serif;     
    margin-top: 15px;
    background-color: #FFFFFF;
}

/* */
.log_in_div_option_c {
    font-family:'Trebuchet MS', Tahoma, Sans-serif; 
    color: #999999;
    font-size: 20px;
    font-weight: bold;
}

/* Log In button */
.btn_log_in {
    right: 0px;
    width: 150px;  
    height: 36px;
    border:none;
    font-weight: normal;
    font-size: 20px;  
    margin-top: 0px;

    background: #CCC;
    background: -webkit-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
    background: -moz-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
    background: -ms-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
    background: -o-linear-gradient(#A2E55A 0%,#A2E55A 50%,#A2E55A 51%,#A2E55A);
    background: linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
    -pie-background: linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);

    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;

    -webkit-box-shadow: inset 1px 0 0px rgba(255,255,255,.4);
    -moz-box-shadow: inset 1px 0 0px rgba(255,255,255,.4);
    box-shadow: inset 1px 0 0px rgba(255,255,255,.4);

    color: #F5F5F5;
}

/* */
.btn_log_in:hover,
.btn_log_in:focus,
.btn_log_in.focus,
.btn_log_in:active,
.btn_log_in.active {
    background: -webkit-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
    background: -moz-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
    background: -ms-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
    background: -o-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
    background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
    -pie-background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);

    border-color: #ADADAD;
}

user34073 · Accepted Answer · 2015-01-26 20:35:13Z

1

Your HTML is pretty good, beyond the fact that you do not have a doctype or other supporting HTML elements. You should always construct your HTML files like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Page Title Here</title>
    </head>
    <body>
        <!-- Markup here -->
    </body>
</html>

According to the HTML validator at W3C, you have only one other problem. You should not use a closing </hr> tag; you should just leave that element open.

<hr class="hr"></hr>

Your CSS is perfect according to the CSS validator at W3C; however, you should either remove the /* */ comments at the top of each section or actually use them to state what is happening or what is being modified.

answered Jan 26, 2015 at 20:35

user34073

\$\begingroup\$ I would say to make it a self closing tag <hr class="hr" /> but that is more XHTML than HTML5 I always have the habit of closing tags, I don't like to leave them open. \$\endgroup\$

Malachi
– Malachi

2015-01-29 20:05:29 +00:00
Commented Jan 29, 2015 at 20:05
1

\$\begingroup\$ Yes, this validates also. \$\endgroup\$

user34073
– user34073

2015-01-29 20:14:45 +00:00
Commented Jan 29, 2015 at 20:14

Add a comment |

Stack Exchange Network

Building a bootstrap modal window

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Building a bootstrap modal window

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions