reactstrap#UncontrolledPopover JavaScript Examples

The following examples show how to use reactstrap#UncontrolledPopover. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: SectionJavaScript.js    From Website2020 with MIT License 4 votes vote down vote up
// core components

function SectionJavaScript() {
  const [modal, setModal] = React.useState(false);
  const toggleModal = () => {
    setModal(!modal);
  };
  return (
    <>
      <div className="section javascript-components">
        <Container>
          <div className="title">
            <h2>Javascript Components</h2>
          </div>
          <Row id="modals">
            <Col md="6">
              <div className="title">
                <h3>Modal</h3>
              </div>
              {/* Button trigger modal */}
              <Button
                className="btn-round"
                color="danger"
                outline
                type="button"
                onClick={toggleModal}
              >
                Launch demo modal
              </Button>
              {/* Modal */}
              <Modal isOpen={modal} toggle={toggleModal}>
                <div className="modal-header">
                  <button
                    aria-label="Close"
                    className="close"
                    type="button"
                    onClick={toggleModal}
                  >
                    <span aria-hidden={true}>×</span>
                  </button>
                  <h5
                    className="modal-title text-center"
                    id="exampleModalLabel"
                  >
                    Modal title
                  </h5>
                </div>
                <div className="modal-body">
                  Far far away, behind the word mountains, far from the
                  countries Vokalia and Consonantia, there live the blind texts.
                  Separated they live in Bookmarksgrove right at the coast of
                  the Semantics, a large language ocean. A small river named
                  Duden flows by their place and supplies it with the necessary
                  regelialia. It is a paradisematic country, in which roasted
                  parts of sentences fly into your mouth. Even the all-powerful
                  Pointing has no control about the blind texts it is an almost
                  unorthographic life One day however a small line of blind text
                  by the name of Lorem Ipsum decided to leave for the far World
                  of Grammar.
                </div>
                <div className="modal-footer">
                  <div className="left-side">
                    <Button
                      className="btn-link"
                      color="default"
                      type="button"
                      onClick={toggleModal}
                    >
                      Never mind
                    </Button>
                  </div>
                  <div className="divider" />
                  <div className="right-side">
                    <Button className="btn-link" color="danger" type="button">
                      Delete
                    </Button>
                  </div>
                </div>
              </Modal>
            </Col> 
            <Col md="6">
              <div className="title">
                <h3>Popovers</h3>
              </div>
              <Button
                className="btn-round mr-1"
                color="danger"
                id="tooltip344834141"
                outline
                onClick={e => e.target.focus()}
              >
                On top
              </Button>
              <UncontrolledPopover
                placement="top"
                target="tooltip344834141"
                trigger="focus"
              >
                <PopoverHeader>Popover on top</PopoverHeader>
                <PopoverBody>
                  Here will be some very useful information about this popover.
                </PopoverBody>
              </UncontrolledPopover>
              <Button
                className="btn-round mr-1"
                color="danger"
                id="tooltip493417725"
                outline
                onClick={e => e.target.focus()}
              >
                On bottom
              </Button>
              <UncontrolledPopover
                placement="bottom"
                target="tooltip493417725"
                trigger="focus"
              >
                <PopoverHeader>Popover on bottom</PopoverHeader>
                <PopoverBody>
                  Here will be some very useful information about this popover.
                </PopoverBody>
              </UncontrolledPopover>
              <Button
                className="btn-round mr-1"
                color="danger"
                id="tooltip746845223"
                outline
                onClick={e => e.target.focus()}
              >
                On left
              </Button>
              <UncontrolledPopover
                placement={window.innerWidth < 768 ? "top" : "left"}
                target="tooltip746845223"
                trigger="focus"
              >
                <PopoverHeader>Popover on left</PopoverHeader>
                <PopoverBody>
                  Here will be some very useful information about this popover.
                </PopoverBody>
              </UncontrolledPopover>
              <Button
                className="btn-round"
                color="danger"
                id="tooltip909471006"
                outline
                onClick={e => e.target.focus()}
              >
                On right
              </Button>
              <UncontrolledPopover
                placement={window.innerWidth < 768 ? "top" : "right"}
                target="tooltip909471006"
                trigger="focus"
              >
                <PopoverHeader>Popover on right</PopoverHeader>
                <PopoverBody>
                  Here will be some very useful information about this popover.
                </PopoverBody>
              </UncontrolledPopover>
            </Col>
            <br />
            <Col md="6">
              <div className="title">
                <h3>Datepicker</h3>
              </div>
              <Row>
                <Col sm="6">
                  <FormGroup>
                    <InputGroup className="date" id="datetimepicker">
                      <ReactDatetime
                        inputProps={{
                          placeholder: "Datetime Picker Here"
                        }}
                      />
                      <InputGroupAddon addonType="append">
                        <InputGroupText>
                          <span className="glyphicon glyphicon-calendar">
                            <i aria-hidden={true} className="fa fa-calendar" />
                          </span>
                        </InputGroupText>
                      </InputGroupAddon>
                    </InputGroup>
                  </FormGroup>
                </Col>
              </Row>
            </Col>
            <Col md="6">
              <div className="title">
                <h3>Tooltips</h3>
              </div>
              <Button
                className="btn-round mr-1"
                color="danger"
                id="tooltip392938669"
                outline
              >
                On left
              </Button>
              <UncontrolledTooltip
                delay={0}
                placement="left"
                target="tooltip392938669"
              >
                On left
              </UncontrolledTooltip>
              <Button
                className="btn-round mr-1"
                color="danger"
                id="tooltip354225297"
                outline
              >
                On right
              </Button>
              <UncontrolledTooltip
                delay={0}
                placement="right"
                target="tooltip354225297"
              >
                On right
              </UncontrolledTooltip>
              <Button
                className="btn-round mr-1"
                color="danger"
                id="tooltip739061283"
                outline
              >
                On top
              </Button>
              <UncontrolledTooltip
                delay={0}
                placement="top"
                target="tooltip739061283"
              >
                On top
              </UncontrolledTooltip>
              <Button
                className="btn-round"
                color="danger"
                id="tooltip984013562"
                outline
              >
                On bottom
              </Button>
              <UncontrolledTooltip
                delay={0}
                placement="bottom"
                target="tooltip984013562"
              >
                On bottom
              </UncontrolledTooltip>
            </Col>
          </Row>
          <div className="title">
            <h3>Carousel</h3>
          </div>
        </Container>
      </div>{" "}
    </>
  );
}
Example #2
Source File: index.js    From gobench with Apache License 2.0 4 votes vote down vote up
render() {
    const { popoverOpen } = this.state

    return (
      <div>
        <h5 className="mb-4">
          <strong>Default Popovers</strong>
        </h5>
        <div className="mb-5">
          <Button id="Popover1" type="button" color="primary">
            Launch Popover
          </Button>
          <Popover placement="bottom" isOpen={popoverOpen} target="Popover1" toggle={this.toggle}>
            <PopoverHeader>Popover Title</PopoverHeader>
            <PopoverBody>
              Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem
              lacinia quam venenatis vestibulum.
            </PopoverBody>
          </Popover>
        </div>

        <h5 className="mb-4">
          <strong>Popovers Trigger</strong>
        </h5>

        <div className="mb-5">
          <Button id="PopoverFocus" type="button" color="light">
            Launch Popover (Focus)
          </Button>{' '}
          <Button id="PopoverClick" type="button" color="light">
            Launch Popover (Click)
          </Button>{' '}
          <Button id="PopoverLegacy" type="button" color="light">
            Launch Popover (Legacy)
          </Button>
          <UncontrolledPopover trigger="focus" placement="bottom" target="PopoverFocus">
            <PopoverHeader>Focus Trigger</PopoverHeader>
            <PopoverBody>
              Focusing on the trigging element makes this popover appear. Blurring (clicking away)
              makes it disappear. You cannot select this text as the popover will disappear when you
              try.
            </PopoverBody>
          </UncontrolledPopover>
          <UncontrolledPopover trigger="click" placement="bottom" target="PopoverClick">
            <PopoverHeader>Click Trigger</PopoverHeader>
            <PopoverBody>
              Clicking on the triggering element makes this popover appear. Clicking on it again
              will make it disappear. You can select this text, but clicking away (somewhere other
              than the triggering element) will not dismiss this popover.
            </PopoverBody>
          </UncontrolledPopover>
          <UncontrolledPopover trigger="legacy" placement="bottom" target="PopoverLegacy">
            <PopoverHeader>Legacy Trigger</PopoverHeader>
            <PopoverBody>
              Legacy is a reactstrap special trigger value (outside of bootstraps spec/standard).
              Before reactstrap correctly supported click and focus, it had a hybrid which was very
              useful and has been brought back as trigger=legacy. One advantage of the legacy
              trigger is that it allows the popover text to be selected while also closing when
              clicking outside the triggering element and popover itself.
            </PopoverBody>
          </UncontrolledPopover>
        </div>
      </div>
    )
  }
Example #3
Source File: TooltipPopover.jsx    From nodejs-rest-api-boilerplate with MIT License 4 votes vote down vote up
render() {
    return (
      <>
        <h3 className="h4 text-success font-weight-bold mt-md mb-4">
          Tooltips &amp; Popovers
        </h3>
        <Row>
          <Col lg="6">
            <small className="d-block text-uppercase font-weight-bold mb-3">
              Tooltips
            </small>
            <Button
              className="btn-tooltip"
              color="primary"
              id="tooltip38321129"
              size="sm"
            >
              On left
            </Button>
            <UncontrolledTooltip
              delay={0}
              placement="left"
              target="tooltip38321129"
              trigger="hover focus"
            >
              Tooltip on left
            </UncontrolledTooltip>
            <Button
              className="btn-tooltip"
              color="primary"
              id="tooltip556394744"
              size="sm"
            >
              On top
            </Button>
            <UncontrolledTooltip
              delay={0}
              placement="top"
              target="tooltip556394744"
              trigger="hover focus"
            >
              Tooltip on top
            </UncontrolledTooltip>
            <Button
              className="btn-tooltip"
              color="primary"
              id="tooltip613577679"
              size="sm"
            >
              On bottom
            </Button>
            <UncontrolledTooltip
              delay={0}
              placement="bottom"
              target="tooltip613577679"
              trigger="hover focus"
            >
              Tooltip on bottom
            </UncontrolledTooltip>
            <Button
              className="btn-tooltip"
              color="primary"
              id="tooltip476554683"
              size="sm"
            >
              On right
            </Button>
            <UncontrolledTooltip
              delay={0}
              placement="right"
              target="tooltip476554683"
              trigger="hover focus"
            >
              Tooltip on right
            </UncontrolledTooltip>
          </Col>
          <Col className="mt-4 mt-lg-0" lg="6">
            <small className="d-block text-uppercase font-weight-bold mb-3">
              Popovers
            </small>
            <Button color="default" id="tooltip391311689" size="sm">
              On left
            </Button>
            <UncontrolledPopover
              trigger="focus"
              placement="left"
              target="tooltip391311689"
            >
              <PopoverHeader>Popover On Left</PopoverHeader>
              <PopoverBody>
                Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
              </PopoverBody>
            </UncontrolledPopover>
            <Button color="default" id="tooltip62844899" size="sm">
              On top
            </Button>
            <UncontrolledPopover
              trigger="focus"
              placement="top"
              target="tooltip62844899"
            >
              <PopoverHeader>Popover on Top</PopoverHeader>
              <PopoverBody>
                Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
              </PopoverBody>
            </UncontrolledPopover>
            <Button color="default" id="tooltip969535472" size="sm">
              On right
            </Button>
            <UncontrolledPopover
              trigger="focus"
              placement="right"
              target="tooltip969535472"
            >
              <PopoverHeader>Popover on Right</PopoverHeader>
              <PopoverBody>
                Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
              </PopoverBody>
            </UncontrolledPopover>
            <Button color="default" id="tooltip60850592" size="sm">
              On bottom
            </Button>
            <UncontrolledPopover
              trigger="focus"
              placement="bottom"
              target="tooltip60850592"
            >
              <PopoverHeader>Popover on Bottom</PopoverHeader>
              <PopoverBody>
                Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
              </PopoverBody>
            </UncontrolledPopover>
          </Col>
        </Row>
      </>
    );
  }
Example #4
Source File: UiGeneral.js    From gedge-platform with Apache License 2.0 3 votes vote down vote up
render() {
        return (
            <React.Fragment>
                <div className="page-content">
                    <Container fluid>

                    <Breadcrumbs title="General" breadcrumbItems={this.state.breadcrumbItems} />
                    <Row>
                            <Col lg={12}>
                                <Card>
                                    <CardBody>
                                        <Row>
                                            <Col lg={6}>
                                                <div>
                                                    <h4 className="card-title">Badges</h4>
                                                    <p className="card-title-desc">Add any of the below mentioned modifier classes to change the appearance of a badge.</p>
                                                    <div>
                                                        <Badge color="primary" className="mr-1">Primary</Badge>
                                                        <Badge color="success" className="mr-1">Success</Badge>
                                                        <Badge color="info" className="mr-1">Info</Badge>
                                                        <Badge color="warning" className="mr-1">Warning</Badge>
                                                        <Badge color="danger" className="mr-1">Danger</Badge>
                                                        <Badge color="dark" className="mr-1">Dark</Badge>
                                                    </div>

                                                    <div className="mt-1">
                                                        <Badge className="badge-soft-primary mr-1">Primary</Badge>
                                                        <Badge className="badge-soft-success mr-1">Success</Badge>
                                                        <Badge className="badge-soft-info mr-1">Info</Badge>
                                                        <Badge className="badge-soft-warning mr-1">Warning</Badge>
                                                        <Badge className="badge-soft-danger mr-1">Danger</Badge>
                                                        <Badge className="badge-soft-dark mr-1">Dark</Badge>
                                                    </div>
                                                </div>
                                            </Col>
                                            <Col lg={6}>
                                                <div className="mt-4 mt-lg-0">
                                                    <h4 className="card-title">Pill badges</h4>
                                                    <p className="card-title-desc">Use the <code>.badge-pill</code> modifier class to make
                                                    badges more rounded (with a larger <code>border-radius</code>
                                                    and additional horizontal <code>padding</code>).
                                                    Useful if you miss the badges from v3.</p>
        
                                                    <div>
                                                        <Badge color="primary" pill className="mr-1">Primary</Badge>
                                                        <Badge color="success" pill className="mr-1">Success</Badge>
                                                        <Badge color="info" pill className="mr-1">Info</Badge>
                                                        <Badge color="warning" pill className="mr-1">Warning</Badge>
                                                        <Badge color="danger" pill className="mr-1">Danger</Badge>
                                                        <Badge color="dark" pill className="mr-1">Dark</Badge>
                                                    </div>

                                                    <div className="mt-1">
                                                        <Badge pill className="badge-soft-primary mr-1">Primary</Badge>
                                                        <Badge pill className="badge-soft-success mr-1">Success</Badge>
                                                        <Badge pill className="badge-soft-info mr-1">Info</Badge>
                                                        <Badge pill className="badge-soft-warning mr-1">Warning</Badge>
                                                        <Badge pill className="badge-soft-danger mr-1">Danger</Badge>
                                                        <Badge pill className="badge-soft-dark mr-1">Dark</Badge>
                                                    </div>
                                                </div>
                                            </Col>
                                        </Row>
                                       
                                    </CardBody>
                                </Card>
                                
                            </Col>
                        </Row>
                       
        
                        <Row>
                            <Col lg={6}>
                                <Card>
                                    <CardBody>
        
                                        <h4 className="card-title">Popovers</h4>
                                        <p className="card-title-desc">Add small overlay content, like those found in iOS, to any element for housing secondary information.</p>
        
                                        <div className="button-items">
                                            <Button type="button" color="light" id="Popovertop"  className="waves-effect mr-1" >
                                                Popover on top
                                            </Button>
                                            <Popover placement="top" isOpen={this.state.popovertop} target="Popovertop" toggle={this.toggletop}>
                                                <PopoverHeader>Popover Title</PopoverHeader>
                                                <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
                                            </Popover>
            
                                            <Button type="button"  id="Popoverright"  color="light" className="waves-effect mr-1">
                                                Popover on right
                                            </Button>
                                            <Popover placement="right" isOpen={this.state.popoverright} target="Popoverright" toggle={this.toggleright}>
                                                <PopoverHeader>Popover Title</PopoverHeader>
                                                <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
                                            </Popover>
            
                                            <Button type="button" id="Popoverbottom" color="light" className="waves-effect mr-1">
                                                Popover on bottom
                                            </Button>
                                            <Popover placement="bottom" isOpen={this.state.popoverbottom} target="Popoverbottom" toggle={this.togglebottom}>
                                                <PopoverHeader>Popover Title</PopoverHeader>
                                                <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
                                            </Popover> 
            
                                            <Button type="button"  id="Popoverleft" color="light" className="waves-effect mr-1">
                                                Popover on left
                                            </Button>
                                            <Popover placement="left" isOpen={this.state.popoverleft} target="Popoverleft" toggle={this.toggleleft}>
                                                <PopoverHeader>Popover Title</PopoverHeader>
                                                <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
                                            </Popover>
            
                                            <Button type="button" color="success" id="popover5" className="waves-effect waves-light">Dismissible popover</Button>
                                            <UncontrolledPopover trigger="focus" target="popover5" placement="right">
                                                <PopoverHeader>
                                                    Dismissible popover
                                                </PopoverHeader>
                                                <PopoverBody>
                                                    Vivamus sagittis lacus vel augue laoreet rutrum faucibus
                                                </PopoverBody>
                                            </UncontrolledPopover>
                                        </div>
        
                                    </CardBody>
                                </Card>
        
                            </Col>
        
                            <Col lg={6}>
                                <Card>
                                    <CardBody>
        
                                        <h4 className="card-title">Tooltips</h4>
                                        <p className="card-title-desc">Hover over the links below to see tooltips:</p>
        
                                        <div className="button-items">
                                            <Tooltip placement="top" isOpen={this.state.tttop} target="TooltipTop" toggle={() => this.setState({ tttop: !this.state.tttop })}>Hello world!</Tooltip>
                                            <Tooltip placement="right" isOpen={this.state.ttright} target="TooltipRight" toggle={() => this.setState({ ttright: !this.state.ttright })}>Hello world!</Tooltip>
                                            <Tooltip placement="bottom" isOpen={this.state.ttbottom} target="TooltipBottom" toggle={() => this.setState({ ttbottom: !this.state.ttbottom })}>Hello world!</Tooltip>
                                            <Tooltip placement="left" isOpen={this.state.ttleft} target="TooltipLeft" toggle={() => this.setState({ ttleft: !this.state.ttleft })}>Hello world!</Tooltip>

                                            <Button type="button" color="primary" className="mr-1" id="TooltipTop"> Tooltip on top</Button>
                                            <Button type="button" color="primary" className="mr-1" id="TooltipRight"> Tooltip on Right</Button>
                                            <Button type="button" color="primary" className="mr-1" id="TooltipBottom"> Tooltip on Bottom</Button>
                                            <Button type="button" color="primary" className="mr-1" id="TooltipLeft"> Tooltip on Left</Button>
                                            
                                        </div>
                                        
                                    </CardBody>
                                </Card>
        
                            </Col>
                        </Row>
                       
        
                        <Row>
                            <Col lg={12}>
                                <Card>
                                    <CardBody>
                                        <h4 className="card-title mb-4">Pagination</h4>
        
                                        <Row>
                                            <Col lg={6}>
                                                <h5 className="font-size-14">Default Example</h5>
                                                <p className="card-title-desc">Pagination links indicate a series of related content exists across multiple pages.</p>
        
                                                
                                                    <Pagination aria-label="Page navigation example">
                                                        <PaginationItem><PaginationLink href="#">Previous</PaginationLink></PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">Next</PaginationLink></PaginationItem>
                                                    </Pagination>
                                                
                
                                                
                                                    <Pagination aria-label="Page navigation example">
                                                        <PaginationItem>
                                                            <PaginationLink href="#" previous>
                                                                <i className="mdi mdi-chevron-left"></i>
                                                            </PaginationLink>
                                                        </PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
                                                        <PaginationItem>
                                                            <PaginationLink next>
                                                                <i className="mdi mdi-chevron-right"></i>
                                                            </PaginationLink>
                                                        </PaginationItem>
                                                    </Pagination>
                                                
            
                                            </Col>
        
                                            <Col lg={6}>
                                                <div className="mt-4 mt-lg-0">
                                                    <h5 className="font-size-14">Disabled and active states</h5>
                                                    <p className="card-title-desc">Pagination links are customizable for
                                                            different circumstances. Use <code>.disabled</code> for links that appear
                                                            un-clickable and <code>.active</code> to
                                                            indicate the current page.</p>
                
            
                                                    
                                                        <Pagination aria-label="Page navigation example">
                                                            <PaginationItem disabled>
                                                                <PaginationLink href="#" tabIndex="-1">Previous</PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
                                                            <PaginationItem active>
                                                                <PaginationLink href="#">2 <span className="sr-only">(current)</span></PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
                                                            <PaginationItem>
                                                                <PaginationLink href="#">Next</PaginationLink>
                                                            </PaginationItem>
                                                        </Pagination>
                    
                                                    
                                                        <Pagination aria-label="Page navigation example">
                                                            <PaginationItem disabled>
                                                                <PaginationLink><i className="mdi mdi-chevron-left"></i></PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
                                                            <PaginationItem active>
                                                                <PaginationLink>
                                                                    2
                                                                    <span className="sr-only">(current)</span>
                                                                </PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
                                                            <PaginationItem>
                                                                <PaginationLink href="#"><i className="mdi mdi-chevron-right"></i></PaginationLink>
                                                            </PaginationItem>
                                                        </Pagination>
                                                </div>
                                            </Col>
                                        </Row>
                                       
        
                                        <Row>
                                            <Col lg={6}>
                                                <div className="mt-4">
                                                    <h5 className="font-size-14">Sizing</h5>
                                                    <p className="card-title-desc">Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional
                                                            sizes.</p>
                
                                                    
                                                        <Pagination size="lg" aria-label="Page navigation example">
                                                            <PaginationItem disabled>
                                                                <PaginationLink href="#" tabIndex="-1">Previous</PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
                                                            <PaginationItem>
                                                                <PaginationLink href="#">Next</PaginationLink>
                                                            </PaginationItem>
                                                        </Pagination>
                    
                                                    
                                                        <Pagination size="sm" aria-label="Page navigation example">
                                                            <PaginationItem disabled>
                                                                <PaginationLink href="#" tabIndex="-1">Previous</PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
                                                            <PaginationItem>
                                                                <PaginationLink href="#">Next</PaginationLink>
                                                            </PaginationItem>
                                                        </Pagination>
                                                </div>
                    
                                            </Col>
        
                                            <Col lg={6}>
                                                <div className="mt-4">
                                                    <h5 className="card-title">Alignment</h5>
                                                    <p className="card-title-desc">Change the alignment of pagination
                                                            components with flexbox utilities.</p>
                
                                                    
                                                        <Pagination aria-label="Page navigation example" listClassName="justify-content-center">
                                                            <PaginationItem disabled>
                                                                <PaginationLink href="#" tabIndex="-1">Previous</PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
                                                            <PaginationItem>
                                                                <PaginationLink href="#">Next</PaginationLink>
                                                            </PaginationItem>
                                                        </Pagination>
                    
                                                    
                                                        <Pagination aria-label="Page navigation example" listClassName="justify-content-end">
                                                            <PaginationItem disabled>
                                                                <PaginationLink href="#" tabIndex="-1">Previous</PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
                                                            <PaginationItem>
                                                                <PaginationLink href="#">Next</PaginationLink>
                                                            </PaginationItem>
                                                        </Pagination>
                                                    
                                                </div>
                                            </Col>
                                        </Row>
                                       

                                        <Row className=" mt-4">
                                            <Col lg={6}>
                                                <h5 className="font-size-14">Rounded Example</h5>
                                                <p className="card-title-desc">Add <code>.pagination-rounded</code> for rounded pagination.</p>
        
                                                
                                                    <Pagination aria-label="Page navigation example" className="pagination-rounded">
                                                        <PaginationItem disabled>
                                                            <PaginationLink href="#" tabIndex="-1">Previous</PaginationLink>
                                                        </PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
                                                        <PaginationItem active>
                                                            <PaginationLink href="#">2 <span className="sr-only">(current)</span></PaginationLink>
                                                        </PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
                                                        <PaginationItem>
                                                            <PaginationLink href="#">Next</PaginationLink>
                                                        </PaginationItem>
                                                    </Pagination>
                
                                                
                                                    <Pagination aria-label="Page navigation example" className="pagination-rounded">
                                                        <PaginationItem disabled>
                                                            <span className="page-link"><i className="mdi mdi-chevron-left"></i></span>
                                                        </PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
                                                        <PaginationItem active>
                                                            <span className="page-link">
                                                                2
                                                                <span className="sr-only">(current)</span>
                                                            </span>
                                                        </PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
                                                        <PaginationItem>
                                                            <PaginationLink href="#"><i className="mdi mdi-chevron-right"></i></PaginationLink>
                                                        </PaginationItem>
                                                    </Pagination>
                                            </Col> 
                                        </Row>
                                       
                                    </CardBody>
                                </Card>
                                
                            </Col>
                        </Row>
                       
        
                        <Row>
                            <Col lg={6}>
                                <Card>
                                    <CardBody>
                                        <h4 className="card-title">Border spinner</h4>
                                        <p className="card-title-desc">Use the border spinners for a lightweight loading indicator.</p>
                                        <div>
                                        <Spinner className="mr-2" color="primary" />
                                        <Spinner className="mr-2" color="secondary" />
                                        <Spinner className="mr-2" color="success" />
                                        <Spinner className="mr-2" color="danger" />
                                        <Spinner className="mr-2" color="warning" />
                                        <Spinner className="mr-2" color="info" />
                                        <Spinner className="mr-2" color="light" />
                                        <Spinner className="mr-2" color="dark" />
                                        </div>
        
                                    </CardBody>
                                </Card>
                            </Col>
                            <Col lg={6}>
                                <Card>
                                    <CardBody>
                                        <h4 className="card-title">Growing spinner</h4>
                                        <p className="card-title-desc">If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!</p>
                                        <div>
                                        <Spinner type="grow" className="mr-2" color="primary" />
                                        <Spinner type="grow" className="mr-2" color="secondary" />
                                        <Spinner type="grow" className="mr-2" color="success" />
                                        <Spinner type="grow" className="mr-2" color="danger" />
                                        <Spinner type="grow" className="mr-2" color="warning" />
                                        <Spinner type="grow" className="mr-2" color="info" />
                                        <Spinner type="grow" className="mr-2" color="light" />
                                        <Spinner type="grow" className="mr-2" color="dark" />
                                        </div>
        
                                    </CardBody>
                                </Card>
                            </Col>
                        </Row>
                    </Container>
                </div>
            </React.Fragment >
        );
    }