As I embark on my journey of constructing my inaugural website using Bootstrap 4, a wave of questions has flooded my mind. These queries either remain unanswered or beckon for further clarification. Shall we dive into them?
Is it considered standard practice to employ multiple container styles across a singular website? Can one seamlessly blend 'container' with 'container-fluid' in varying sections?
In a small scale experiment, I utilized the 'text-md-right' class provided by Bootstrap with an expectation of right-aligning text within a 'bg-success' backdrop. However, the outcome was not as anticipated. Why might this be the case? Let's inspect the snippet below.
<div class="container-fluid">
<div class="row">
<div class="col-md-3" style="min-height: 0.5rem; background-color: #FBB040"></div>
<div class="col-md-3" style="min-height: 0.5rem; background-color: #939598"> </div>
<div class="col-md-3" style="min-height: 0.5rem; background-color: #D1D3D4"> </div>
<div class="col-md-3" style="min-height: 0.5rem; background-color: #28AB9E"> </div>
</div>
<div id="outter-div" class="row">
<div id="inner-div-1-logo" class="col-md-3 test"><img src="images/logo.png" class="mx-auto d-block" alt="helloworld" style="width:200px"></div>
<div id="inner-div-1" class="col-md-8">
<div class="row contact-bar text-md-right bg-success"> hello world -- needs to be right-aligned</div>
<!--<div id="contact-bar" class="row bg-success contact-bar"> Call Us @ (888) 888-8888 | <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e070008012e0b030f0702400d0103">[email protected]</a> | <a href="http://www.google.com">Customer Portal</a> </div>-->
<div id="nav-bar" class="row nav-bar bg-primary"> nav-bar </div>
</div>
</div>
</div>
- Feedback is welcomed regarding the coding approach taken above. Am I steered in the right direction with my methodology thus far? Are there alterations you would recommend?
Your insights are greatly appreciated!