Bootstrap Backgrounds and Buttons | Coding Practice

-

Bootstrap Backgrounds and Buttons

The goal of this coding practice is to quickly get you off the ground with Bootstrap Backgrounds and Buttons.

Use the below reference image.

CSS Font families used:

  • Roboto

HTML Code:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>

<body>
    <div>
        <h1 class="text-dark">Bootstrap backgrounds and buttons</h1>
        <p class="bg-info text-white">Info paragraph</p>
        <p class="bg-warning text-dark">Warning paragraph</p>
        <button class="btn btn-primary text-white">Get Started</button>
        <button class="btn btn-secondary text-white">Get Started</button>
        <button class="btn btn-outline-success">Get Started</button>
        <button class="btn btn-outline-danger">Get Started</button>

    </div>
</body>
 

</html> 

Comments

Post a Comment

Popular posts from this blog

CODING ASSIGNMENT 4

-
Image
  Articles Page In this assignment, let's build a Articles Page by applying the concepts we learned till now. You can use the Bootstrap concepts and CCBP UI Kit as well. Refer to the below images. Articles Page Note When clicked on each category card, the page should display the List of Topics. Try to achieve the design as close as possible. Resources Use the image URLs given below. Categories Icons Images https://assets.ccbp.in/frontend/static-website/articles-technology-icon-img.png https://assets.ccbp.in/frontend/static-website/articles-science-icon-img.png https://assets.ccbp.in/frontend/static-website/articles-healthcare-icon-img.png https://assets.ccbp.in/frontend/static-website/articles-business-icon-img.png Carousel Images (Technology) https://assets.ccbp.in/frontend/static-website/articles-technology-c1-img.png https://assets.ccbp.in/frontend/static-website/articles-technology-c2-img.png https://assets.ccbp.in/frontend/static-website/articles-technology-c3-img.png Carousel...
Read more

CODING PRACTICE 11 Music Page

-
Image
  Music Page In this assignment, let's build a Music Page by applying the concepts we learned till now. You can use the Bootstrap concepts and CCBP UI Kit as well. Refer to the below images. Music Home Page: Music Details Page: Note : When clicked on the Get Started button on the Music Home Page, it must display the Music Details Page. Try to achieve the design as close as possible. Resources Use the image URLs given below. Music Home Page: https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/moon-bg.png https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/moon-stars-bg.png Music Details Page: https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/clouds-img.png https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/moon-clouds-img.png https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/sweet-sleep-img.png CSS Colors used: Background color Hex Code values: Text color Hex Code values: CSS Font families used: Bree Serif Concepts Review Want to quickly review so...
Read more

CCBP Static Website Coding Assignment 2 Solution | Yoga Page

-
Image
 ccbp CCBP Static Website Coding Assignment 2 Solution | Yoga Page Hi CCBP Learners, I have added my code for the Yoga Page here in this post to help you in solving your assignment question. In this assignment, we have to build a Yoga page by applying the concepts we learned till now. We can use the Bootstrap concepts and CCBP UI Kit as well. HTM <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" /> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity=...
Read more