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:
You can make use of bootstrap classes with reactstrap as follows:
Install following dependencies
npm install --save bootstrap#4.2.1
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';
Related
I am playing around with Tailwind and Next.js, but I am having trouble figuring out if it's installed or not. Even when I go to https://play.tailwindcss.com/ and try the following HTML element styled with Tailwind.
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
It doesn't render it underlined or even an h1 element. I follow the instructions at https://tailwindcss.com/docs/guides/nextjs verbatim. Any ideas?
The reason it's not working for you is that you are using className instead of class.
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
Using NPM, you can see if a specific package is installed.
npm view tailwindcss version
Or
npm info tailwindcss version
If you're using NPX, you can do the following.
npx gvi tailwindcss
I have a project created with Laravel 8, Jetstream, I've installed Tailwind CSS and fontawesome-free too.
When I use this classes like that:
<i class="fa fa-user-circle text-white cursor-pointer text-6xl"></i>
text-white and cursor-pointer works perfectly but "text-6xl" don't
if I use style="font-size: 60px" this works, but the class of Tailwind don't
The issue is that using laravel 8 with scss, but the output for your tailwind is css, try changing it and it should work.
Run npm run dev
Not all of tailwind css classes will be available unless you build dev assets.
You can also npm run dev watch to watch the files and recompile when one of them changes.
I've recently installed Tailwind for my Vue project. It took some time to get it work but finally, it worked, even with code completion in VS Code.
The problem I am facing right now is that I cannot use the breakpoints anywhere in my project.
<div class="container mx-auto">
<div class="card w-full sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/3">
// Content
</div>
</div>
Watch a gif of it.
What I want to achieve is to have the div be 1/3 when on desktop, full width on mobile. What I am getting is full width everywhere. I can't seem to find anything else like this on the internet either.
I'd like to mention that I am using VueJS, if that's of any help. Any ideas?
Thanks in advance.
Eventually found the solution after a break and finding a Vue project that uses Tailwind. I needed to install postcss-preset-env and add it to postcss.config.js.
npm install postcss-preset-env --save-dev
postcss.config.js
module.exports = {
plugins: [
require('postcss-preset-env')({ stage: 0 }),
require('tailwindcss')('tailwind.js'),
require('autoprefixer')
]
}
I want to add this grid in my angular 4 project. I have installed these grid using
npm install #material/layout-grid
this command but now I am not able to import in my angular 4 project. My code is something like this
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell">One</div>
<div class="mdc-layout-grid__cell">Two</div>
<div class="mdc-layout-grid__cell">Three</div>
</div>
</div>
But my div are not aligning properly. Please see below image.
I am getting a result like this. What should I do to aligning div horizontally using this Layout Grid? Please help.
Probably you don't have imported css and js files to your angular project. Look on .angular-cli.json file, there should be something like that:
"styles": [
"../node_modules/path-to-your-module-css", // add this line
"styles.css"
],
Or you can also import that directly to your component css:
#import "../node_modules/path-to-your-module-css";
In my app.js:
[import React, {PropTypes} from 'react';
import { Navbar, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
const TopHeader = (props) => {
return(
<div>
<Navbar color="faded" light>
<NavbarBrand href="/">reactstrap</NavbarBrand>
<Nav className="pull-xs-right" navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
</NavItem>
</Nav>
</Navbar>
</div>
);
}][1]
It renders the elements but without any CSS. I have tried this in firefox and chrom.When I go to inspect element, there aren't any CSS classes. I don't have any custom CSS either. What could be the reason for plain HTML elements getting rendered without any CSS?
Edit:
As suggested, I added :
import 'grommet/scss/vanilla/index';
for gommet components in my js file.
and get this error:
gommet scss file import error snapshot
Edit:
ERROR in ./~/css-loader!./~/sass-loader!./~/grommet/scss/vanilla/index.scss
Module build failed:
#import "inuit-defaults/settings.defaults";
^
File to import not found or unreadable: inuit-defaults/settings.defaults
Parent style sheet: /home/simran/webocity_POS_react/node_modules/grommet/scss/grommet-core/_settings.scss
in /home/simran/webocity_POS_react/node_modules/grommet/scss/grommet-core/_settings.scss (line 2, column 1)
# ./~/grommet/scss/vanilla/index.scss 4:14-102 13:2-17:4 14:20-108
Looking at the source code of Reactstrap, Reactstrap is just a thin layer of abstraction over Bootstrap 4 elements that helps you render markup that conforms to Bootstrap 4 class names and styles. It does not include any CSS by default.
You will have to include Bootstrap 4 CSS on your own either by installing Bootstrap 4's npm package or using their CDN-hosted CSS.
If you are using Webpack for your project, you can refer to my example on the version to install and the importing instructions in this repository: https://github.com/yangshun/react-redux-starter/blob/master/package.json#L46
The library you are using only provides the components themselves, it doesn't import the bootstrap css library for you. You would need to include bootstrap 4 css stylesheet.
If you have an index.html you can just add this in the head of the document.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">