CODEWITHSUNDEEP
reactjstwitter-bootstrapdatepickerbootstrap-4
TomR
TomR

Reputation: 3056

How to place 2 label-input (or datepicker) sets in one row horizontally in React?

I have label-input-label-input set for 2 forms, which I would like to put into one row (e.g. this can be small form for entering start and end date for some report). I am using React 16 and Bootstrap 4.

I have arrived at the code:

 <div className="container-fluid">
    <div className="row">
        <div className="col-lg-12">
            <form className="form-horizontal">
                <div className="form-group">
                    <label htmlFor="test1" className="col-xs-1">From</label>
                    <input
                        disabled
                        type="text"
                        id="test1"
                        className="col-xs-3"
                        />
                    <label htmlFor="test2" className="col-xs-1">To</label>
                    <input
                        disabled
                        type="text"
                        id="test2"
                        className="col-xs-3"
                        />
                </div>
            </form>
        </div>
    </div>

But I'm not sure that this is the right solution because there are no paddings/margins between the labels and inputs. When I am replacing input with React-datepicker https://www.npmjs.com/package/react-datepicker the situation becomes even worse - nothing more is on one line.

What styles should I apply to order my lable-input/datepicker components in the same line? I am not the first one who seeks such answer, is it this such a strange requirement in React world?

I have also added

"reactstrap": "^6.1.0"

to my project.

Upvotes: 0

Views: 1760

Answers (1)

AzaDee
AzaDee

Reputation: 85

To use the col-xs-1 class names, you need to have them in a parent div of class "row"

<div className="container-fluid">
    <div className="row">
        <div className="col-lg-12">
            <form className="form-horizontal">
                <div className="form-group row">
                    <label htmlFor="test1" className="col-xs-1">From</label>
                    <input
                        disabled
                        type="text"
                        id="test1"
                        className="col-xs-3"
                        />
                    <label htmlFor="test2" className="col-xs-1">To</label>
                    <input
                        disabled
                        type="text"
                        id="test2"
                        className="col-xs-3"
                        />
                </div>
            </form>
        </div>
    </div>
</div>

You can also use class mx-(1 - 5) for margins on the left and right sides of the elements

<label htmlFor="test1" className="col-xs-1">From</label>
<input
    disabled
    type="text"
    id="test1"
    className="col-xs-3 mx-1"
    />

This is a very handy resource when trying to figure out layout configurations with bootstrap.

Upvotes: 2

Related Questions