1

I am quite new to this and I've already tried on containers and rows and have divided the columns accordingly as required. The current outline gets me a fine webpage on my pc but I am still not getting a responsive page. I know giving media tags could resolve the issue, but I am trying bootstrap v4.6.

<!DOCTYPE html>


<!--Building a github page-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <STYLE>
     body{
       background-color:#a9ba9d;
     }
        .box{
       background-color: #36454f;
       margin-bottom: 90px;
      
     }
     
     .fa{
       color:white;
       padding:15px;
       
     }
     .text-center{
       padding-left:650px;
       color:white;
       
     }

     .box2{
         background-color:#343434;
         margin-top:50px;
         margin-left:200px;
         padding: 100px 400px 10px 200px;
         border-radius:25px;
         height: 190px;
         
     }
     .boxpart{
         background-color:#343434;
         padding-bottom:500px;
         border-radius:25px;
         margin-right: 50px;
         width:300px
     }
    .small-box{
         background-color:#343434;
        margin:20px;
        margin-top: 80px;
        padding:70px 0px 50px 0px;
        border-radius:25px;
    }
     .small-box1{
         background-color:#343434;
        margin:20px;
        margin-left:125px;
        margin-top:80px;
        padding:40px 0px 50px 0px;
        border-radius:25px;
     }
    input{
       background-color:#343434;
       margin-left:250px;
       padding: 2px 2px 2px 5px;
       border-radius:10px;
       width: 500px;
    }
    input::placeholder{
        color:grey
    }
    .row{
        width:900px;
    }   
   </STYLE>
</head>

    <body>
    <div class="box">
            <span class="fa fa-github fa-2x" ></span>
             <span class="text-center">GITHUB</span>     
    </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-3 col-md-3 col-lg-3">
                    <div class="text-centre boxpart">
                     </div> 
                </div>
                    <div class="col-sm-9 col-md-9 col-lg-9">
                            <input type="text" placeholder="Search">
                                    <div class="row">
                                        <div class="col-sm-3 col-md-3 col-lg-3 small-box1"></div>
                                        <div class="col-sm-3 col-md-3 col-lg-3 small-box"></div>
                                        <div class="col-sm-3 col-md-3 col-lg-3 small-box"></div>
                                        <div class="col-sm-6 col-md-6 col-lg-6 box2"></div>
                                    </div>
                               </div>
                            </div>
                         </div>
            </div>
        </div>
    </body>
    </html>

3 Answers 3

0

You have specified the width for several elements. When you set a fixed width on things, they can't be responsive. The .boxpart div will always be 500px wide, so it will overflow on devices smaller than 500px wide. You have also overridden the width of the .row class that comes from Bootstrap and set it at a fixed width. So that also cannot be responsive. It also looks to me like you have some extra s in the right section.

Bottom line here: don't fight the framework. Use what it gives you.

Here's a five-minute clean up of what you have. There's still work to do (like putting your header in a ), so take a look at the bootstrap docs and dig in.

    <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<STYLE>
    body{
    background-color:#a9ba9d;
    }
        .box{
    background-color: #36454f;
    
    }
    

    .boxpart{
        background-color:#343434;
        border-radius:25px;
    }
    .small-box{
        background-color:#343434;

        border-radius:25px;
    }

    input{
    background-color:#343434;

    border-radius:10px;
    }
    input::placeholder{
        color:grey
    }

</STYLE>
</head>

    <body>
    <div class="box mb-5 text-white">
            <i class="fa fa-github fa-2x p-2" ></i>
            <span>GITHUB</span>     
    </div>
        <div class="container">
            <nav>
                
            </nav>
            <div class="row">
                <div class="col-md-3">
                    <div class="text-center boxpart p-5 text-white">
                        <p>left box</p>
                        <p>left box</p>
                        <p>left box</p>
                        <p>left box</p>
                    </div> 
                </div>
                <div class="col-md-9 mt-3 mt-md-0">                    
                    <div class="row ">
                        <div class="col-12">
                            <input type="text" class="p-1 w-100" placeholder="Search"/>
                        </div>
                    </div>
                    <div class="row mt-2 mx-0">
                        <div class="col small-box py-5 text-white text-center">test</div>
                        <div class="col small-box py-5 text-white text-center">test</div>
                        <div class="col small-box py-5 text-white text-center">test</div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>
2
  • Is it ok to manually increase/decrease padding or margin rather than touching on width/height? Will that affect the responsiveness? Or should I specifically use the padding/margin commands from bootstrap?
    – Sathwic
    Sep 20, 2021 at 20:11
  • I'd try using the padding and margin utility classes from Bootstrap first and see where those get you. They are pretty flexible. If you need something more than is in the framework, then add some of your own classes. Just be careful of using pixels as that can affect responsiveness. Try using ems or rems as the units if you create your own classes -- they will scale. Sep 20, 2021 at 22:09
0

try not to use class named row when you also use the built in row in bootstrap to avoid problems, also the grid system in bootstrap works in 12 columns where for example if one div is col-lg-8 and you have 2 divs the other should be col-lg-4 so it can be 12 together.

I also recommend you reading this doc in there official website

https://getbootstrap.com/docs/4.1/layout/grid/

0

First of all you have some div tag in excess.

Then you have to study the bootstrap breakpoints here : [https://getbootstrap.com/docs/4.6/layout/overview/#responsive-breakpoints][1]

If you want the content in columns for mobile you need to add 'col-12' in all your div.

Example:

<div class="row">
    <div class="col-sm-3 col-md-3 col-lg-3">
        <div class="text-centre boxpart"></div> 
    </div>
    <div class="col-sm-9 col-md-9 col-lg-9">
        <input type="text" placeholder="Search">
        <div class="row">
            <div class="col-12 col-sm-3 col-md-3 col-lg-3 small-box1"></div>
            <div class="col-12 col-sm-3 col-md-3 col-lg-3 small-box"></div>
            <div class="col-12 col-sm-3 col-md-3 col-lg-3 small-box"></div>
            <div class="col-12 col-sm-6 col-md-6 col-lg-6 box2"></div>
        </div>
    </div>
 </div>

I hope it was helpful

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.