import DropdownButton from
"react-bootstrap/DropdownButton"
;
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 Drop directions
</h5>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<div style={{ textAlign:
"center"
}}>
<DropdownButton
drop=
"up"
variant=
"dark"
title=
"Learn Programming (up)"
className=
" my-2"
>
<Dropdown.Item>C</Dropdown.Item>
<Dropdown.Item>C++</Dropdown.Item>
<Dropdown.Item>Java</Dropdown.Item>
<Dropdown.Item>C
#</Dropdown.Item>
<Dropdown.Item>Javascript</Dropdown.Item>
<Dropdown.Item>Python</Dropdown.Item>
</DropdownButton>
<DropdownButton
drop=
"down"
variant=
"dark"
title=
"Learn Programming (down)"
className=
" my-2"
>
<Dropdown.Item>C</Dropdown.Item>
<Dropdown.Item>C++</Dropdown.Item>
<Dropdown.Item>Java</Dropdown.Item>
<Dropdown.Item>C
#</Dropdown.Item>
<Dropdown.Item>Javascript</Dropdown.Item>
<Dropdown.Item>Python</Dropdown.Item>
</DropdownButton>
<DropdownButton
drop=
"start"
variant=
"dark"
title=
"Learn Programming (start)"
className=
" my-2"
>
<Dropdown.Item>C</Dropdown.Item>
<Dropdown.Item>C++</Dropdown.Item>
<Dropdown.Item>Java</Dropdown.Item>
<Dropdown.Item>C
#</Dropdown.Item>
<Dropdown.Item>Javascript</Dropdown.Item>
<Dropdown.Item>Python</Dropdown.Item>
</DropdownButton>
<DropdownButton
drop=
"end"
variant=
"dark"
title=
"Learn Programming (end)"
className=
" my-2"
>
<Dropdown.Item>C</Dropdown.Item>
<Dropdown.Item>C++</Dropdown.Item>
<Dropdown.Item>Java</Dropdown.Item>
<Dropdown.Item>C
#</Dropdown.Item>
<Dropdown.Item>Javascript</Dropdown.Item>
<Dropdown.Item>Python</Dropdown.Item>
</DropdownButton>
</div>
</div>
);
};
export
default
App;