As @Charlie Lee said, adding a live clock to your website has nothing to do with Bootstrap, you must use JavaScript. And you are not the first to want such a feature! I found this question here on Stack Overflow, with multiple solutions, one of which is this:

Add the following script to your website, preferably at the bottom of the page:

<script type=text/javascript>

    var clockElement = document.getElementById('clock');



    function clock() {

        clockElement.textContent = new Date().toString();

    }



    setInterval(clock, 1000);

</script>

This will update the date and time every second, and display it in the element with the id clock. To change the format of the date and time, take a look at this page, specifically the Date instances section.

After this, add the following element where you want the clock to appear, or add the clock id to an existing element:

<span id=clock></span>

Different date and time formats for different window sizes

This part was added on request of the author of the question.

To use different date and time formats for different window sizes, replace the script code above with this:

<script type=text/javascript>

    var clockElement = document.getElementById('clock');



    function clock() {

        var date = new Date();



        // Replace '400px' below with where you want the format to change.

        if (window.matchMedia('(max-width: 400px)').matches) {

            // Use this format for windows with a width up to the value above.

            clockElement.textContent = date.toLocaleString();

        } else {

            // While this format will be used for larger windows.

            clockElement.textContent = date.toString();

        }

    }



    setInterval(clock, 1000);

</script>

This is a simple and quick solution, that could probably be improved. It checks the window size every second before printing the date and time, to use the correct format even if the user resizes the window without reloading the page.