How to Create Smaller `Input` in React-Bootstrap

May 11, 2020 • 4 Minute Read

Introduction

Styling is a crucial aspect of any web or mobile app. You can't always use the default styles provided by Bootstrap or any other library, but you would want to have a consistent and flexible design across different screens. Fortunately, you can override Bootstrap's default styles using custom CSS. Bootstrap also has additional utility classes that you can use to change the look.

One style change you might want to make is to decrease the size of the input to match with the style guide of your client or the component design by the design team. In this guide, you will learn how to decrease the size of an input in React-Bootstrap.

Decreasing Size with Props

React Bootstrap is a React implementation of the Bootstrap library. React Bootstrap has components that can be customized using props.

To decrease the size of an input, you can use the size prop of the Form.Control component.

First, import the Form component from react-bootstrap.

      import React from "react";
import { Container, Form } from "react-bootstrap";

const App = () => {
  return (
    <Container>
      <Form.Control size="sm" name="foo" placeholder="Smaller Input" />
    </Container>
  );
};

export default App;
    

The size="sm" prop will decrease the size of the form input field. Another possible value for the size prop is lg, which will increase the size of the field.

Using Custom CSS

The traditional way of styling is by using CSS classes. You can specify additional CSS classes in the className prop of the Form component.

      import React from "react";
import { Container, Form } from "react-bootstrap";

const App = () => {
  return (
    <Container>
      <Form.Control
        className="smaller-input"
        name="foo"
        placeholder="Smaller Input"
      />
    </Container>
  );
};
    

Now, add a .smaller-input style rule in your CSS file.

      .smaller-input {
  font-size: 12px;
  padding: 2px 5px;
}
    

You can also specify inline style using the style prop. The style takes in an object of style rules. Each key in the object is a camel-cased version of a CSS property.

      import React from "react";
import { Container, Form } from "react-bootstrap";

const App = () => {
  return (
    <Container>
      <Form.Control
        style={{ fontSize: 12, padding: 3 }}
        name="foo"
        placeholder="Smaller Input"
      />
    </Container>
  );
};
    

Using Styled Components

For some developers, writing camel-cased CSS properties might be a little uncomfortable. Generally, developers are used to traditionally writing CSS. That's where styled-components come in the picture.

Styled components allow you to write actual CSS code to style your components. They utilize tagged template literals to map the CSS styles to the component.

Install styled components by running the following npm command.

      npm install --save styled-components

To create a styled component, you need to pass the React component in the styled() method. Inside the tagged literal string, you can write your CSS style rules without camel casing the property names.

      import styled from "styled-components";
import { Container, Form } from "react-bootstrap";

const StyledInput = styled(Form.Control)`
  font-size: 12px;
  padding: 2px 5px;
`;
    

Now you can use this StyledInput component to render an input field.

      import React from "react";
import styled from "styled-components";
import { Container, Form } from "react-bootstrap";

const StyledInput = styled(Form.Control)`
  font-size: 12px;
  padding: 2px 5px;
`;

const App = () => {
  return (
    <Container>
      <StyledInput name="foo" placeholder="Smaller Input" />
    </Container>
  );
};
    

The styled() method will work correctly for any component as long as it attaches the className prop to the DOM element.

Conclusion

In this guide, you learned multiple ways to make a React Bootstrap input smaller in size. As a developer, it's helpful to have an idea of different ways to handle or solve particular problems. This can come handy when troubleshooting issues—you'll always have an alternative solution to go to if the current one fails.