Question 290412 in CSS Question posted in
Some basic documentation can be found here.

Css – How can we change the height and width of the close button in react-bootstrap?

<CloseButton className="crossBtn"/>
.crossBtn{
    height:37px;
    width:32px;
}

How can I change the width and height of the close button ? If I write like this it is not changing.

Tags:

2

Answers


  1. 0

    Do you use external css file ? If so, your external is probably called before bootstrap style so its overwriten.

    You can try this :

    import Button from 'react-bootstrap/Button';

function VariantsExample() {
  return (
    <>
      <style type="text/css">
        {`
    .btn-close {
      width: 2em;
      height: 2em;
      border: 1px solid red;
    }
    `}
      </style>

      <CloseButton />
    </>
  );
}

export default VariantsExample;

    Then import your custom button instead of Bootstrap one.

    Login or Signup to reply.
  2. 0

    CloseButton Component internally uses background images.
    so solution is :

    <CloseButton className="crossBtn"/>
.crossBtn{
    width: 32px;
    height: 37px;
    background-size: auto;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search