React-Bootstrap Dropdowns Sizing

React-Bootstrap Dropdowns are used to display content when users click or hover on them. React Bootstrap Dropdown sizing is set to fix the width of Dropdown so that it should be responsive for all screens.

React-Bootstrap Dropdowns Sizing Used classes:

• large: This class is used to create dropdowns with large sizes.
• small: This class is used to create dropdowns with small sizes.

Syntax:

<DropdownType size="value" ...>
    <Dropdown.Item>....</Dropdown.Item>
</DropdownType>

Example 1: In this example, we will create dropdowns with different sizes.

Javascript

// App.js
import Dropdown from "react-bootstrap/Dropdown";
import DropdownButton from "react-bootstrap/DropdownButton";

const App = () => {
    return (
        <div className="App">
            <h1 style={{ color: "green",
                         textAlign: "center",}}>
                {" "} GeeksforGeeks
            </h1>
            <h5 style={{ textAlign: "center",}}>
                React-Bootstrap Dropdowns Sizing
            </h5>
            <br></br>
            <div style={{ textAlign: "center" }}>
                <DropdownButton variant="success"
                                title="Explore"
                                size="lg">
                    <Dropdown.Item> Courses </Dropdown.Item>
                    <Dropdown.Item> Practice </Dropdown.Item>
                    <Dropdown.Item> Offers </Dropdown.Item>
                </DropdownButton>
                <br></br>
                <DropdownButton variant="success"
                                title="Explore"
                                size="sm">
                    <Dropdown.Item> Courses </Dropdown.Item>
                    <Dropdown.Item> Practice </Dropdown.Item>
                    <Dropdown.Item> Offers </Dropdown.Item>
                </DropdownButton>
            </div>
        </div>
)};

export default App;

Output:

Example 2: In this example, we will create dropdowns with different sizes.

Javascript

// App.js
import SplitButton from "react-bootstrap/SplitButton";
import Dropdown from "react-bootstrap/Dropdown";

const App = () => {
    return (
        <div className="App">
            <h1 style={{ color: "green",
                         textAlign: "center", }}>
                {" "} GeeksforGeeks
            </h1>
            <h5
                style={{ textAlign: "center", }}>
                React-Bootstrap Dropdowns Sizing
            </h5>
            <br></br>
            <div style={{ textAlign: "center",}}>
                <SplitButton variant="success"
                             title="Explore(large)"
                             size="lg"
                             className="my-2">
                    <Dropdown.Item> Courses </Dropdown.Item>
                    <Dropdown.Item> Practice </Dropdown.Item>
                    <Dropdown.Item> Offers </Dropdown.Item>
                </SplitButton>
                <br></br>
                <SplitButton variant="success"
                             title="Explore(normal)"
                             className="my-2">
                    <Dropdown.Item> Courses </Dropdown.Item>
                    <Dropdown.Item> Practice </Dropdown.Item>
                    <Dropdown.Item> Offers </Dropdown.Item>
                </SplitButton>
                <br></br>
                <SplitButton variant="success"
                             title="Explore(small)"
                             size="sm"
                             className="my-2">
                    <Dropdown.Item> Courses </Dropdown.Item>
                    <Dropdown.Item> Practice </Dropdown.Item>
                    <Dropdown.Item> Offers </Dropdown.Item>
                </SplitButton>
            </div>
        </div>
)};

export default App;

Output: