Problemas com responsividade bootstrap

Estou desenvolvendo um projeto, mas estou com problemas em questões de responsividade, quando o site muda para diferentes tela como: celulares, tablets e outros dispositivos. Ele quebra todo o seu layout, estou usando o bootstrap e as suas tags, porém estou com algumas dificuldades sobre o entendimento do mesmo.

 <link href="<?php echo get_template_directory_uri(); ?>/css/meu-estilo.css" rel="stylesheet">

    <link href="<?php echo get_template_directory_uri(); ?>/img/favicon.png" rel="icon">
    <link href="<?php echo get_template_directory_uri(); ?>/img/apple-touch-icon.png" rel="apple-touch-icon">

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700|Raleway:300,400,400i,500,500i,700,800,900" rel="stylesheet">

    <link href="<?php echo get_template_directory_uri(); ?>/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <link href="<?php echo get_template_directory_uri(); ?>/lib/nivo-slider/css/nivo-slider.css" rel="stylesheet">
    <link href="<?php echo get_template_directory_uri(); ?>/lib/owlcarousel/owl.carousel.css" rel="stylesheet">
    <link href="<?php echo get_template_directory_uri(); ?>/lib/owlcarousel/owl.transitions.css" rel="stylesheet">
    <link href="<?php echo get_template_directory_uri(); ?>/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="<?php echo get_template_directory_uri(); ?>/lib/animate/animate.min.css" rel="stylesheet">
    <link href="<?php echo get_template_directory_uri(); ?>/lib/venobox/venobox.css" rel="stylesheet">


    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/https://www.w3schools.com/w3css/4/w3.css">
    <script src="<?php echo get_template_directory_uri(); ?>/lib/jquery/jquery.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/lib/owlcarousel/owl.carousel.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/lib/venobox/venobox.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/lib/knob/jquery.knob.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/lib/wow/wow.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/lib/parallax/parallax.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/lib/easing/easing.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/lib/nivo-slider/js/jquery.nivo.slider.js" type="text/javascript"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/lib/appear/jquery.appear.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/lib/isotope/isotope.pkgd.min.js"></script>

    <script src="<?php echo get_template_directory_uri(); ?>/contactform/contactform.js"></script>

    <script src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script>

    <link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet">

    <link href="<?php echo get_template_directory_uri(); ?>/css/responsive.css" rel="stylesheet">

</head>

<body>      

    <header>
        <!-- header-area start -->
        <div  class="header-area">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12 col-sm-12">

                        <!-- Navigation -->
                        <nav class="navbar navbar-default">
                            <!-- Brand and toggle get grouped for better mobile display -->
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".bs-example-navbar-collapse-1" aria-expanded="false">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                <!-- Brand -->
                                <a class="navbar-brand page-scroll sticky-logo" href="index.html">
                                    <img src="<?php echo get_template_directory_uri(); ?>/imgBlue/logoUltra.png" class="Logo">
                                    <!-- Uncomment below if you prefer to use an image logo -->
                                    <!-- <img src="img/logo.png" alt="" title=""> -->
                                </a>
                            </div>
                            <!-- Collect the nav links, forms, and other content for toggling -->
                            <div class="collapse navbar-collapse main-menu bs-example-navbar-collapse-1" id="navbar-example">
                                <ul class="nav navbar-nav  " style="margin-left:395px;">
                                    <li>
                                        <a class="page-scroll " href="/index"><b>A Blue</b></a>
                                    </li>
                                    <li>
                                        <a class="page-scroll" href="/negocios"><b>Nossos Negócios</b></a>
                                    </li>
                                    <li>
                                        <a class="page-scroll" href="/investir"><b>Porque Investir</b></a>
                                    </li>
                                    <li>
                                        <a class="page-scroll" href="/social"><b>Blue Social</b></a>
                                    </li>
                                    <li>
                                        <a class="page-scroll" href="/contato"><b>Contato</b></a>
                                    </li>
                                </ul>
                            </div>
                            <!-- navbar-collapse -->
                        </nav>
                        <!-- END: Navigation -->
                        <div onclick="scrollToTop" class="retangulo">
                            <a class="arrumarInvestidor" href="/investidor"><b>Área do Investidor</b></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- header-area end -->
    </header>
    <!-- header end -->


    <div class="container-fluid" style="padding-right: 0; padding-left: 0">
        <div class="row">
            <div class="col-md-6 col-sm-12 col-lg-12">
                <img src="<?php echo get_template_directory_uri(); ?>/imgBlue/ImagemBlueBackGround.jpg" class="">                    


                <form class="w3-container w3-card-4" action="/action_page.php" style="
                      position: absolute;
                      bottom: 218px;
                      left: 439px;
                      ">


                    <input class="w3-input w3-border" name="first" type="text" style="
                           width: 489px;
                           height: 53px;
                           " placeholder="Usuário">
                    <br>
                    <br>
                    <input class="w3-input w3-border" name="last" type="text" style="
                           width: 489px;
                           height: 53px;
                           " placeholder="Senha">
                    <br>
                    <br>

                    <button class="btn btn-default" type="submit" style="
                            float: left;
                            margin-left: 138px;
                            width: 243px;
                            height: 53px;
                            ">Entrar</button>

                </form>


            </div>


        </div>
    </div>

     <footer>
        <div class="footer-area" style="background-color: #c7c8ca;">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-2">


                        <div class="col-md-8"><h5 class="abluefooter"><b><a href="/index">A blue</a></b></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/index#quemSomos">Quem somos</a> </h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/index#atuacao">Atuação</a></h5></div>
                        <div class="col-md-8"><h5 class="tudo">Core Business</h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/index#valores">Valores </a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/index#qualificaoTecnica">Qualifação técnica</a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/index#parceiros">Parceiros</a></h5></div>
                    </div>

                    <div class="col-md-2">

                        <div class="col-md-8"><h5 class="nossos"><b><a href="/negocios">Nossos negócios</a></b></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/negocios#linhaTempo">Linha do tempo</a></h5></div>

                    </div>

                    <div class="col-md-2">

                        <div class="col-md-8"><h5 class="nossos"><a href="/investir">Porque Investir</a></h5></div>
                        <div class="col-md-8"><h5 class="m"><a href="/investir#modeloInvestimentos">Modelo de investimentos</a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/investir#vantagens">Vantagens</a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/investir#modeloNegocio">Modelo de negócio</a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/investir#compliance">Compilance</a></h5></div>
                    </div>


                    <div class="col-md-2">

                        <div class="col-md-8"><h5 class="nossos"><a href="/social">Blue Social</a></h5></div>
                        <div class="col-md-8"><h5 class="m"><a href="/social#blueSocial">Responsabilidade Social</a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/social#comoFunciona">Como funciona</a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/social#instituicoes">Instituições</a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/social#apoiamAcausa">Eles apoiam a causa</a></h5></div>
                    </div>


                    <div class="col-md-2">

                        <div class="col-md-8"><h5 class="nossos"><a href="/contato">Contato</a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/contato#conosco">Compramos seu terreno </a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/contato#conosco">Trabalhe conosco</a></h5></div>
                        <div class="col-md-8"><h5 class="tudo"><a href="/contato#localizacao">Localização</a></h5></div>
                    </div>

                </div>


                <div class="col-md-5"><img src="<?php echo get_template_directory_uri(); ?>/imgBlue/logoUltra.png" class="logoFooter"></div>
                <div class="col-md-7">
                    <p class="a"><b>BLUE</b></p>
                    <p class="rua">Rua Kalil Elias Warde, 219 </p>
                    <p class="ruaCampina">Campina do Siqueira - Curitiba - PR</p>
                    <p class="number">(41) 3090.3690 &nbsp;(41) 3090.3662</p>
                    <p class="e">contato@blueempreendimentos.com.br</p>
                </div>
            </div>
        </div>


    </footer>

</body>

link da tela do site: http://blueholding.hqssolucoes.com.br/investidor/

Pelo que vejo, tu queres que quando o dispositivo for maior que 576 px (sm) ele ocupe toda a tela (as 12 colunas)? Não seria melhor ele ‘quebrar’ em mais de uma coluna?
Também certifique-se de que esteja utilizando a meta tag de responsividade (Responsive-meta-tag Bootstrap)

Exemplo:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">

Dê uma olhadinha aqui: Bootstrap Grid System e aqui Layout Grid Bootstrap 4.3.

1 curtida

seu formulário não está com as classes padrões do bootstrap, ja tentou mudar para um formulario do bootstrap ?