CODEWITHSUNDEEP
reactjsbootstrap-4react-bootstrap
bobb1213131
bobb1213131

Reputation: 287

How to make a row responsive using bootstrap in a react-application?

Whenever I make the size smaller, my input type text always goes below when making the screen smaller but my select stays on the same row, how to make it so that the the Select Status and my Input search box text stays in same line when making my screen smaller in web page?

CODE

<div className="row">
          <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 


                  <FormGroup bsSize="large" onChange={this.onChangeSummary.bind(this)} >

                      <div className="selectStatus"> 
                       <div className='col-xs-2 col-md-2 col-lg-2 clearfix' style={{width: 200}}>
                        <Select
                                value={{label: this.state.statusColor}}
                                onChange={this.handleChange}
                                options={optionsStatus}
                                styles={colourStylesLiveOn}



                         /> 
                      </div>
                     </div>
                       <div className='col-xs-10 col-md-10 col-lg-10 clearfix' style={{maxWidth: 1700}}>
                         <FormControl style={{maxWidth:1700}} defaultValue={this.state.summaryLiveOn} onBlur={this.onChangeSummary.bind(this)} type="text" placeholder="Summary information" spellcheck="false"/>
                       </div>
                    </FormGroup>

                  </div>

</div>

How I want it to look when resizing to smaller screen size, it looks like this currently on a full size page below: enter image description here

How it looks like when it is resized to smaller webpage below: enter image description here

Upvotes: 0

Views: 416

Answers (1)

spirift
spirift

Reputation: 3062

Looks like you're overwriting the bootstrap css with a hardcoded width value of 200

<div className='col-xs-2 col-md-2 col-lg-2 clearfix' style={{width: 200}}>

Try removing the style property.

Upvotes: 2

Related Questions