Add place for handwriting with Bootstrap

Question

            <div class="row">
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <p class="classPadBottom0">Credit Card Number:</p>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3 ClsUnderline ClassPad0">
                    <p>&nbsp;</p>
                </div>
                <div class="col-md-2 col-sm-2 col-xs-2 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
                    <p class="classPadBottom0">Exp. Date:</p>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3 ClsUnderline">
                    <p>&nbsp;</p>
                </div>
            </div>

DEMO

I have create small example what i have now. It's like 2 labels and place for handwriting. But it isn't very responsive and have too much space between label and handwriting place.

Is there another way to add such space?

Check this out - http://stackoverflow.com/questions/18202240/bootstrap-3-grid-with-no-gap — Luís P. A., May 22 '15 at 09:57
Answer: Yes there is. Seriously, why do you think it's not 'responsible'? — Peter, May 22 '15 at 10:01
@Peter, cause under that part that i showed in example, i have similar one but with another text. So it depands on length of text. — demo, May 22 '15 at 10:04

Chris · Accepted Answer · 2015-05-22T11:28:59.333

How about this - https://jsfiddle.net/qyk1nbb5/2/

I have made use of definition lists to provide you with a clean responsive solution for displaying the label & value. Also using the standard WordPress column structure.

There is a small amount of CSS involved to convert the form items to just have an underline.

HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <dl class="dl-horizontal">
                <dt><label for="card_number">Credit Card Number:</label></dt>
                <dd><input type="text" class="form-control text-line" id="card_number" name="card_number" /></dd>
            </dl>
        </div>
        <div class="col-sm-6">
            <dl class="dl-horizontal">
                <dt><label for="card_expiry">Exp Date:</label></dt>
                <dd><input type="text" class="form-control text-line" id="card_expiry" name="card_expiry" /></dd>
            </dl>
        </div>
    </div>
</div>

CSS

DT {
    line-height: 34px;
}

INPUT.text-line {
    border: none;
    border-bottom: 1px solid #888888;

    box-shadow: none;
    -o-box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;

    border-radius: 0;
    -o-border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

I hope this answers your question and gives you a working solution.

You should also perhaps have a read about inline forms - http://getbootstrap.com/css/#forms-inline

Also, definition lists for your reference - http://getbootstrap.com/css/#description

Yes, it looks nice. Just one note - i don't need textbox for input. I generate this page as pdf, then user must write at some places what he/she want. — demo, May 22 '15 at 11:31
I use css for "INPUT.text-line" on :focus and now it looks as what i want. Thanks — demo, May 22 '15 at 11:57

Add place for handwriting with Bootstrap

1 Answers1