Home Ask Login Register

Developers Planet

Your answer is one click away!

Aniruddha Raje February 2016

Bootstrap grid alignment

Can some one check my code and tell me why <br> tags aren't working after <textarea> tags <br> and why things messed up after the Date field?

<html>
    <head>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
        <script> 
            $(document).ready(function(){
                $('#dateRangePicker').datepicker({
                    format: 'dd/mm/yyyy',
                }).on('changeDate', function(e){
                    $('#dateRangeForm').formValidation('revalidateField', 'date');
                });
            });
        </script>
    </head>
    <body>
        <h1 align="center">Some text here</h1>
        <div class="form-group">
            <div class="col-sm-3">
                <label>Full Name:</label>
            </div>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="usr" style="width:400px;"/>
            </div><br><br>
            <div class="col-sm-3">
                <label>Father's Name:</label>
            </div>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="usr" style="width:400px;"/>
            </div><br><br>
            <div class="col-sm-3">
                <label>Permanent Residential Address:</label>
            </div>
            <div class="col-sm-9">
                     

Answers


Jeff Arries February 2016

Looked at the code and it seems as though you don't understand what the

<br>

tag is used for, but as explained here http://www.w3schools.com/tags/tag_br.asp it inserts a single line break. Hope that helped!


Benjamin Rasmussen February 2016

If you want to add spacing below an element (in this case ) you should really use CSS. It gives you a lot more control, and you can be more certain that different browsers have the same result.

Seeing as you're already using inline styles in this document, you could do it by saying

        <div class="col-sm-9" style="margin-bottom: 20px;">

Generally inline styles is not a good idea - you should really have it in a seperate file, using classes and ID's but i assume you know that :)


Samir February 2016

There are few modifications needed in your code.

Problem

  1. <br> tag inserts line break which adds extra space between elements.

  2. The Date field is getting misaligned because of incorrect use of input-group class.

  3. There is no semicolon (;) after &nbsp. Correct syntax is &nbsp;

Solution

  1. You can eliminate the need of <br> tags by wrapping each element inside form-group

  2. To align Date, create a child container with class input-group.

  3. &nbsp; is not needed. This is not the standard way of writing HTML. Use margin instead.

Have modified your code with above fixes. Check here


Aniruddha Raje February 2016

<html>
    <head>
        <title></title>
                <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

            <!-- jQuery library -->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

            <!-- Latest compiled JavaScript -->
            <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

            <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>


        <script> 
            $(document).ready(function() 
            {
                $('#dateRangePicker')
                    .datepicker(
                    {
                        format: 'dd/mm/yyyy',
                    })
                    .on('changeDate', function(e) 
                    {

                        $('#dateRangeForm').formValidation('revalidateField', 'date');
                    });
            });

        </script>

    </head>

    <body>
        <h1 align="center">Some text here</h1>

        <div class="form-group">
          <div class="col-sm-3">
            <label>Full Name:</label>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-9">
            <input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;" />
          </div>
        </div>
        <div class="form-group">  
          <div class="col-sm-3">
            <label>Father's Name:</label>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-9">
            <input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;" 

Post Status

Asked in February 2016
Viewed 3,267 times
Voted 9
Answered 4 times

Search




Leave an answer


Quote of the day: live life

Devs Planet ®

2014-2016 www.devsplanet.com

Devs Planet © all rights reserved

Search