Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including material-ui-bootstrap with all npm packages installed. Try it out:

require("@material-ui/core/package.json"); // @material-ui/core is a peer dependency. require("@material-ui/icons/package.json"); // @material-ui/icons is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var materialUiBootstrap = require("material-ui-bootstrap")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

material-ui-bootstrap v1.0.15

material-ui-bootstrap

npm version Build Status

If you prefer the Material UI api but also like Bootstrap's clean buttons and useful color variants then this package is here for you. It wraps material-ui's <Button> and <Card> and <Typography> components and adds a new component <Alert>. Inspired by https://react-bootstrap.github.io.

DEMO HERE

Install

# npm
npm i material-ui-bootstrap

Button

Drop this in place of the material-ui Button. You may use the following color props: primary, secondary, success, danger, warning, info, light, dark.

import React from "react"
import { Button } from "material-ui-bootstrap"

export default function App() {
  return (
    <Button color="success" variant="contained">
      Success
    </Button>
  )
}

Alert

import React from "react"
import { Alert } from "material-ui-bootstrap"

export default function App() {
  return (
    <Alert color="danger">
      <Alert.Heading>Heading</Alert.Heading>
      Alert danger
    </Alert>
  )
}

Typography

import React from "react"
import { Typography } from "material-ui-bootstrap"

export default function TypographyExample() {
  return <Typography color="success">Example</Typography>
}

Card

import React from "react"
import Card, { CardContent, CardHeader, CardTitle } from "material-ui-bootstrap"

export default function CardExample() {
  return (
    <Card color="success">
      <CardHeader>CardHeader</CardHeader>
      <CardContent>
        <CardTitle>Title</CardTitle>
        Example card content.
      </CardContent>
    </Card>
  )
}
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free