Struggling to achieve a responsive design on a webpage despite using bootstrap. Having difficulty creating a responsive layout with containers and columns

I'm fairly new to this and I've experimented with containers and rows, dividing the columns as needed. While my current setup displays a nice webpage on my pc, it still lacks responsiveness. I understand that using media tags could solve the issue, but I'm testing out bootstrap v4.6.

<!DOCTYPE html>

<!--Creating 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a6ababb0b7b0b6a5b484f0eaf2eaf4">[email protected]</a>/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>
htmlcssbootstrap-4

Answer №1

Multiple elements have fixed widths specified, making them non-responsive. The .boxpart div is set to always be 500px wide, causing overflow on devices smaller than 500px. Additionally, the width of the .row class from Bootstrap has been overridden with a fixed width. It seems like there are extra s in the right section as well.

The key takeaway here is to work with the framework rather than against it. Utilize what the framework provides.

Here's a quick cleanup of your code. There are still improvements to make, such as enclosing your header in proper tags. Refer to the Bootstrap documentation for further guidance.

<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/bootstrap/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>

Answer №2

It's best to avoid using the class name "row" while also utilizing Bootstrap's built-in row feature to prevent any potential conflicts. Additionally, Bootstrap's grid system operates on 12 columns, so if one div is set to col-lg-8, the other should be col-lg-4 to add up to a total of 12.

I suggest checking out the documentation on their official website for more information:

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

Answer №3

Firstly, you appear to have an excessive number of div tags present.

It would be beneficial for you to familiarize yourself with the bootstrap breakpoints detailed here: [https://getbootstrap.com/docs/4.6/layout/overview/#responsive-breakpoints][1]

If your intention is to display content in columns on mobile devices, it is necessary to include 'col-12' in all your div elements.

For instance:

<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 trust that this information proves beneficial to you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing CSS to apply unique styles to individual radio buttons

I have 4 radio buttons in my quiz application. I need to style only one of them, which is the correct answer option. Here's the HTML snippet that was generated: <p> <input id="SelectedAnswer" type="radio" value="5" name="SelectedAnswer"> ...

htmlcss

Optimizing image centering in Next JS as screen size expands

I've been struggling to work with NextJS's Image component. My goal is to set up a banner image that only covers a specific amount of space on the screen, regardless of screen size. I have managed to achieve this by using max-height: 30vh and ov ...

javascripthtmlcssnext.jsnextjs-image

Ways to avoid overflow of dynamically added div element?

Currently, I am facing an issue while dynamically appending div elements with the .magnet class to my page. These elements end up overflowing the container boundaries and I am struggling to find a solution for this problem. If anyone could check out my j ...

javascriptjqueryhtmlcss

Create a stylish frame for designated rows within a table

Col1 Col2 Col3 Col4 Col5 Col6 Row11 Row12 Row13 Row14 Row15 Row16 Row21 Row22 Row23 Row24 Row25 Row26 Row31 Row32 Row33 Row34 Row35 Row36 Looking for a way to add a border around rows with matching values in the first column, or around a specif ...

javascriptjqueryhtmljsp

Incorporate a linked select dropdown into the registration form

I am working on a sign-up form and trying to integrate 2 linked select boxes into the form. The code for the linked select boxes works fine separately but when I attempt to add it to the form, it doesn't display as expected. I attempted to incorporate ...

javascripthtmlangular

What is the process for integrating php script within javascript?

Is it possible to incorporate php scripts into javascript[1] in the same manner as it can be done in html[2]? server.php: <?php echo 'hello World'; ?> client.js (or client.php if needed): function foo() { var i = <?php include ...

phpjavascripthtmlinclude

How can you delete using JavaScript by pressing the "Delete" key?

Is it possible to programmatically trigger the deletion of text on an HTML web page using JavaScript or jQuery? I am looking for a way to replicate the functionality of clicking the "Delete" button without requiring users to physically click on it. Inste ...

javascriptjqueryhtmlweb

Display a distinct button on the webpage if the logged-in user has not clicked on it yet

Seeking a solution to emphasize buttons that the User has not visited in the event of changes to the content of the views that appear when these buttons are clicked. The answer must utilize the ASP.net MVC CSS framework. <head> <style type="text/ ...

javascripthtmlcssasp.netasp.net-mvc

Is it possible for a gradient to maintain the original width of the element to which it is added?

Is there a way to create a gradient that remains static and masks out certain visible parts? I want the countdown timer to darken as it nears the end. Currently, my gradient only reduces colors in between while keeping the left and right colors: (funct ...

javascripthtmlcss

What are some effective ways to manage repetitive HTML elements like headers and footers in Angular 4?

Within my Angular web project, I find myself using a variety of different headers on multiple pages. Is there a way to streamline this process by coding the header and footer once and having them automatically included in one or more pages? I am looking ...

htmlasp.net-mvcangularrazor

Experiencing an inexplicable blurring effect on the modal window

Introduction - I've implemented a feature where multiple modal windows can be opened on top of each other and closed sequentially. Recently, I added a blur effect that makes the background go blurry when a modal window is open. Subsequently opening an ...

javascriptjqueryhtmlcssarrays

The variable continuously updates itself inexplicably, without any specific code dictating it to

In the sandbox-based game I am playing, two variables are present. blocks (this is an array) and blockssave (also an array) However, there are also functions included: var game = { blocksave: function() { blockssave = blocks; blo ...

javascripthtml

Problems with CSS: Struggles with Overflow-x and display:flex

I have already completed 2 questions regarding the current issue I am facing. However, I have now created a more improved example. Please take a look below. The boxes are being loaded using Angular ng-bind. Check out the code pen here: http://codepen.io/a ...

javascripthtmlcssangularjsflexbox

Add a preventDefault event listener to a submit button that triggers a specific function

$(function() { $('#login').submit(function(e){ preventSubmission(); e.preventDefault(); }); }); function preventSubmission() { $('#btnLogin').attr('disabled','disabled'); $("#btnLogi ...

javascriptjqueryhtml

Vue: Implement out-in transition where the incoming element appears before the outgoing element has completely disappeared

Check out my code on Codepen: here In this scenario, I have set up two div elements: Block 1 and Block 2. The functionality I am looking for is when a button is clicked, Block 1 smoothly translates to the left until it goes out of view. Once that happens ...

javascriptcssvue.jsvuejs3

The solution to the issue: [splide] Unable to find a track/list element

Currently, I am trying to create a thumbnail carousel following this tutorial, but I seem to be encountering an error. The guide does not provide instructions on how to create the #main-carousel element, so despite trying different methods, I am still unab ...

javascripthtmlsplidejs

Making Explorer 11 wrap width with Flexbox

After implementing a simple code using flexbox, everything seemed to be working flawlessly on Firefox, Safari, Chrome, Edge, and Opera, but encountered issues with IE11. The problem arises with responsive frames containing images and text within a specific ...

htmlcssflexbox

Header Menu Click Causes Blurring of Website Background

I need help adding a blur effect to my site background only when the header menu is clicked and active. Once the menu is activated, the .ct-active class is added to it. The CSS code below works for styling individual items - the menu turns red when activ ...

cssmenuheaderblur

Interactive carousel featuring responsive image zoom effect on hover

Utilizing the flickity carousel, I have crafted an example which can be found at this link to codepen.io. Here is the CSS code that has been implemented: CSS .image-hoover { overflow: hidden; } .image-hoover img { -moz-transform: scale(1.02); -web ...

javascriptjquerycsscss-transitionscarousel

Modifications made to the content of the element can disrupt the functioning of the delegated event handlers tied to its parent

Currently, I am working on implementing a drop-down menu for a school project. While most of the functionality is in place, I encountered an issue with JQuery events that has me stumped. When I click on a list item, the name is set correctly, but then the ...

javascriptjqueryhtmlcssdynamic-content