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;