Can you provide guidance on achieving responsiveness using Bootstrap, CSS, and HTML?

I am currently developing a portfolio website and I have encountered a bug in my code. I need assistance with placing the footer below the pricing card. Thank you. https://i.sstatic.net/qYMvd.jpg

HTML : FOOTER SECTION :

<footer class="footerP">
    <div class="container-fluid">
        <div class="row">
            <div class="small-footer col-12 col-lg-12">
                <div class="footer-title col-12 col-lg-6">
                    <h3>PASTEUR SERVICE STATION</h3>
                </div>
                <div class="footer-social hidden-md-down col-lg-6 text-right">
                    <ul id="menu">
                        <li>
                            <a href="#">
                                <i class="fab fa-facebook"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fab fa-twitter"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fab fa-google-plus-g"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fab fa-instagram"></i>
                            </a>
                        </li>
                    </ul>
                </div>
        </div>
        <div class="big-footer">

        </div>
    </div>
    </div>
</footer>

CSS CARD :

.card{
max-width: 300px;
height: auto;
border-radius: 15px;
padding: 40px 20px;
margin: 0 auto;
box-shadow: 0 10px 15px rgba(0, 0, 0, .4);
transition: .5s;
overflow: hidden;

}

FOOTER CSS :

.footerP .small-footer{
width: 100%;
height: 40px;
background: #232323;

}

Thank you all for your help.

Answer №1

Enclose everything within a footer tag and give it a class name of "footer" (using the default Bootstrap class).

<footer class="footer">
  <div class="container-fluid">
   <!--Insert the rest of your code here --!>

By utilizing the default Bootstrap .footer class, your footer will remain full width and stick to the bottom of the page.

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

Creating a JavaScript button for text capitalization: A step-by-step guide

Is there a way to modify this script so that users are required to click a button in order for all text entered into the form to be converted to uppercase? I understand that the onclick function needs to be utilized, but I am uncertain about where and ho ...

Implementing a Vertical Scrollbar for tbody Using Bootstrap Table Styles

My goal is to display a vertical scrollbar within the tbody. After researching, I found suggestions to apply display:block to both the tbody and thead, as shown here Unfortunately, this solution does not work when the table has Bootstrap's table tabl ...

Placing two Slickgrid tables next to each other

Is there a way to arrange two slickgrid tables next to each other? Currently, I am creating two grids using grid = new Slick.Grid..., but the dimensions are hardcoded in CSS like this: #dynamic1 { /*this is grid one*/ position: absolute; top: 120px; ...

What could be causing Firefox to display the slideshow, while Chrome refuses to show it?

Can anyone figure out why this slideshow is working in Firefox but not in Chrome? (I haven't tested it in IE). Looking for some help! CSS: #slideshow { margin:50px auto; width:60em; height:18em; overflow:hidden; border:0.4em solid; borde ...

When scrolling, dynamically change the background color by adding a class

I am looking to achieve a scroll effect where the color of the menu buttons changes. Perhaps by adding a class when scrolling and hitting the element? Each menu button and corresponding div has a unique ID. Can anyone suggest what JavaScript code I should ...

"Discrepancy in Alignment of Bootstrap's Dual Column Layout

Currently, I am in the process of designing a straightforward two-column layout. This layout will consist of one prominent image at the top followed by two columns underneath - one for images and the other for text. https://i.sstatic.net/sYphQ.png Howeve ...

The function string.charAt() is returning a value of 0

I'm attempting to output each letter of a word separately by using the variable string. Here is the code I have so far: function typewriter() { var el = document.getElementById("typewr"); var string = "Hello"; for(var i=0;i<string.le ...

Retrieve the radio button value from the HTML form

This website is designed to calculate ideal weight based on input data, but I am encountering an issue with the gender selection. The code seems to only recognize the first condition for female, while ignoring the else if condition for male. How can I fix ...

A guide on implementing a confirmation box with jquery confirm plugin for form submission

After submitting a form, I want to display a confirmation message without using the typical method of "return confirm("Are You Sure?")". I decided to utilize JQuery Confirm in this way: @using (@Html.BeginForm("SubmitTest", "HydrostaticReception", FormMe ...

Creating a dropdown navigation menu using CSS from href divs

I am working on a script that includes divs with images and href functions for clicking on them. <div class="home"><a href="index.php?pagina=home"></a></div> <div class="events"><a href="index.php?pagina=events"></a& ...

Hide Details tag only on mobile view

How can I easily close the default opened <details> tag on mobile? I am working with Wordpress. Any suggestions on how to achieve this? <details open> <summary>Details</summary> Something small enough to go unnoticed. </ ...

Guide on utilizing `ReactCSSTransitionGroup` for developing an expandable/collapsible list

Utilizing ReactJS to implement a collapsible/expandable list with animation has been my latest endeavor. To access the code, simply visit this link. Upon clicking the Extend button located at the top of the list, I anticipate the items to appear within 1 s ...

Excessive content in Bootstrap row extends outside browser window dimensions

I'm having an issue with the Bootsrtap row overflowing past the desired width, causing a scrollable area on the browser. Does anyone know how to fix this? You can see the site here: www.testing.cpukeychains.comhttps://i.sstatic.net/cDcot.png ...

Invoke index functions within a component

I have a widget/component written in Angular 4 within the index.html file. Before and after this angular app, there are various HTML elements due to the nature of it being an additional component for the website. The head section of the index file include ...

Creating a stylish layout with Bootstrap 4: equal height divs filled with color and a sleek gutter in between

I am struggling to create a bootstrap 4 layout as per my design screenshot. I have researched other Stack Overflow posts without finding a solution. The .container-fluid layout has a grey fill color, achieved using my custom class .bg-grey. As per the d ...

Connecting images - XHTML/CSS

Is it better to use XHTML or CSS for linking a small image? ...

Sticky positioning and outline effects

I have been working on creating a scrollable list with "sticky" headers. The functionality seems to be in place, but there are some visual glitches that I've encountered. The list itself is structured using a ul element styled with the Bootstrap 5 cl ...

Jquery double-click Event Not Functioning Properly

I've been attempting to toggle the visibility of my footer navbar while also changing the chevron icon. When the navbar is hidden, I want the chevron pointing up to be displayed, and when the navbar is shown, I want the chevron pointing down to be dis ...

establishing irregular edges for the div container

Looking to create a class that can transform an element into a specific shape using CSS. Not entirely sure if this is achievable with pure CSS alone, but applying a class to the image element will morph it into the desired shape as shown below. <style ...

Tips for aligning website content (including the body and navigation bar) at the center in rtd sphinx

Trying to create documentation with the Read the Docs theme for Sphinx documentation. Want to center the entire webpage, including both the body and left navigation bar so that as the window width increases, the margins on both sides increase equally. Righ ...