I designed a simple webpage using bootstrap4, but whatever I try I couldn't make it responsive. Can anyone help me?

Question

I am just still a novice in web development fundamentals. Following are my JavaScript, CSS and HTML codes. I tried to use bootstrap 4 to make my page responsive, but I couldn't minimize my content to different devices using the d-flex(I have attached an image for reference too). Can anyone point out where am I going wrong? My page is about generating a background using the linear-gradient property of CSS along with a random color combination generator button. I used 3 color inputs for background(2) and font-text(1).

 var css = document.querySelector("h3"); var color1 = document.querySelector(".color1"); var color2 = document.querySelector(".color2"); var body = document.getElementById("gradient"); var textColor = document.querySelector(".textcolor"); var randomColorGenerator = document.getElementById("randomgen"); setGradient(); function setTextColor() { body.style.color = textColor.value; } function setGradient() { body.style.background = "linear-gradient(to right, " + color1.value + ", " + color2.value + ")"; body.style.backgroundAttachment = "fixed"; css.textContent = body.style.background + ";"; } function randomColor() { var hex = "#" + Math.floor(Math.random()*16777216).toString(16); return hex } function generateRandomColorButton() { color1.value = randomColor(); color2.value = randomColor(); setGradient(); } color1.addEventListener("input", setGradient); color2.addEventListener("input", setGradient); textColor.addEventListener("input", setTextColor); randomColorGenerator.addEventListener("click", generateRandomColorButton);

 body { width: 100%; height: 100%; min-height: 100%; background: linear-gradient(to right, red, yellow); background-attachment: fixed; } h1 { font: 600 3.5em 'Raleway', sans-serif; text-transform: uppercase; letter-spacing: .5em; }.color1, .color2, .textcolor { cursor: pointer; } h2 { font: 500 2em 'Raleway', sans-serif; letter-spacing: .25em; font-variant: small-caps; }.labelcolor { font: 800 1em 'Raleway', sans-serif; font-variant: small-caps; letter-spacing: 0.25em; } h3 { font: 900 1em 'Raleway', sans-serif; text-transform: none; letter-spacing: 0.01em; }.btn{ padding: 10px; font-weight: 400; font-variant: small-caps; }

 <,DOCTYPE html> <html> <head> <title>Gradient Background</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1,0: shrink-to-fit=no"> <.-- Bootstrap CDN --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min:css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <.-- Animate.css stylesheet --> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate:min.css" /> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body id="gradient"> <div class="container d-flex flex-row align-items-center justify-content-center"> <div class="row justify-content-center align-items-center"> <header class="text-center col-12"> <br><br><h1 class="animate__animated animate__backInLeft">Background Generator</h1><br><br> <label for="color1" class="labelcolor">Color1</label> <input class="color1" type="color" name="color1" value="#00ff00"> <label for="color1" class="labelcolor">Color2 </label> <input class="color2" type="color" name="color2" value="#ff0000"> <label for="textcolor" class="labelcolor">Text Color</label> <input type="color" class="textcolor" name="textcolor" value="#000000"> <br><br><h2>Current CSS Background</h2><br><br> <h3></h3><br><br> <button id="randomgen" class="btn btn-primary btn-lg">Random Color Generator</button> </header> </div> </div> <.-- Bootstrap JS --> <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.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <script type="text/javascript" src="script.js"></script> </body> </html>

Here is a screenshot of how the web page looks on a iphone x

Answer 1

You need to change this

    <header class="text-center col-12 col-sm-11">

here col-12 and col-sm-11 are the bootstrap grid points which tell us about the build layouts of all shapes and sizes.

You can learn them from here: https://getbootstrap.com/docs/4.1/layout/grid/

Answer 2

I think you need to decrease the font size of h1, h2, h3, h4, h5 it will look fine on mobile

UPDATE :

you could try this:

Change the Bootstrap 4 CDN using this one below. (I got this from official docs of Boostrap 4).

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

Change Jquery and Bootstrap 4 JS using this one

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

Change the CSS into:

body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: linear-gradient(to right, red, yellow) fixed;
}

h1 {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}

h2 {
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
}

.color1, .color2, .textcolor {
    cursor: pointer;
}

.labelcolor {
    font: 800 1em 'Raleway', sans-serif;
    font-variant: small-caps;
    letter-spacing: 0.25em;
}
h3 {
    font: 900 1em 'Raleway', sans-serif;
    text-transform: none;
    letter-spacing: 0.01em;
}

.btn{
    padding: 10px;
    font-weight: 400;
    font-variant: small-caps;
}

This is the final HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Gradient Background</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">

    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="gradient">

    <div class="container">
        <div class="row">
            <div class="col">
                1 of 3
            </div>
            <div class="col-6">
                2 of 3 (wider)
            </div>
            <div class="col">
                3 of 3
            </div>
        </div>
        <div class="row">
            <div class="col">
                1 of 3
            </div>
            <div class="col-5">
                2 of 3 (wider)
            </div>
            <div class="col">
                3 of 3
            </div>
        </div>
    </div>

    <div class="container d-flex flex-row align-items-center justify-content-center">
        <div class="row justify-content-center align-items-center">
            <header class="text-center col-12">
                <br><br><h1 class="animate__animated animate__backInLeft">Background Generator</h1><br><br>
                <label for="color1" class="labelcolor">Color1</label>
                <input class="color1" type="color" name="color1" value="#00ff00">
                <label for="color1" class="labelcolor">Color2 </label>
                <input class="color2" type="color" name="color2" value="#ff0000">
                <label for="textcolor" class="labelcolor">Text Color</label>
                <input type="color" class="textcolor" name="textcolor" value="#000000">
                <br><br><h2>Current CSS Background</h2><br><br>
                <h3></h3><br><br>
                <button id="randomgen" class="btn btn-primary btn-lg">Random Color Generator</button>
            </header>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="script.js"></script>
</body>
</html>

What I change is several things:

Remove Integrity and Anonymous - if you just develop this for local development you don't need it. For Production usage, you could download the scripts and styles.
Clean up the CSS
Add some bootstrap row and col to proofing the responsiveness

Hope this helps~

I designed a simple webpage using bootstrap4, but whatever I try I couldn't make it responsive. Can anyone help me?

Question

2 answers

solution1
0 2020-06-11 05:30:46

solution2
0 ACCPTED 2020-06-11 06:43:20

I designed a simple webpage using bootstrap4, but whatever I try I couldn't make it responsive. Can anyone help me?

Question

2 answers

solution1 0 2020-06-11 05:30:46

solution2 0 ACCPTED 2020-06-11 06:43:20

solution1
0 2020-06-11 05:30:46

solution2
0 ACCPTED 2020-06-11 06:43:20