Updated on 2026-02-20
URL copied to clipboard

React Bootstrap component

Or copy link

React Bootstrap component

Estimated reading: minutes 6 views

6 views
Min read

You can use any react-bootstrap component using the prefix “All “.

Accordion

Use All.Accordion as seen in the screenshot below.

<All.Accordion defaultActiveKey="0">
    {_data?.qa1710764520?.map((__rcd: any, _k: any) => (
    <All.AccordionItem eventKey={_k} key={_k + "qa1710764520" }>
        <All.AccordionHeader> {__rcd?.ques1710764541}</All. AccordionHeader>
            <All.AccordionBody>
                <div dangerouslySetInnerHTML={{ __html: __rcd?.answer1710764538 }}></div>
            </All.AccordionBody>
    </All.AccordionItem>
    ))}
</All.Accordion>

Slider

Use All.Slider for the slide’s wrapper and use All. SliderItem for the slides.
Note: Attributes of the Swiper slider are used in All.Slider & All.SliderItem tag.

<All.Slider
    slidesPerView={1}
    direction="horizontal"
    navigation={true}
>
    {_data?.slider1713012365?.map((__rcd: any, _k: any) => (
        <div key={_k + "slider1713012365"}>
            <All.SliderItem key={_k + "slider1713012365"} >
                <div className="ECom_testimonial ECom_style_1 text-center">
                    <div className="ECom_testimonial_icon">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="icon icon-tabler icon-tabler-blockquote"
                            width="54"
                            height="54"
                            viewBox="0 0 24 24"
                            strokeWidth="2"
                            stroke="currentColor"
                            fill="none"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                        >
                            <path
                                stroke="none"
                                d="M0 0h24v24H0z"
                                fill="none"
                            />
                            <path d="M6 15h15" />
                            <path d="M21 19h-15" />
                            <path d="M15 11h6" />
                            <path d="M21 7h-6" />
                            <path
                                d="M9 9h1a1 1 0 1 1 -1 1v-2.5a2 2 0 0 1 2 -2"
                            />
                            <path
                                d="M3 9h1a1 1 0 1 1 -1 1v-2.5a2 2 0 0 1 2 -2"
                            />
                        </svg>
                    </div>
                    <blockquote
                        className="ECom_testimonial_text ECom_primary_color ECom_fs_29 ECom_medium text_anim"
                    >
                        <div dangerouslySetInnerHTML={{ __html: __rcd?.content1713012414 }}></div>
                    </blockquote>
                    <div className="ECom_testimonial_info">
                        <h3 className="ECom_fs_29 ECom_semibold title-anim">
                            {__rcd?.authorname1713012436}
                        </h3>
                        <p className="title-anim">
                            {__rcd?.authordesignation1713012457}
                        </p>
                    </div>
                </div>
            </All.SliderItem>
        </div>
    ))}
</All.Slider>

Go to top

If you want customization for the structure of the scroll to top button and to make the button work, then you can do that as seen in the screenshot below.
To make the button work you must add the class scroll-to-target. It is an event that will scroll up your page on the click of a button.

<button className="scroll-top scroll-to-target d-inline-block" onClick={All.goToTop} >
    <span className="far fa-angle-double-up"></span>
</button>

Show Go to top

This is an event that will show the “scroll to top” button when the user scrolls down the page and will hide the “scroll to top” button when the user scrolls up the page.

<All.ShowGoToTop></All.ShowGoToTop>
<button className="scroll-top scroll-to-target btn btn-secondary d-none position-fixed" onclick={All.goToTop} >
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-arrow-up"
    viewBox="0 0 16 16">
    <path fillRule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.70713.146 3.147a.5.5 0 0 0 .708-.7081-4-4a.5.5 0 0 e-.
    708 01-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"></path>
    </svg>
</button>

Image Modal

You can use the Image Modal component with “All” prefix if you want to show the image in a full-size popup. You should pass the immg from the loop and also pass the key as the repeater element will require the key.

<div className="single_portfolio_icon">
    {__rcd?.image1712384107?.length > 0 ? __rcd?.image1712384107.map((immg: any, i: any) => (
        <All.ImageModal immg={immg} key={i + "image_modal" }>
            <i className="bi bi-card-image"></i>
        </All.ImageModal>
    )):null}
</div>

Video Modal

You can use the Video Modal component with “All” prefix if you want to show the video in a full-size popup. You should pass the video URL as seen in the screenshot below.

<div className="video-icon style-two">
    <All.VideoModal url={youtubevideolink1712304638}>
        <i className="fa fa-play"></i>
    </All.VideoModal>
</div>

Animation

Use framer motion for animation. Use the motion component with the “All” prefix.

<All.MotionDiv 
    initial={{ opacity: 0.4, x: "100px" }} 
    whileInView={{ opacity: 1, x: "0px" }} 
    transition={{ 
        duration: 0.8,
        ease: "easeOut",
    }}
    viewport={{ once: false }}
    className="about-seven-images rmb-55">
    <Nimage immg={immg} data={data} className="w-100 h-auto object-fit-contain" />
</All.MotionDiv>

Supported motion tags are MotionDiv, MotionSpan, MotionA, MotionH1, MotionH2, MotionH3, MotionH4, MotionH5, MotionH6, MotionP, MotionLink.

CountUp

Use the CountUp component with the prefix “All“,

<All.CountUp className="count-text k-plus" 
             enableScrollSpy
             end={__rcd?.count1710755055 ? __rcd?.count1710755055: 0}
></All.CountUp>

Supported all the attributes from ReactCountUp

CircularProgressBar

Use the CircularProgressBar component with the prefix “All” if you want to use a circular progress bar.

<All.CircularProgressBar
    percentage={__rcd?.percenttext1712558215}
    duration={1000}
    size="0.5rem"
    color="#FF3C00"
/>

Supported all the attributes from the react percentage bar.

Share

Leave a Comment