Components

Card

Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link 

import * as React from "react";
import { withNamespaces } from 'react-i18next';
import { Card, Row, Col, Button} from 'react-bootstrap';
class Defaultcards extends React.Component {
    render() {
        return (
            <Card>
                <Card.Img variant="top" src="/assets/images/card-header.jpg" >
                </Card.Img>
                <Card.Body>
                    <Card.Title>
                        Card Title
                    </Card.Title>
                    <Card.Text>
                        Some quick example text to build on the card
                    </Card.Text>
                    <Button className="primaryBg border primayBorder no-radius-btn mb-3">
                        Button
                    </Button>
                </Card.Body>
            </Card> 
            );
        }
    }
    export default Defaultcards()(Defaultcards);

Button


<button type="button" className="btn mr-2 circle-btns border mb-2">Default</button>
<button type="button" className="btn mr-2  circle-btns primaryBg mb-2">Primary</button>
<button type="button" className="btn btn-secondary mr-2 circle-btns mb-2">Secondary</button>
<button type="button" className="btn btn-success mr-2 circle-btns mb-2">Success</button>
<button type="button" className="btn btn-info mr-2 circle-btns mb-2">Info</button>
<button type="button" className="btn btn-warning mr-2 circle-btns text-white mb-2">Warning</button>
<button type="button" className="btn btn-danger mr-2 circle-btns mb-2">Danger</button>
<button type="button" className="btn btn-dark mr-2 circle-btns mb-2">Dark</button>
<button type="button" className="btn btn-light mr-2 circle-btns mb-2">Light</button>

Button Dropdown

Action Another action Something else here 

<Card>
    <Card.Header className="bg-warning border border-warning text-white">
        Regular Dropdowns
    </Card.Header>
    <Card.Body>
        <Dropdown className="d-inline-block mr-2 mb-2">
            <Dropdown.Toggle id="dropdown-basic" className="no-radius-btn border text-dark bg-transparent">
                Button Dropdown 
            </Dropdown.Toggle>
            <Dropdown.Menu>
                <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
                <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
                <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
        <Dropdown className="d-inline-block mr-2 mb-2">
            <Dropdown.Toggle id="dropdown-basic" className="no-radius-btn border primaryBg">
             Dropdown Button
            </Dropdown.Toggle>
            <Dropdown.Menu>
                <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
                <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
                <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
    </Card.Body>
</Card>
# Progressbars 

<Card>
    <Card.Header className="bg-success border border-success text-white">
    Contextual Progressbars
    </Card.Header>
    <Card.Body>
        <ProgressBar now={65} className="mb-3 text-blue-theme no-radius-btn"/>
        <ProgressBar variant="success" now={25} className="mb-3 no-radius-btn"/>
        <ProgressBar variant="info" now={50} className="mb-3 no-radius-btn"/>
        <ProgressBar variant="warning" now={75} className="mb-3 no-radius-btn"/>
        <ProgressBar variant="danger" now={100} className="mb-3 no-radius-btn"/>
    </Card.Body>
</Card>
# Pagination 

<Card>
    <Card.Header className="bg-info border border-info text-white">
        Pagination
    </Card.Header>
    <Card.Body>
        <Pagination className="custom-pagination">
        <Pagination.First />
        <Pagination.Prev />
        <Pagination.Item>{1}</Pagination.Item>
        <Pagination.Item active>{2}</Pagination.Item>
        <Pagination.Item>{3}</Pagination.Item>
        <Pagination.Item >{4}</Pagination.Item>
        <Pagination.Next />
        <Pagination.Last />
        </Pagination>
    </Card.Body>
</Card>
/code>

Bootstrap Table

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected] 

<Card>
    <Card.Header className="card-header bg-light-blue border border-light-blue text-white">
        Striped Table
    </Card.Header>
    <Card.Body>
        <Table striped>
            <thead>
                <tr>
                    <th>....</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>......</td>
                </tr>
            </tbody>
        </Table>
    </Card.Body>
</Card>
# Default Form
We'll never share your email with anyone else. 

    <Card>
        <Card.Header className="card-header primaryBg primaryBorder text-white">
            Default Form
        </Card.Header>
        <Card.Body>
            <Form>
                <Form.Group controlId="formBasicEmail">
                    <Form.Label className="font-weight-bold">Email address</Form.Label>
                    <Form.Control type="email" placeholder="Enter email" />
                </Form.Group>
                <Form.Group controlId="formBasicPassword">
                    <Form.Label className="font-weight-bold">Password</Form.Label>
                    <Form.Control type="password" placeholder="Password" />
                </Form.Group>
                <Form.Group controlId="formBasicChecbox">
                    <Form.Check type="checkbox" label="Remember me" className="font-weight-bold"/>
                </Form.Group>
                <Button variant="primary" type="submit" className="bg-transparent text-dark sqr-btn">
                    Sign in
                </Button>
            </Form>
        </Card.Body>
    </Card>

Inline Underline Form

    
        <Form className="form-inline form-underline">
            <Form.Group controlId="formBasicName">
                <Form.Label className="font-weight-bold pr-1">Name </Form.Label>
                <Form.Control type="text" placeholder="Jane Doe" className="input-underlined"/>
            </Form.Group>
            <Form.Group controlId="formBasicEmail" className="pl-2">
                <Form.Label className="font-weight-bold pr-1">Email </Form.Label>
                <Form.Control type="email" placeholder="[email protected]" className="input-underlined" />
            </Form.Group>
            <Button variant="primary" type="submit" className="bg-transparent text-dark sqr-btn ml-2">
                Sign in
            </Button>
        </Form>

Pie Chart


 <PieChart>
     <Pie
        data={data}
        cx="50%"
        cy="50%"
        labelLine={false}
        label={renderCustomizedLabel}
        outerRadius={120}
        fill="#8884d8"
    >
        {
            data.map((entry, index) =>  <Cell key={index} fill={COLORS[index % COLORS.length]} />)
        }
     </Pie>
 </PieChart>

Bar Chart

Calendar


import React, { Component, PropTypes } from 'react';
import FullCalendar from 'rc-calendar/lib/FullCalendar';
const title = 'Calendar';
const now = moment();

const defaultCalendarValue = now.clone();
defaultCalendarValue.add(-1, 'month');

class Calendar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: 'month',
    };
    this.onTypeChange = this.onTypeChange.bind(this);
  }
  onTypeChange(type) {
    this.setState({
      type,
    });
  }
  render() {
      return (
      <div className="conatiner">
      <FullCalendar
          Select={Select}
          fullscreen
          defaultValue={now}
        />
        </div>
    );
  }
}
export default withNamespaces()(Calendar);
# List Group
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

<ListGroup>
<ListGroup.Item className="no-radius-btn">Cras justo odio</ListGroup.Item>
<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
<ListGroup.Item>Morbi leo risus</ListGroup.Item>
<ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
<ListGroup.Item>Vestibulum at eros</ListGroup.Item>
</ListGroup>
# Lables
Primary Secondary Success Danger Warning Info Light Dark 

<span className="badge bg-light border no-radius-btn p-1 mr-1">Default</span>
<span className="badge primaryBg no-radius-btn p-1 mr-1">Primary</span>
<span className="badge badge-secondary no-radius-btn p-1 mr-1">Secondary</span>
<span className="badge badge-success no-radius-btn p-1 mr-1">Success</span>
<span className="badge badge-danger no-radius-btn p-1 mr-1">Danger</span>
<span className="badge badge-warning no-radius-btn p-1 mr-1">Warning</span>
<span className="badge badge-info no-radius-btn p-1 mr-1">Info</span>
<span className="badge badge-light no-radius-btn p-1 mr-1">Light</span>
<span className="badge badge-dark no-radius-btn p-1 mr-1">Dark</span>
# Tooltips 

<Card>
    <Card.Header className="bg-warning text-white">
        Tooltips
    </Card.Header>
    <Card.Body>
        <ButtonToolbar>
            {['top', 'right', 'bottom', 'left'].map(placement => (
                <OverlayTrigger
                key={placement}
                placement={placement}
                overlay={
                <Tooltip id={`tooltip-${placement}`}>
                Tooltip on <strong>{placement}</strong>.
                </Tooltip>
                }
                >
                    <Button className="primaryBg mr-2 border-0 no-radius-btn mb-2">Tooltip on {placement}</Button>
                </OverlayTrigger>
            ))}
        </ButtonToolbar> 
    </Card.Body>
</Card>

Popovers


<Card>
    <Card.Header className="bg-danger text-white">
        Popovers
    </Card.Header>
    <Card.Body>
        <ButtonToolbar>
            {['top', 'right', 'bottom', 'left'].map(placement => (
            <OverlayTrigger
            trigger="click"
            key={placement}
            placement={placement}
            overlay={
                    <Popover
                    id={`popover-positioned-${placement}`}
                    title={`Popover ${placement}`}
                    >
                    <strong>Holy guacamole!</strong> Check this info.
                    </Popover>
                }
                >
                    <Button className="bg-transparent border mr-2 text-dark no-radius-btn mb-2">Popover on {placement}</Button>
            </OverlayTrigger>
            ))}
        </ButtonToolbar>
    </Card.Body>
</Card>

results matching ""

    No results matching ""