overflow-hidden in reactstrap

Question

In bootstrap 4 docs, there're overflow-hidden and overflow-auto classes for elements, but in reactstrap if I try this:

<Col xs={3} className="overflow-hidden">
    <Sidebar/>
</Col>

That col does not get overflow: hidden. How to use overflow-{} classes in reactstrap?

UPD: It seems that that class doesn't exist:

Piyush Zalani · Accepted Answer · 2018-12-29 22:09:19Z

2

You can make use of bootstrap classes with reactstrap as follows:

Install following dependencies

npm install --save [email protected]
npm install --save reactstrap

Add the following line in the component where you like to use Bootstrap 4 classes:

import 'bootstrap/dist/css/bootstrap.css';

edited Dec 29, 2018 at 22:09

answered Dec 29, 2018 at 21:46

Piyush Zalani

3,9641 gold badge17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

pomo_mondreganto Over a year ago

It doesn't work, unfortunately. <Col xs={3} className="overflow-hidden"> still has no effect with that import

Piyush Zalani Over a year ago

If you inspect the code you can see that overflow-hidden class with overflow: hidden css is applied to your <div>

Piyush Zalani Over a year ago

@NikitinRoman Do you have bootstrap installed (npm install --save bootstrap) and if yes what is the version of bootstrap, you can find this in your package.json

Piyush Zalani Over a year ago

@NikitinRoman have tried it with "reactstrap": "7.0.0" and "bootstrap": "4.2.1", versions and its working you can have a look on the following fiddle: codesandbox.io/s/43kkrwry6w

pomo_mondreganto Over a year ago

Well, overflow is missing in 4.1.3, as it was added in 4.2.x, so technically the answer would be to update bootstrap to the latest version :)

|

Collectives™ on Stack Overflow

overflow-hidden in reactstrap

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related