CSS isn't functioning properly on 000webhost

Recently, I launched a basic website on 000webhost. The index.html file I uploaded looks like this:

<!DOCTYPE html>   
<html lang="en>   
    <head>   
        <title>Tabs</title>
        <meta charset="utf-8">        
        <meta name="description" content="Bootstrap."> 
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">   
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    </head>  

<body style="margin:20px auto">  

    <div class="container">
        <div class="row header" style="text-align:center;color:green">

            <ul class="nav nav-tabs">
                <li class="active"><a>Tab 1</a></li>
                <li><a>Tab 2</a></li>
                <li><a>Tab 3</a></li>
            </ul>

            <p><br></p>

        </div>
    </div>
</body>

Locally, the page should look like this: Desired Output.

However, when viewed on webhost, it displays as follows: Undesired Output.

The CSS and JavaScript scripts (bootstrap) I included in the file are not being utilized. Any thoughts on why this might be happening?

Answer №1

Make sure to check the console for any potential errors!

Currently, you are accessing your 000webhost page through https (secure), which is causing issues with loading assets that are hardcoded with http (insecure).

To resolve this, you have a couple of options. You can either switch back to viewing your site over http to ensure everything loads correctly:

Alternatively, it's recommended to update the references to your assets to be https-agnostic (starting with //), or directly link to assets using https. Here's an example:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

Answer №2

If you're experiencing issues, try clearing your cache to see if that resolves the problem. Alternatively, you can simply wait for your browser to pick up on the new changes, but this may take some time depending on your cache settings.

To clear your cache in Chrome:

  1. Go to the settings
  2. Search for "cache"
  3. Select "Clear browsing data"
  4. Adjust the time range if necessary
  5. Click on "Clear data"

Best of luck!

See visual demonstration here

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

Any tips for aligning the arrows correctly on Kendo menu items that have sub-items?

I am currently facing an issue with my horizontal Kendo menu, specifically with the spacing of the right-arrow icon next to menu items that have children. Despite trying various methods like adjusting padding-left, margin-left, and experimenting with pseud ...

Fluid container with fixed inner columns in Bootstrap

Is there a way in Bootstrap to have 2 columns within a non-fluid container? .col-xs-9 / .col-xs-3 I am trying to make the backgrounds for these columns extend all the way to the left and right margins. I attempted the following example: http://codepen.io ...

Expanding an HTML table with a click: A step-by-step guide

I have successfully generated an HTML table using JavaScript. However, I now need to display additional data in a row by expanding it on click. Table functionality: The table is populated with brands and their respective items. When a brand is clicked, ...

The Webix text area does not adapt to different screen sizes

I'm just starting out with Webix. I have created a form that includes a textarea. webix.ui({ rows:[ { view:"form", id:"log_form", elements:[ { view:"textarea" ,height:700}, { margin:5, cols:[ { view:"button", value:"Save" , type:"form" }, { view:"b ...

Issue with React Google Maps persists with StandaloneSearchBox in code causing it to be stuck on "Loading" status

I am developing a React JS page where I want to enable companies to register on my website and add their locations for rentals, purchases, etc. The main feature I need is to implement Markers on the map. While I have successfully integrated Google Maps ont ...

Creating a form using Flexbox and responsive design

Looking to implement a responsive login form using Flexbox and achieve a design similar to the mockup images. How can I accomplish this? .wrapper { display: flex; flex-flow: row wrap; text-align: center; background: linear-gradient(to bo ...

Retrieving JSON Information in HTML using Angular 4

Is it possible to retrieve specific data from a JSON file in my HTML using Angular 4's MatCellDef? Specifically, I am interested in accessing the FROM, TO, PERCENT, and SUBTRACT values of the RateBands Array. JSON Data Sample: [ { "year ...

Show a different image with a matching title each time the page loads

I need help creating a JavaScript script that will display a random image from an array along with an associated title each time the page loads. Is there a way to do this without using an onload function placed in the body tag? Currently, my code relies o ...

What is the process for utilizing window.caches to store pages within the window object?

While many demonstrations of saving an 'app shell' involve using a service worker, I have observed that it is also possible to access the caches object directly from the window. My inquiry is whether it is feasible to save pages for offline view ...

Struggling to Achieve Consistent Design Across Different Browsers When Styling a Calendar

My webpage has a calendar that retrieves data from the server using Jquery. Interestingly, the calendar looks perfect on Google Chrome but falls apart on Firefox. I can't seem to style it to make it look consistent across different browsers like in C ...

What is the best way to create a mirror effect on one div by clicking another div?

I have created a schedule grid and I am looking for a way to allow users to click on the UK hour and then have the corresponding U.S time highlighted. Is there a CSS solution for this? The functionality I need is to be able to select multiple hours. I have ...

Guide to positioning the layout inflater on the right side

I am facing an issue with the layout inflater where the inflated layout appears in the center of the page instead of the intended right corner placement. I have attempted to modify the gravity to right, but it did not resolve the problem. Below is a snipp ...

CSS Issue: When nesting divs, text moves to the top of the second page

Currently, I am using the following HTML and inline CSS: <div style="width: 975px; clear: both; float: left; text-align: left; margin: 0; background-color: #D3D3D3;"> <div style="width: 384px; float: left; height: 20px; margin: 0;"> ...

react-basic-photo-carousel: adjust size and dimensions

As a newcomer to React JS, I decided to use react-simple-image-slider for my image slider component. However, I am facing an issue with making the images responsive on mobile devices. I tried setting the width and height using vw, vh or percentage units, ...

problem of underlining links in bootstrap

Recently, I integrated a template into my ASP.Net MVC project and added all the required files to it. I made sure to include all the necessary calls to format files (CSS) in the layout file while removing any references to default styling files. However, ...

Encountering a 422 Unprocessable Entity error when the search bar in the frontend is empty - What is the best way to handle

My frontend setup includes a search bar with an input field By combining HTMX and FastAPI, I am able to dynamically fetch user information from a static list of dictionaries. I aim for dynamic results that update as I type, and the fetching of user infor ...

Is there a way to align the line under the hyperlinks to match the text size using CSS?

<div className={styles.container}> <ul className={styles.links}> <li className={styles.link}> <a href="/">Home</a> </li> <li className={styles.link}> <a href="/portfolio& ...

What happens when the overflow-hidden property is overlooked due to a child element being assigned absolute positioning?

When does overflow hidden not work as expected? If a child element overflows and has absolute positioning If the parent with overflow hidden is statically positioned When a second parent wrapper with relative positioning is added Why does this happen eve ...

Issue with CSS style on header with hyperlink

My CSS style includes a hyperlink for the "Title" to quickly navigate back to the home page. However, when I insert a table, this hyperlink gets disabled. /* JavaScript */ .header { position: absolute; height: 85px; right: 0; top: 0; left: 0; padding: ...

How to align a div with a background in CSS to the center

I'm attempting to center a text and an icon, but the icon is set within a background. How can I center the text and position the icon just to the left of the text? Here is the link to the fiddle with the code: jsfiddle <div class="error divErro ...