How to style bootstrap container in wordpress theme?

Question

I am createing the footer.php for my costum theme.

The whole footer is full with/356. In the middle of this container I another container which is 960/252. Inside I have some components(logo, social icons,navigation,copyright). I assume they also should be in separate containers. On a mobile this all should be responsive. Since I am doing my first steps with Bootstrap, I tried to add my custom style. I am changing the style, but than it is not responsive. COuld you give me directions: 1) do I need to place the separate components(loso, social,nav, copy) in different containers? 2) how can I change the style of each container and keep the responsiveness?

My footer.php:

<style>
#ch {
background-color: yellow;
height: 356;
 }

#chuchu {
 background-color: pink;
height: 252;
width: 960;

}
</style>





<?php if(!is_page_template( 'blank-page.php' ) && !is_page_template( 'blank-
page-with-container.php' )): ?>
        </div><!-- .row -->
    </div><!-- .container -->
</div><!-- #content -->
<?php get_template_part( 'footer-widget' ); ?>
<footer id="colophon" class="site-footer" role="contentinfo">
    <div id="ch" class="container-fluid p-3 p-md-5">

    <div id="chuchu"class="row">
<div class="col flex-unordered">
First, but unordered
</div>
<div class="col flex-last">
  Second, but last
</div>
<div class="col flex-first">
  Third, but first
</div>

Answer 1

Why do you need container inside container? You may use single container and to reduce it's total width, you may specify that in your stylesheet like this:

.container{max-width:90%;width:800px}

I am just considering 800px width as your requirement. You may use your own values. The purpose of defining the max-width will be to make it responsive for mobile views as small devices do have width less than 800 but with explicit max-width, they won't go wider than 90% of the respective screen sizes.

And, as per your code, why are you defining height of the container div? To increase spacings, you may use padding and margins. This explicitly height definition will unnecessarily increase your workload to rewrite the same for other mobile devices too.