The implementation of the Bootstrap elements container class triggers a transformation in a different Bootstrap element

My issue is that the footer is being applied within the content container for some reason. Here's the code:

HTML:

<section id="products" class="products py-5">
    <div class="container">
        <!--Section Title-->
        <div class="row">
            <div class="col-10 mx-auto col-sm-6 text-center">
                <h1 class="text-capitalize product-title" id="promosyonHeader">
                    Promosyon Ürünlerimiz
                </h1>
            </div>
        </div>
    </div>

Footer HTML:

<!--Footer-->
<footer class="footer mt-5">
    <div class="text-center py-5 border-top border-secondary">
    <h2 class="py-1">Doğuhan Tanıtım</h2>
    <div class="mx-auto heading-line"></div>
</div>
<div class="container">
    <div class="container">
        <div id="footer" class="row mb-0">
            <div class="col-lg-8 offset-lg-2 text-center">
                <p>İskitler/Ankara</p>
                <p>number</p>
                <p>com.tr</p>
                <div class="justify-content-center">
                    <i class="fab fa-facebook fa-2x"></i>
                    <i class="fab fa-twitter fa-2x"></i>
                    <i class="fab fa-instagram fa-2x"></i>
                </div>
            </div>
        </div>
        <!--<div class="copyright text-center py-3 border-top text-light" id="tm"><p>Tanıtım &trade;</p></div>-->
    </div>
</div>
htmlcssbootstrap-4

Answer №1

Here's a suggestion for you:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="products" class="products py-5">
        <div class="container">
            <!--Section Title-->
            <div class="row">
                <div class="col-10 mx-auto col-sm-6 text-center">
                    <h1 class="text-capitalize product-title" id="promosyonHeader">
                        Promosyon Ürünlerimiz
                    </h1>
                </div>
            </div>
        </div>
    </section>
    
    <footer class="footer mt-5">
        <div class="text-center py-5 border-top border-secondary">
            <h2 class="py-1">Doğuhan Tanıtım</h2>
            <div class="mx-auto heading-line"></div>
        </div>
        <div class="container">
            <div class="container">
                <div id="footer" class="row mb-0">
                    <div class="col-lg-8 offset-lg-2 text-center">
                        <p>İskitler/Ankara</p>
                        <p>number</p>
                        <p>com.tr</p>
                        <div class="justify-content-center">
                            <i class="fab fa-facebook fa-2x"></i>
                            <i class="fab fa-twitter fa-2x"></i>
                            <i class="fab fa-instagram fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>

It seems like there could be an issue with your bootstrap version or some tags may not have been properly closed.

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

Is it possible for the content of the HTML Select to vary from the options displayed in the 'drop-down' menu that the user chooses from?

When a user clicks on a dropdown menu, I want them to see the full state names in the options like this. <select name="address_region" id="address_region"> <option value=1>Alabama</option> <option value=2&g ...

jqueryhtmlselect

What are some creative ways to design nested flexboxes?

I'm currently working on creating a navigation bar using two nested flex boxes within one parent container. However, I'm facing difficulty in styling the inner flexbox without impacting the main container items. Here is how my layout is supposed ...

htmlcssflexbox

Display a JavaScript object as a table in an HTML document using HTML elements

I am having trouble displaying the results of sorting an associative array in JavaScript in an HTML table without using PHP. The sorting itself is working correctly as I can see the results in the console, but the table is not showing up. Below is the code ...

javascripthtmlarrayshtml-table

Is it possible to customize the icon set for the Tempus Dominus datetimepicker?

Recently, I started using tempusdominus for Bootstrap 4.0 and everything is working smoothly with my backend integration. However, the site is already using an icon set (material-icons) and I would like to incorporate those icons into tempusdominus as well ...

javascriptdjangobootstrap-4icons

choose a distinct value for every record in the table

My goal is to only change the admin status for the selected row, as shown in the images and code snippets below. When selecting 'in-progress' for the first row, I want it to update only that row's status without affecting the others. <td ...

htmlangulartypescript

Error encountered during EJS compilation

I've encountered a frustrating error while attempting to include an if statement within a forEach loop. My goal is to prevent the delete button from appearing for the currently signed-in user's name (e.g., preventing the deletion of their own ac ...

htmlcompilationejs

Designing a charcoal square div featuring a see-through circular element at its center

I'm working on a design concept that involves creating a square div with a transparent circle in the center. The idea is to have an image as the background, with the transparent circle acting like a window through which the background image can be see ...

jqueryhtmlcss

Why does my website layout suddenly move to the top left corner of the browser screen when I zoom out?

Why does my website layout shift to the top left of the browser screen when I zoom out, while other websites like yahoo.com stay centered? ...

htmlcssbrowserlayout

What's the best way to add a suffix to a dynamic counter animation?

Having trouble adding a static suffix to the end of animated counters. I want to include a "+" sign in some of them without animation. I attempted to create a suffix class, but it doesn't append directly to the end value - it keeps showing up below t ...

javascripthtmlcss

Using a personalized function in JQuery

I need to execute a JavaScript function I created after a JQuery event has been triggered. The function in question is called scrambleDot, and I defined it previously like so:var scrambleDot = new function() { //my code }. Here's the attempted implem ...

javascriptjqueryhtmlfunctionoop

Adjust the checkbox dimensions within the cells of a bootstrap table

I am utilizing bootstrap-table along with a column containing checkboxes. I need to adjust the size of the checkboxes in my code to be 25x25 pixels. However, when I try using the height and width CSS attributes, it does not seem to take effect. html < ...

jquerycsstwitter-bootstraptwitter-bootstrap-3bootstrap-table

The onmessage event in the websocket client seems to be malfunctioning and is not triggering

In my implementation using node.js, I have set up a websocket server and client. The handshake process between the server and client appears as follows: Request URL: ws://localhost:8015/ Request Method: GET Status Code: 101 Switching Protocols Request ...

javascripthtmlnode.jswebsocket

The JavaScript calculator fails to display the value of buttons on the screen when they are pressed

I was attempting to create a calculator using JavaScript, but when I click on any button, nothing happens (the buttons don't display their values on the calculator's screen). My text editor (vs code) didn't indicate any errors, but upon insp ...

javascripthtmlcalculator

How to Conceal the <th> Tag with JavaScript

I attempted to conceal certain table elements using JavaScript. For <td> elements, it works fine: function hide(){ var x=document.getElementsByTagName('td'); for(var i in x){ x[i].style.visibility='hidden'; ...

javascripthtml

Adjusting the placement of a dropdown menu while scrolling within the container element using CSS

Is there a way to keep the submenu aligned under the button even when scrolling within the container div? Currently, it stays in the middle of the page. div.container { height: 200px; width: 400px; border: 1px solid black; overflow-y: scroll; ...

htmlcsscss-position

Aligning two divs vertically and adjusting the spacing between them

Currently dealing with a challenge regarding vertical alignment. I have two divs, one with dynamic height based on the browser size and the other with fixed height positioned at the bottom of the page. The second div also requires some margin. You can see ...

htmlcssfullscreenvertical-alignment

The mobile menu on iPhone is malfunctioning due to issues with acf

When visiting this website on my iPhone only (not responsive view or emulators), the mobile hamburger menu appears broken when the ACF plugin is activated. I have conducted thorough testing and confirmed that the issue lies solely with the ACF plugin. Cou ...

wordpressbootstrap-4advanced-custom-fields

Displaying identical images repeatedly, alter just one using JQuery with each change

In the design, I have both gray and blue stars displayed multiple times on the page. What I'm trying to achieve is that when a user clicks on a gray star, it should switch to blue, and vice versa. However, the current issue I'm facing is that cli ...

javascriptjqueryhtml

What is the reason for the error message saying "The prefix 'h' for the element 'h:head' is not bound"?

Below is the xhtml code I have created: <html> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=Cp1252"/> </h:head> <h:body> <view> <h:form> <br/> ...

htmljsfxhtml

Discovering instances of a specific string within a larger string

My goal is to customize the default behavior of the alert function. Below is the code I am using: window.alert=function(txt) { waitOk='wait'; setMsgBox(txt); btnMsgOk.focus(); } However, I need this functionality to vary ba ...

javascripthtml