CODEWITHSUNDEEP
buttonreact-bootstrappopover
monochromaticmau
monochromaticmau

Reputation: 85

React Bootstrap <Button > Component Circular

There is a question just like this, but the answer wasn't very clear and I don't have enough "points" to comment on it.

I read https://react-bootstrap.github.io/components/buttons/ and some other documents but am unable to find my answer.

I used this article as my guide: https://www.pluralsight.com/guides/how-to-position-react-bootstrap-popover

import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
    
    .
    .
    .

render() {
  const popover = (
    <Popover id="popover-basic">
      <Popover.Title as="h3">Popover title</Popover.Title>
      <Popover.Content>
        Popover content <strong>some strong content</strong> Normal content again
      </Popover.Content>
    </Popover>
  );
  return (
    <div className='toggle container '>
      <div className='form-row justify-content-center'>
        <div className='col-6'>
        <section class='inline-block'>
          <span class="badge badge-pill badge-primary ml-2">1</span>
          <h3>
          Choose System Type:
          </h3>
          <div id="element1">
          <OverlayTrigger trigger="hover" placement="right" overlay={popover}>
            <Button variant="outline-primary" circle><i class="fas fa-question"></i></Button>
         </OverlayTrigger>



              
          </div>
        </section>

      </div>
    </div>
  </div>

I'd like my popover button to be a circle, but I can't find documentation on how to do that.

Can someone explicitly help me using the ? Perhaps something else? Examples help immensely. Here is a screenshot of what it looks like now... enter image description here

Upvotes: 0

Views: 7642

Answers (1)

Sanja Panic
Sanja Panic

Reputation: 31

You can set className="rounded-circle" to your button component and it will be circle. More about similar border classes: Bootstrap documentation

Upvotes: 3

Related Questions