Highly suggested CDN for Bootstrap Tab styling

I'm encountering an issue with bootstrap.min.css and tabs. Using:

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

The page format looks correct, but switching tabs doesn't display the contents of the other tabs (they only show up when I go back to the first tab):

https://i.sstatic.net/U3sRY.png

Choose "Menu 1":

https://i.sstatic.net/AbPTr.png

When I try:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" />

The formatting isn't ideal:

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

However, the contents of the other tabs are displayed:

https://i.sstatic.net/Sh1z4.png

Is there a bootstrap CSS CDN that provides both good formatting and functional tabs?

Here is the complete HTML:

<!DOCTYPE html>
<html lang="en>
    <head>
        ...
    </head>

<body>
    <div id="campDisplay" class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');"> 

        ...

    </div> <!-- /container -->

    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tooltip.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-popover.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

    <script src="js/camp.js"></script>
</body>
</html>
htmlcssbootstrap-4

Answer №1

Utilize the reference provided below

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

To create form inputs with appropriate spacing, use the "form-group" class.

Answer №2

Here is the code snippet that I utilized to address the issue:

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Camp</title>
        <meta http-equiv=Content-Type content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta name="description" content="A Scout award tracking application">
        <meta name="author" content="Glyndwr (Wirrin) Bartlett">

        <!-- Le styles -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/css/tether.min.css" />

        <!-- Text Editor -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-bs4.css" rel="stylesheet">

        <!-- jQuery -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>

        <!-- Validate -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>

        <!-- Bootstrap Date Picker-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

        <!-- Text Editor -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-bs4.js"></script>

        <!-- Tether -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script>

        // CSS Styling
        <style type="text/css">
            // CSS styles for MyForm
        </style>
    </head>

    <body>
        <div id="campDisplay"  class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');">

            <div id="includedContent"></div>

            <form data-toggle="validator" role="form" id="showCampForm">
                <div class="page-header">
                    <h1>Camps</h1>
                </div>
                
                // Rest of the form goes here...

            </form>
        </div>

        <!-- Include all necessary scripts here -->
        <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tooltip.js"></script>
        <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-popover.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
        <script src="js/camp.js"></script>

        <script>
          $('#summernote').summernote({
            placeholder: 'Details of the Camp',
            tabsize: 2,
            height: 100
          });
        </script>
    </body>
</html>

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

Leveraging tailwind for achieving dynamic height responsiveness

My Tailwind-built page currently has a table in the bottom left corner that is overflowing, and I would like it to adjust its size to fit the available space and scroll from there. I want it to fit snugly in the bottom left corner of the browser viewport ...

csstailwind-css

Resizing a scrollable list using React Refs and UseLayoutEffect

Essentially, my issue stems from having a scrollable list with a set maximum height of '100vh'. I also have a detail card beside the list that contains accordion components. When one of these accordions is expanded, it increases the height of the ...

javascriptcssreactjsreact-hooksmaterial-ui

I'm looking for a way to showcase tasks in Fullcalendar that don't have a set end date

Is there a way to display a task in the full calendar when the task has a start date but no defined end date, such as a promotion that lasts until stock runs out? I would like the timeline for this type of task to extend indefinitely. However, since such ...

javascriptjqueryhtmlangularjsfullcalendar

Put the tab in the Shiny tabsetPanel over on the right side

Is it possible to have tabs on both the left and right sides of a tabsetPanel? For example, one tab on the right while others remain on the left, creating a layout like the one below: https://i.sstatic.net/oTZgH.png library(shiny) ui <- fluidPage( ...

cssrshinybootstrap-4

Expanding the CSS Search Box

Visit the link I've been working on coding a CSS text box. When you hover over the button in the provided link, you'll notice that the 'Type to search' functionality is working smoothly as it moves to the right. My current focus is on ...

css

What is the method for fetching a WebElement with a specific CSS attribute using JavascriptExecutor?

Currently, I am faced with a situation in which I need to locate a WebElement based on its CSS property, specifically the background-color. I successfully crafted the JQuery script below to pinpoint the element using the firefox console: $('.search-b ...

javajquerycssselenium-webdrivernullpointerexception

Failing to verify the presence of specific text within a dropdown menu using Selenium

Previously, I successfully implemented this code, however, the HTML/CSS for the dropdown has since changed and now I am unable to get it to function correctly. Below is the structure for the dropdown code, with specific text highlighted that I am trying t ...

javascripthtmlcssseleniumselenium-webdriver

How to incorporate multiple fonts into spark RichText using CSS - Flex edition!

I'm currently facing a challenge with embedding multiple fonts in a spark RichText component. Specifically, I am unsure about how to proceed with displaying bold font using <b> tags in HTML. The font I am working with has separate regular and bo ...

cssapache-flexfontsembed

Is it possible to get this numeric input working properly? [HTML5]

How can I create a button that generates a random number between 0 and a specified value x when clicked? Currently, my implementation is returning NaN instead of the desired random number. function generateRandomNumber() { document.getElementById("num ...

html

Guide to adjusting icon placement on top of an image using Bootstrap 4

Is there a way to overlay an icon on top of an image? .item { position: relative; } .des { color: #fff; text-align: left; } <div class="card"> <div class="item"> <img class="card-img-top" src="images/g33.jpg" alt="Avata ...

htmlcssbootstrap-4

CSS animation fails to execute

I created a rotating carousel using CSS. The carousel is constructed using the 'ul' tag. To navigate left or right, I dynamically add a 'li' element to the left or right of the list by cloning the necessary value and appending/prependin ...

jquerycssjquery-pluginscss-transitionscarousel

Placing an emblem after the header wording

Within my h1 tag, I have a header text that I would like to display alongside a small icon on the right side. The length of the text can vary, which presents a challenge in alignment. I attempted to use a background image with no repeat, but it ends up p ...

htmlcssimagebackground

Create an overlay that completely masks the height of a different element

Having a variety of elements on my screen that require overlays, I find myself facing a challenge. These elements come in different sizes and can be resized while the page is active. Although I managed to position overlays using CSS, the issue of 100% hei ...

jquerycss

Incorporating a scrollbar when a div exceeds the bottom of the viewport

I am encountering an issue on my webpage with a <div> that contains a <table> with rows of varying heights: <html> <head></head> <body> <div> <table> <tr>... <tr>... ... </ ...

cssscrollbarhtml

What is the method for asynchronistically loading Material ui fonts?

When using Material-UI, the fonts block the rendering of the first page. If no fonts are loaded, Material-UI defaults to using the Helvetica font until Roboto is downloaded. /signup (localhost) …media/roboto-latin-500.4b218fc7.woff2 (localhost) - 76 ...

cssreactjsfontsmaterial-ui

What is the safest method to insert data into a div element?

After utilizing ajax to retrieve a JSON file from the web, I successfully assigned one of the keys to a variable. Now, my question is how can I display the contents of that variable within a div tag? My initial approach was: theJsonKey = jsonObject.key; ...

javascripthtmlajaxjsonsecurity

What is the best way to apply a box-shadow to a specific side of an element?

How can I apply a box shadow to only the right side of a block element? Currently, I achieve this by wrapping the inner element with a box-shadow in an outer element with padding-right and overflow:hidden to hide the other three sides of the shadow. Is the ...

cssshadowbox-shadow

What could be causing issues with the JQuery .Resize() function?

I'm attempting to create a responsive layout where the content div adjusts itself when the user resizes the page. The top and bottom divs are static, so only the content div changes its size based on the page flow. $(window).resize(function() { v ...

jquerycss

A method for positioning each pair of <li> elements side by side

My goal is to arrange every pair of li elements next to each other (e.g. 0-9, A-B, C-D, ...). Currently, they are aligned one by one. <ul> <li class="alphabetRow"><a href="#" id="alpha_1" class="alphabet active" >0-9</a></li ...

htmlcss

Show a table containing dynamic information, featuring 10 rows for each column. The header should be present for each additional column that is added

I have incoming dynamic data that I need to display in columns, with 10 records in each row. Currently, I am able to display 10 rows as expected. However, I want the header to repeat each time an additional column is added. How can I achieve this using the ...

htmlcssdynamicbootstrap-4flexbox