Difficulty encountered when positioning a container using BootStrap 4

As a newcomer to the world of web development, I encountered an issue while trying to align a container on my webpage. Despite my efforts to center the container using (line 30), the page seems to update but there is no visible change. Can anyone help me figure out where I'm going wrong? I've also included my code below for reference.

<!DOCTYPE html>
<html lang="en">

<head>
      <!-- Required meta tags always come first -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
  
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <title>Ristorante Con Fusion</title>
</head>

<body>

    <header>
        <div>
            <div>
                <div>
                    <h1>Ristorante con Fusion</h1>
                    <p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
                </div>
                <div>
                </div>
            </div>
        </div>
    </header>

    <div class="container">
        <div>
            <div>
                <h3>Our Lipsmacking Culinary Creations</h3>
            </div>
            <div>
                <h2>Uthappizza</h2>
                <p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
            </div>
        </div>


        <div>
            <div>
                <h3>This Month's Promotions</h3>
            </div>
            <div>
                <h2>Weekend Grand Buffet</h2>
                <p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
            </div>
        </div>

        <div>
            <div>
                <h3>Meet our Culinary Specialists</h3>
            </div>
            <div>
                <h2>Alberto Somayya</h2>
                <h4>Executive Chef</h4>
                <p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. </p>
            </div>
        </div>
    </div>

    <footer>
        <div>
            <div>             
                <div>
                    <h5>Links</h5>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div>
                    <h5>Our Address</h5>
                    <address>
                      121, Clear Water Bay Road<br>
                      Clear Water Bay, Kowloon<br>
                      HONG KONG<br>
                      Tel.: +852 1234 5678<br>
                      Fax: +852 8765 4321<br>
                      Email: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3909c9d9586809a9c9db3959c9c97dd9d9687">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="beddd1d0d8cbcdd7d1d0fed8d1d1da90d0dbca">[email protected]</a></a>
                   </address>
                </div>
                <div>
                    <div>
                        <a href="http://google.com/+">Google+</a>
                        <a href="http://www.facebook.com/profile.php?id=">Facebook</a>
                        <a href="http://www.linkedin.com/in/">LinkedIn</a>
                        <a href="http://twitter.com/">Twitter</a>
                        <a href="http://youtube.com/">YouTube</a>
                        <a href="mailto:">Mail</a>
                    </div>
                </div>
           </div>
           <div>             
                <div>
                    <p>© Copyright 2018 Ristorante Con Fusion</p>
                </div>
           </div>
        </div>
    </footer>
  <!-- jQuery first, then Popper.js, then Bootstrap JS. -->
  <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
  <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>

</html>

Answer №1

It is recommended to perform a hard refresh on your browser whenever you make changes or additions to bootstrap classes in your page or CSS styles. Press F12 and right-click on the refresh icon, then choose Empty Cache and Hard Reload. Remember to have your webpage open before doing this.

https://i.sstatic.net/0pG5u.png

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

CSS table property remains unchanged following an ajax request

At first, my table is set to display none, making it invisible in the application. I am using an ajax call so that when a user selects an option, a table is generated and the display property changes from none to block, making it visible. However, the tabl ...

Parent: Using Flexbox vs Child: Choosing between inline-block or inline elements (Advantages of utilizing CSS3 flexbox?)

I've been exploring the capabilities of CSS3's new "display: flex" property and trying to determine its advantages. So far, I haven't discovered any significant benefits beyond creating a virtual horizontal line within each flex box containe ...

How can I position a floating label within a form-control in Bootstrap 5, while also setting its width to

I am currently utilizing Bootstrap 5 and attempting to incorporate floating labels with centered form controls that have a width set to auto, as opposed to the default 100% in Bootstrap. My challenge lies in getting the floating labels to remain inside the ...

Ways to showcase the object on the console

How can I display the object function in the console? When I try, nothing is displayed. Can you please help me figure out what went wrong? I know I must have made a mistake somewhere, as this is my first question on Stack Overflow. import React, ...

Using both Typescript and Javascript, half of the Angular2 application is built

My current project is a large JavaScript application with the majority of code written in vanilla JavaScript for a specific platform at my workplace. I am looking to convert this into a web application that can be accessed through a browser. I believe thi ...

What is the method for retrieving a property from an object contained within an array that is assigned to a property of another object?

How can I retrieve the name property from the subjects array within a course object? The database in use is mongodb. Modifying the course model is not an option. The course model : const mongoose = require('mongoose'); const Schema = mongoose. ...

Utilizing Sinon.js for inline callbacks upon successful execution

Currently, I am utilizing QUnit, Sinon.js (specifically fakeServer), and jQuery (for AJAX) to capture and test AJAX calls within my program. One issue that I am encountering pertains to the inconsistency where inline-function calls are not being executed. ...

Is my directive not displaying the desired content on the HTML page?

I'm facing an issue with a custom directive in AngularJS that is supposed to draw a circle using SVG. However, upon loading the page, the circle doesn't appear, and even the text within the template is not showing up. What could be causing this ...

The mistake in npm install is when the console logs a bug that is notorious for causing npm to malfunction

After reading this article, I successfully installed Node.JS version 9.4.0. $brew install node $node -v $v0.12.7 Next, I ran npm install -g grunt-cli for testing. H ...

I am looking to insert an array of a specific type into a Postgres database using Node.js, but I am unsure of the process

query.callfunction('fn_create_mp_product', parameters, (err, result) => { if (err) { console.log(err) callback(err); } else { if (result.status == 'success') { callb ...

fill collections within backbone

Looking to optimize populating a Backbone collection, I have come across the push method but it requires iterating over all items: define([ ... ], function($, _, Backbone, imagesCollection, imageTemplate, gridView) { var AppView = Backbone.View.ex ...

Revamping the purpose of a function found within an HTML <script> tag

index.html: <script id="change"> function methods(){ return 1; } </script> js.js: ... button.addEventListener("click", ()=>{ document.querySelector("#change").innerHTML = ` function ...

What is the technique for adding a blur effect to the top and right side of a div element?

Here is a link to my fiddle: https://jsfiddle.net/aod4rmx8/ .background{ position: absolute; left: 0; width:50%; right: 0; bottom: 0; top:0; background-color: #000; /*box-shadow: 100px 0 40px 6px rgba(0, 0, 0, 1);*/ -webk ...

unusual behavior observed in addEventListener

I have recently delved into learning about the DOM. I have a project in mind where I want to create a website with buttons that, when clicked, play different drum sounds. As part of my experimentation with JavaScript, I wanted to explore the this keyword. ...

Use Yii2 to pass an ID when a button is clicked in order to render a partial using

On the index page, I display all the rows and some fields from my model. When a button is clicked, I want a modal to appear with all the data from the corresponding row. When the button is clicked, I need an ajax call to render a partial view. This will i ...

Is it one form but with two buttons?

How can I identify which button was clicked in a form without using a hidden input field and JavaScript to set different values for each button? You can check out an example demonstrating this technique here: Is there a more straightforward way to achiev ...

An always-visible navigation menu

After exploring various resources related to the same topic, such as sticky navigation bars and others, I noticed that all the solutions provided involved the use of this link http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js. However, inc ...

Guide to redirecting to another page with parameters in React

After successfully integrating Stripe with React and processing a payment, I am trying to redirect to another page. await stripe .confirmCardPayment(CLIENT_SECRET, { payment_method: { card: elements.getElement(CardElement), ...

Scalable vector graphics require adjustments in scaling and translation, with variations between Chrome and Firefox browsers

I have an SVG diagram with some yellow points represented as circles. <html> <title>Yellow circles</title> <body> <svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" ...

What makes using the `@input` decorator more advantageous compared to the usage of `inputs:[]`

In defining an input on a component, there are two available methods: @Component({ inputs: ['displayEntriesCount'], ... }) export class MyTable implements OnInit { displayEntriesCount: number; Alternatively, it can be done like this ...