Troubleshooting: Codepen glitch with Bootstrap and Google Fonts integration

Having trouble getting my page to be responsive and resize correctly in CodePen using Bootstrap. Strangely, it works perfectly on my Repl.it project. Unfortunately, this project needs to be submitted through CodePen, so I can't use Repl.it for it.

Any tips on how to make the Bootstrap library function properly in CodePen? I'm also experiencing similar issues with Google Fonts. Here's the link to the CodePen Project -> Tribute Page (codepen.io)

I am utilizing container fluid to ensure the page is responsive. It seems to work fine on Repl.it.

[The code is quite lengthy and messy, hence why I didn't include it.]

<div class="container-fluid main" id="main">

Just a heads up, the project is still a work in progress

htmlcssbootstrap-4codepen

Answer №1

For the best results, I recommend using the link provided in the official documentation. I tested it on codepen and it seems to be effective.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d06010600130232475c435c41">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

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

Encountering a permission error when attempting to save the index.php file?

We encountered an issue when trying to save the index.php file on FileZilla. The error message displayed was: Error: /home/devratnacricket/public_html/admin/index.php: open for write: permission denied Error: File transfer failed What steps should we t ...

javascriptphpjqueryhtmlcss

I am running into issues getting Tailwind CSS to work in my project. Despite following the installation instructions in the documentation and trying to learn this new CSS framework, it doesn't seem to

//I followed the instructions in the tailwind documentation to install and set up everything. However, when I try to use tailwind utility classes in my HTML file, they don't seem to work. Can someone please assist me with this issue? // Here is my sr ...

htmlcssreactjsvue.jstailwind-css

Retrieve the value of a dynamically added or removed input field in JQuery using Javascript

Check out this informative article here I'm looking for a way to gather the values from all the text boxes and store them in an array within my JavaScript form. I attempted to enclose it in a form, but I'm struggling to retrieve the HTML ID beca ...

javascriptjqueryhtmlcssnode.js

The PNG image keeps getting cropped

The bottom of a PNG image is being cropped off. View the picture illustrating the issue .loadMoreBtn-label { background-image: url(picture); background-repeat: no-repeat; padding-left: 30px; background-size: 23px 23px; background-posit ...

htmlcssimage

In IOS 9.0, flex items do not wrap to new lines and result in overflow

While it functions properly in other browsers, the issue arises in Safari. I require the flex items to occupy the entire width on screens smaller than 768px. Currently, they are taking up the full width of their container but remaining in a single line, wh ...

htmlcssflexboxmobile-safari

CSS to Vertically Display Input Values

Having an input field with type=number in a React application styled using styled-components, I am looking to have certain inputs display their values vertically. export const UnitValue = styled.input` ::-webkit-inner-spin-button, ::-webkit-outer-spin ...

javascripthtmlcssreactjs

Adjusting ThreeJS Canvas to Utilize Entire Space

Here is a simple example I created for demonstration: http://jsfiddle.net/8nbpehj3/37/ <html> <body> <div class='wrapper'> <div class='nav'> <div class='button'>Button</div ...

cssthree.js

The multi-item carousel slider in Bootstrap 4.0.0 pen is experiencing issues when integrated with Bootstrap 4.5.3

After searching extensively, I finally stumbled upon a multi-item carousel compatible with bootstrap 4 that meets all my requirements: It is completely responsive (displaying only one item on smaller screens) It features animations <div class="co ...

jquerybootstrap-4carousel

dividing a solitary string (plain text only, no HTML) evenly among three separate div containers

Recently, I encountered a frustrating dilemma. I'm trying to split a string between three divs, but they are not equal in height, so I can't divide the string based on character count. To illustrate the issue, I've created a small sketch. ...

javascriptphpjqueryhtmlcss

When angular directives fail to function properly when added dynamically

Could someone please help me understand why the directive below is not being called? It works when I directly add the directive to the button. I even tried adding it using $timeout but still no luck. <html> <head> < ...

javascripthtmlangularjsangularjs-directive

The absence of stylesheets being loaded is a common occurrence in a modular JavaFX Application that has been published in

My JavaFX application is modular and functions perfectly in loading all stylesheets when running through IntelliJ IDE. However, upon publishing the application as a PKG file for Mac platform and attempting to run it, no CSS styling is applied. While the P ...

cssjavafxmodularityjava-module

PHP consistently selects the final radio button element

Having an issue with submitting data from radio buttons to an ajax request for database transfer. -html <form class="siteInfo" action="ajax/site.php?nr=<?php echo $_GET['nr']; ?>" method="POST"> <input type="radio" name="transpor ...

phphtmlajax

The HTML file seems to be having trouble connecting to the JavaScript file

I am currently working on a small, fun website project and have an HTML file along with a JavaScript file in the same directory. However, my HTML seems to be unaware of the existence of my JavaScript file. It fails to execute the function during the load e ...

javascripthtml

Adjusting the length of the To, CC, and BCC text fields in web design

I'm developing a webpage that will collect email addresses for user notifications. I want to ensure the length limits of the 'to,' 'cc,' and 'bcc' fields. According to RFC 2821/3696, an email address can be up to 256 cha ...

htmlwebhtml-email

Creating a clickable dropdown link in the navbar with Bootstrap 4

I'm currently working with Bootstrap 4 and I have a menu item that includes a dropdown link. My goal is to make the text within the menu item clickable as a link, while still retaining the dropdown toggle functionality to allow for selection of other ...

bootstrap-4

Any tips or hacks for successfully implementing vw resizing on the :before pseudo-element in webkit browsers?

When using vw sizes on webkit browsers, a well-known bug can occur where they do not update when the window is resized. The typical workaround for this issue has been to employ javascript to force a redraw of the element by reassigning the z-index upon res ...

javascriptjqueryhtmlcsswebkit

When attempting to override the $primary variable in Bootstrap 4, it seems that the changes are not being applied to all other overridden Bootstrap variables in the _user

I am currently in the process of creating an HTML theme using BootStrap 4.3.1. My aim is to modify the $primary color variable in my _user-variables.scss file so that it affects all colors based on the theme specified in _variables.scss. I am relatively ne ...

sassbootstrap-4

I have created a Joomla Template that incorporates my own CSS through JavaScript. Is there a method to include a distinct version tag to my custom CSS file, such as custom.css?20180101?

My usual method involves adding a unique tag to the css path in the html section, but my template is incorporating custom CSS through Javascript: if (is_file(T3_TEMPLATE_PATH . '/css/custom.css')) { $this->addStyleSheet(T3_TEMPLATE_URL . &apo ...

javascriptphphtmlcssjoomla

Show the center portion of an image without needing to know the size, both horizontally and vertically aligned

I have experimented with various methods like table-cell, but none of them have been successful. All I am seeking is an <img src="" /> within an <a> tag. The <a> element has specific width, height, and overflow:hidden properties set. H ...

htmlcss

Updating the subject line in Outlook emails

Can you change the subject of an email that someone receives in Outlook? I believe it might be possible. Perhaps similar to how user agents are used for browsers? I'm fairly new to emails and my online searches have not been helpful despite spending ...

javascripthtmloutlookgmail