Bootstrap Cards:

Random Quote Machine in Bootstrap Cards

Do you like quotes from great people? Most people believe that if you want to be successful, you should listen to the words of famous and successful people. In this post, we have provided the Random Quote Machine in Bootstrap Cards with the same purpose. By using this Bootstrap Quote Card, you can know the great people’s words and beliefs. If you like to use this element on your website, this Card with Random Text can be useful.

As you see in this preview, this HTML Card with Color Effect has a colorful theme. The main page is colorful and there is a white page on the colored background. In the middle of the white page, you can see a quote about an important and familiar person. The sentence has the same color as the background. The name of that person is written below in black color. There is a field on the right side of the page with the same color as the text. In this Javascript Random Card Quote, you can see a different color as you click on this field. There are the icons of Facebook and Twitter with the same color on the left side of the page.

Bootstrap Quote Card

Card with Random Text

HTML Card with Color Effect

Javascript Random Card Quote

<!-- This script got from frontendfreecode.com -->
<div id="root">
        </div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital@0;1&family=Roboto:ital,wght@0,500;1,500&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css");
.container {
  height: 100vh;
}

.box {
  background-color: white;
  padding: 2rem;
  max-width: 600px;
  border-radius: 15px;
}
.box h4 {
  font-family: "Roboto", sans-serif;
}
.box p {
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-weight: 500;
}
.btn {
  border: none !important;
}
.btn:focus {
  outline: none !important;
  box-shadow: none !important;
}
.signature p {
  font-family: "Poppins", sans-serif;
  margin: 0;
}

//random quote machine
const quotes = [
  {
    id: 0,
    quote:
      "If you feel like crying you should not hold back your tears. You should let it all out while you still can – because when you get bigger sometimes you can’t cry even if you have something to cry about.",
    author: "Tomoya Okazaki",
  },
  {
    id: 1,
    quote: "You are who you are. You have to do what you can.",
    author: "Tomoya Okazaki",
  },
  {
    id: 2,
    quote:
      "Nothing can stay unchanged. Fun things… Happy things… They can’t possibly remain the same.",
    author: "Nagisa Furukawa",
  },
  {
    id: 3,
    quote:
      "No matter how cold and distant people may become, on the inside something warm and precious always remains, something that never changes. To me, that’s what family is like.",
    author: "Tomoyo Sakagami",
  },
  {
    id: 4,
    quote: "Time and titles do not matter in the bonds between people.",
    author: "Tomoyo Sakagami",
  },
  {
    id: 5,
    quote:
      "Love is like a firework from the past… it’s more beautiful for it to go to pieces and scatter far off.",
    author: "Shima Katsuki",
  },
  {
    id: 6,
    quote:
      "If the results come true, it’s as if there’s only one future. If it fails, we can think that other futures exist… I want to believe that in our future there are many possibilities waiting.",
    author: "Kyou Fujibayashi",
  },
  {
    id: 7,
    quote: "If your life can change once, your life can change again.",
    author: "Sanae Furukawa",
  },
  {
    id: 8,
    quote:
      "If you have time to fantasize about a beautiful end, then just live beautifully 'til the end.",
    author: "Gintoki Sakata",
  },
  {
    id: 9,
    quote: "Honest feelings can sometimes lead to cruel endings.",
    author: "Gintoki Sakata",
  },
  {
    id: 10,
    quote:
      "There's no short-cut to becoming strong. Even if you try to look strong on the outside, that thin layer will soon fall off.",
    author: "Shimura Shinpachi",
  },
  {
    id: 11,
    quote: "Some lies are necessary for giving children dreams.",
    author: "Shimura Tae",
  },
  {
    id: 12,
    quote: "The night is darkest just before dawn. But keep your eyes open.",
    author: "Gintoki Sakata",
  },
  {
    id: 13,
    quote: "If you have faith, your dreams will surely come true.",
    author: "Kotarou Katsura",
  },
  {
    id: 14,
    quote: "You yourself have to change first, or nothing will change for you!",
    author: "Gintoki Sakata",
  },
];

const quoteLeft = "";
const quoteRight = "";
const l = quotes.length;
class RandomQuote extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        let r = this.props.random;
        const rColor = { color: "#" + this.props.randomColor };
        return /*#__PURE__*/(
            React.createElement(React.Fragment, null,
                quotes.map(item => {
                    const { id, quote, author } = item;
                    if (id === r) {
                        return /*#__PURE__*/(
                            React.createElement("div", { key: id }, /*#__PURE__*/
                                React.createElement("h4", { style: rColor, id: "text", quote: this.props.quote }, /*#__PURE__*/
                                    React.createElement("i", null, quoteLeft, " "),
                                    quote, /*#__PURE__*/
                                    React.createElement("i", null, " ", quoteRight, " ")), /*#__PURE__*/
                                React.createElement("p", { className: "text-end", id: "author" }, "- ",
                                    author)));
                    }
                })));
    }
}
class RandomQuoteMachine extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            random: 1,
            randomColor: "b0adc0"
        };
        this.changeQuote = this.changeQuote.bind(this);
    }
    changeQuote() {
        this.setState({
            random: Math.floor(Math.random() * l),
            randomColor: (0x1000000 + Math.random() * 0xffffff).
                toString(16).
                substr(1, 6)
        });
    }
    render() {
        console.log("2: ", this.state.random);
        const rColor = { color: "#" + this.state.randomColor };
        const rBackgroundColor = { backgroundColor: "#" + this.state.randomColor };
        const tweetContent = '#';
        return /*#__PURE__*/(
            React.createElement("div", {
                style: rBackgroundColor,
                className: "container mw-100 d-flex justify-content-center flex-column "
            }, /*#__PURE__*/
                React.createElement("div", {
                    id: "quote-box",
                    className: "row d-flex flex-row box d-flex justify-content-center align-self-center"
                }, /*#__PURE__*/
                    React.createElement("div", { className: "row" }, /*#__PURE__*/
                        React.createElement(RandomQuote, {
                            random: this.state.random,
                            randomColor: this.state.randomColor
                        })), /*#__PURE__*/
                    React.createElement("div", { className: "row" }, /*#__PURE__*/
                        React.createElement("div", { className: "col-6" }, /*#__PURE__*/
                            React.createElement("a", { id: "facebook-quote", href: '#' }, /*#__PURE__*/
                                React.createElement("i", { style: rColor, class: "bi bi-facebook fa-2x mx-1" })), /*#__PURE__*/
                            React.createElement("a", { id: "tweet-quote", href: tweetContent }, /*#__PURE__*/
                                React.createElement("i", { style: rColor, class: "bi bi-twitter fa-2x mx-1" }))), /*#__PURE__*/
                        React.createElement("div", { className: "col-6 justify-content-end d-flex" }, /*#__PURE__*/
                            React.createElement("button", {
                                id: "new-quote",
                                style: rBackgroundColor,
                                className: "btn btn-primary rounded-pill ",
                                onClick: this.changeQuote
                            }, "New quote")))), /*#__PURE__*/
                React.createElement("div", { className: "row signature text-center my-2 text-light" }, /*#__PURE__*/
                    React.createElement("p", null, "By Your Name"))));
    }
}
function App() {
    return /*#__PURE__*/React.createElement(RandomQuoteMachine, null);
}
ReactDOM.render( /*#__PURE__*/
    React.createElement(React.StrictMode, null, /*#__PURE__*/
        React.createElement(App, null)),
    document.getElementById('root'));

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-is/17.0.2/umd/react-is.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css'></script>
<script src='https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-is/17.0.2/umd/react-is.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css'></script>
<script src='https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js'></script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital@0;1&family=Roboto:ital,wght@0,500;1,500&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css");
.container {
  height: 100vh;
}

.box {
  background-color: white;
  padding: 2rem;
  max-width: 600px;
  border-radius: 15px;
}
.box h4 {
  font-family: "Roboto", sans-serif;
}
.box p {
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-weight: 500;
}
.btn {
  border: none !important;
}
.btn:focus {
  outline: none !important;
  box-shadow: none !important;
}
.signature p {
  font-family: "Poppins", sans-serif;
  margin: 0;
}
</style>

</head>
<body>
<div id="root">
        </div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
//random quote machine
const quotes = [
  {
    id: 0,
    quote:
      "If you feel like crying you should not hold back your tears. You should let it all out while you still can – because when you get bigger sometimes you can’t cry even if you have something to cry about.",
    author: "Tomoya Okazaki",
  },
  {
    id: 1,
    quote: "You are who you are. You have to do what you can.",
    author: "Tomoya Okazaki",
  },
  {
    id: 2,
    quote:
      "Nothing can stay unchanged. Fun things… Happy things… They can’t possibly remain the same.",
    author: "Nagisa Furukawa",
  },
  {
    id: 3,
    quote:
      "No matter how cold and distant people may become, on the inside something warm and precious always remains, something that never changes. To me, that’s what family is like.",
    author: "Tomoyo Sakagami",
  },
  {
    id: 4,
    quote: "Time and titles do not matter in the bonds between people.",
    author: "Tomoyo Sakagami",
  },
  {
    id: 5,
    quote:
      "Love is like a firework from the past… it’s more beautiful for it to go to pieces and scatter far off.",
    author: "Shima Katsuki",
  },
  {
    id: 6,
    quote:
      "If the results come true, it’s as if there’s only one future. If it fails, we can think that other futures exist… I want to believe that in our future there are many possibilities waiting.",
    author: "Kyou Fujibayashi",
  },
  {
    id: 7,
    quote: "If your life can change once, your life can change again.",
    author: "Sanae Furukawa",
  },
  {
    id: 8,
    quote:
      "If you have time to fantasize about a beautiful end, then just live beautifully 'til the end.",
    author: "Gintoki Sakata",
  },
  {
    id: 9,
    quote: "Honest feelings can sometimes lead to cruel endings.",
    author: "Gintoki Sakata",
  },
  {
    id: 10,
    quote:
      "There's no short-cut to becoming strong. Even if you try to look strong on the outside, that thin layer will soon fall off.",
    author: "Shimura Shinpachi",
  },
  {
    id: 11,
    quote: "Some lies are necessary for giving children dreams.",
    author: "Shimura Tae",
  },
  {
    id: 12,
    quote: "The night is darkest just before dawn. But keep your eyes open.",
    author: "Gintoki Sakata",
  },
  {
    id: 13,
    quote: "If you have faith, your dreams will surely come true.",
    author: "Kotarou Katsura",
  },
  {
    id: 14,
    quote: "You yourself have to change first, or nothing will change for you!",
    author: "Gintoki Sakata",
  },
];

const quoteLeft = "";
const quoteRight = "";
const l = quotes.length;
class RandomQuote extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        let r = this.props.random;
        const rColor = { color: "#" + this.props.randomColor };
        return /*#__PURE__*/(
            React.createElement(React.Fragment, null,
                quotes.map(item => {
                    const { id, quote, author } = item;
                    if (id === r) {
                        return /*#__PURE__*/(
                            React.createElement("div", { key: id }, /*#__PURE__*/
                                React.createElement("h4", { style: rColor, id: "text", quote: this.props.quote }, /*#__PURE__*/
                                    React.createElement("i", null, quoteLeft, " "),
                                    quote, /*#__PURE__*/
                                    React.createElement("i", null, " ", quoteRight, " ")), /*#__PURE__*/
                                React.createElement("p", { className: "text-end", id: "author" }, "- ",
                                    author)));
                    }
                })));
    }
}
class RandomQuoteMachine extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            random: 1,
            randomColor: "b0adc0"
        };
        this.changeQuote = this.changeQuote.bind(this);
    }
    changeQuote() {
        this.setState({
            random: Math.floor(Math.random() * l),
            randomColor: (0x1000000 + Math.random() * 0xffffff).
                toString(16).
                substr(1, 6)
        });
    }
    render() {
        console.log("2: ", this.state.random);
        const rColor = { color: "#" + this.state.randomColor };
        const rBackgroundColor = { backgroundColor: "#" + this.state.randomColor };
        const tweetContent = '#';
        return /*#__PURE__*/(
            React.createElement("div", {
                style: rBackgroundColor,
                className: "container mw-100 d-flex justify-content-center flex-column "
            }, /*#__PURE__*/
                React.createElement("div", {
                    id: "quote-box",
                    className: "row d-flex flex-row box d-flex justify-content-center align-self-center"
                }, /*#__PURE__*/
                    React.createElement("div", { className: "row" }, /*#__PURE__*/
                        React.createElement(RandomQuote, {
                            random: this.state.random,
                            randomColor: this.state.randomColor
                        })), /*#__PURE__*/
                    React.createElement("div", { className: "row" }, /*#__PURE__*/
                        React.createElement("div", { className: "col-6" }, /*#__PURE__*/
                            React.createElement("a", { id: "facebook-quote", href: '#' }, /*#__PURE__*/
                                React.createElement("i", { style: rColor, class: "bi bi-facebook fa-2x mx-1" })), /*#__PURE__*/
                            React.createElement("a", { id: "tweet-quote", href: tweetContent }, /*#__PURE__*/
                                React.createElement("i", { style: rColor, class: "bi bi-twitter fa-2x mx-1" }))), /*#__PURE__*/
                        React.createElement("div", { className: "col-6 justify-content-end d-flex" }, /*#__PURE__*/
                            React.createElement("button", {
                                id: "new-quote",
                                style: rBackgroundColor,
                                className: "btn btn-primary rounded-pill ",
                                onClick: this.changeQuote
                            }, "New quote")))), /*#__PURE__*/
                React.createElement("div", { className: "row signature text-center my-2 text-light" }, /*#__PURE__*/
                    React.createElement("p", null, "By Your Name"))));
    }
}
function App() {
    return /*#__PURE__*/React.createElement(RandomQuoteMachine, null);
}
ReactDOM.render( /*#__PURE__*/
    React.createElement(React.StrictMode, null, /*#__PURE__*/
        React.createElement(App, null)),
    document.getElementById('root'));
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS