How do I resize the width of <Input> element in Reactstrap?

Question

I want to make a input element width shorter using Reactstrap, how do I do it?

I've tried setting bsSize to small and it still doesn't work

    <InputGroup>
      <Input
        type="text"
        name="searchTxt"
        value={props.searchText}
        onChange={props.updateSearchText}
        placeholder="Type keyword here..."
        size="md"
        bsSize="small"
      ></Input>
      <Button
        color="secondary"
        onClick={() => props.getSearchResult(props.searchText)}
      >
        <MdSearch />
      </Button>
    </InputGroup>

This takes all the remaining space in Navbar, I wanted it just to take small amount of space.

Answer 1

ReactStrap uses Bootstrap 4. So I think you can just use the inherent width utilities such as w-25 , w-50 , or w-75 .

Example of Bootstrap 4 width utilities

If that doesn't do the exact width that you like, you could always use either a custom CSS class to specify the width, or better yet place your Input inside the Bootstrap grid using Rows and Columns.

Examples of using the Row and Col classes

Answer 2

First Import

import {Button, Form, FormGroup, Label, Input, FormText, Col, Row, Card, CardBody, Table, CardHeader,
InputGroup, InputGroupAddon, InputGroupText,} from 'reactstrap';

Add row to Tag FormGroup example

  <FormGroup row>
     <Col sm={2}></Col>
         <Col sm={8}>
               <InputGroup>
                   <Input type="select" name="select" id="selected">
                       <option>1. เลขที่บัตรประชาชน</option>
                       <option>2. ชื่อ</option>
                       <option>3. นามสกุล</option>
                       <option>4. ที่อยู่</option>
                       <option>5. คนที่ยังไม่จ่ายเงิน</option>
                   </Input>
                   <InputGroupAddon addonType="append">
                       <InputGroupText>@เลือกสิ่งที่จะค้นหา</InputGroupText>
                   </InputGroupAddon>
               </InputGroup>
         </Col>
     <Col sm={2}></Col>
  </FormGroup>

And this result