Prevent elements from collapsing within the Bootstrap 5 grid system

Hey there, happy Friday everyone!

I've been working on rebuilding my company's website to learn HTML and CSS. I'm currently creating a replica of the original site and it's going really well so far.

However, I've run into some issues with the footer section on smaller screens - the items are getting mixed up.

In the image below, you can see (1) how it should look and (2) what is happening in my case:

https://i.sstatic.net/PqDws.png

Here is the snippet of my code:

.footer {

    color: #fff;
    height: 140px;
    background: linear-gradient(180deg, #130936, #130936) no-repeat center;
    font-family: 'Open Sans', sans-serif;

}


.container {

width: 70%;

}

p, p a {

    text-decoration:none;
    color: hsla(0, 0%, 100%, 0.72);
    letter-spacing: 0.3px;
    font-size:14px;

}

.footer-brand {
    width: 136px;
    background: url(https://i.ibb.co/zbq2q4D/pngwing-com-1.png) left center no-repeat;
    border: 0;
    text-indent: -99999px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
............. (code continues)

Your assistance will be greatly appreciated.

Answer №1

It appears that incorporating responsiveness prefixes for the col class is crucial. When you define col or col-x as a class, it signifies that the class will have a fixed size relative to other grids. To prevent content overlap, utilizing prefixes like col-sm-x, col-md-x based on the screen size is essential.

To learn more about bootstrap grid, visit this link: https://getbootstrap.com/docs/5.3/layout/grid/

<!DOCTYPE html>
<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
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f0d00001b1c1b1d0e1f2f5a415c415f420e031f070e5e">[email protected]</a>/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e98b86869d9a9d9b8899c4808a86877aa3e88889ab99ba86bbefbc89989881dabfa98988084bebcafb9888789ab825de98296bfc28986919cc298829593809aa5cd808486a58e9ae38d94673ebdaea68687d48989d2b588859591adbd99bbd48cced49baac98">[email protected]</a>/font/bootstrap-icons.css"
    />
  </head>
  <body>
    <footer class="footer">
      <div class="container-fluid">
        <div class="row align-items-center">
          <div class="col-xs-12 col-md-3 text-center">
            <img
              class="footer-brand image-fluid"
              src="https://i.ibb.co/zbq2q4D/pngwing-com-1.png"
              alt=""
              style="width:80px"
            />
          </div>
          <div class="col-xs-12 col-md-3 text-center">
            <p class="p1">
              <a href="tel:+44 (0) 700 677 1336">+44 (0) 700 677 1336</a>
            </p>
            <p>
              <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9b0b7bfb699b3a9b8bdaab6b5acadb0b6b7aaf7bab6b4">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f79e999198b794989a8796998ebe8098859cd994989a">[email protected]</a></a>
            </p>
          </div>
          <div class="col-xs-12 col-md-3 text-center">
            <a href="#"><i class="bi bi-facebook"></i></a>
            <a href="#"><i class="bi bi-twitter"></i></a>
            <a href="#"><i class="bi bi-instagram"></i></a>
            <a href="#"><i class="bi bi-linkedin"></i></a>
          </div>
          <div class="col-xs-12 col-md-3 text-center">
            <p>© 2022 - TheCompanyIWork Limited</p>
          </div>
        </div>
      </div>
    </footer>
    <script
      src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0d2dfdfc4c3c4c2d1c0f0859e839e809dd1dcc0d8d181">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

The code above doesn't account for your stylesheet impact, so ensure your styles don't conflict with Bootstrap's.

Additionally, explore Bootstrap color utilities here: https://getbootstrap.com/docs/5.0/utilities/colors/

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

Data structures of advanced complexity within HTML data attributes

I am delighted by the existence of the html5 data attribute. It's great to be able to input a plain string into html attributes and retrieve them using jquery. However, wouldn't it be wonderful to have more than just a basic string? Is there a ...

Continuous horizontal columns

Is there a way to create horizontal columns with inline-blocks, like the method described here, without having vertical gaps between items on the second line due to different heights? I want to eliminate the vertical gaps between the tiles using only CSS. ...

Stopping the Game Loop in Windows Phone 8.1 with WinJS

Despite everything working smoothly, I am facing an issue with stopping the game loop when the Start button is pressed and the app is moved to the background. The event handler for suspend, app.oncheckpoint = function(args) {}, does not seem to fire for t ...

Preventing PHP Form Resubmission and Addressing Unusual Problems

Let's keep this brief. This is the code I've been working on: <?php if ($_POST['title'] != 'Title' && $_POST['date'] != 'Date') { $fileName = 'blog.txt'; $fp = fopen('blog.txt', &ap ...

Ensuring the clickable area of the button aligns perfectly with the button itself and adjusting the arrow position to be

Check out the sandbox here: https://codesandbox.io/s/vigilant-currying-h7c3r?file=/styles.css If you are looking for the classes .line and .arrow, they are what you need. When you create an event, notice how the arrows appear too low, with the clickable a ...

Interact with various contenteditable sections by navigating with the arrow keys

I have a challenge with multiple <p contenteditable="true"></p> elements on my page. I am seeking a solution to enable the use of arrow keys to navigate seamlessly across these separate elements as if they were one cohesive editable element. F ...

Centering PayPal buttons horizontally with a width specified as a percentage

Take a look at this interactive coding playground showcasing the following React code: import React from "react"; import ReactDOM from "react-dom"; import { PayPalScriptProvider, PayPalButtons, usePayPalScriptReducer } from " ...

Display only the offcanvas button

Having trouble with Bootstrap 5 offcanvas? The offcanvas doesn't hide when I click the button again. <button data-bs-toggle="offcanvas" role="button">Add to Cart</button> Every time I click the button again, the offcan ...

Can someone guide me in altering an item within a column? I have basic knowledge of PHP, but I am not a skilled expert in the subject

Hello, I am new to coding and I have a question. I would like to make a correction in the Terminate Reason column by changing the spelling of "Resgned" to "Resigned". Can someone guide me on how to do this? Please refer to the attached image for better und ...

Exploring the Intersection of Windows 8 Store Applications and jQuery: Leveraging MSApp.execUnsafeLocalFunction

Developing a Windows 8 JavaScript Store App (using Cordova) has led to some complications when using jQuery. It seems that in order to utilize certain functions, I have had to modify the jQuery library by adding: MSApp.execUnsafeLocalFunction While this ...

Shooting star css animation featuring pre and post effects

Trying to create a falling star using CSS animation. I made a star with a pseudo element, but I'm having trouble setting the animation in the pseudo-element. i{ position: relative; width: 0; height: 0; border-left: 12px solid transpa ...

Implementing Dynamic Script Injection in Angular Controllers for Enhanced HTML Functionality

I'm a total beginner when it comes to Angular and frontend development, so please bear with me if my question seems basic: In my controller, I have the following code where I am populating the $window.user data that is being used in the script [2] ad ...

What is the best way to display my index.html file while utilizing PHP Slim REST Api?

Recently I began diving into PHP Slim to create a REST API, and now I'm looking to integrate a client interface with it. One issue I've encountered is not being able to serve my index.html (the client's homepage) properly. Despite following ...

Is it possible to create a custom tag in HTML 4?

What is a custom tag in HTML (Kindly note that I am specifically talking about the differences from XHTML)? I need to include some additional text to meet StackOverflow's posting requirements. Thanks! ...

Exploring the tab-content features of Bootsrap 5 through anchor tags

In the previous version of Bootstrap, the tab-pane used to fade in active. However, in the new version, it is now: tab-pane fade show active. What other improvements can I make? <!DOCTYPE html> <html lang="en"> <head> <m ...

Using the <noscript> tag for an individual element or a comparable alternative

So, I have a link labeled "Impressum" that when clicked, opens up the Impressum section. <a data-open="something">Impressum</a> <div class="reveal" id="something" data-reveal> <img src="images/reverseLogo.png"> <h1>Imp ...

Reveal/Conceal footer upon vertical scrolling

I am attempting to achieve the following goals: Display the div element when the scrolling position is greater than 20 Apply a fadeOut effect after a certain delay Prevent the fadeOut effect when hovering over the sticky footer This is my implementation ...

Necessary workaround needed for HTML time limit

Our HTML page has been designed to automatically timeout after 10 minutes of inactivity. This functionality is achieved through the following code: function CheckExpire() { $.ajax({ type:'GET', url:self.location.pathname+"?ch ...

Location-based services: Updating the position of a Google Maps marker without refreshing the entire map interface

How can I update only the marker on a map when the device is in motion or has increased accuracy? I want to reload the map when the position changes, but only move the marker. Below is the code snippet that I currently have: if (navigator.geolocation) { ...

The CSS "ul" selector targets unordered lists in HTML

How can I target the ul elements highlighted below in my HTML markup without using a class or id for reference? Here is the relevant portion of my HTML code: <div id="mainmenu"> <ul class="menu"> <li class="item-472"> < ...