Where exactly is Bootstrap hiding?

Currently, I am in the process of working on a web application using Spring. My goal is to set up a bootstrap test table for the application and apply different themes to it. However, I am facing an issue where Bootstrap seems to be missing. I'm unsure if this is due to me entering the wrong path or if it's a more complex setup problem.

The layout of my files is currently structured as follows:

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

I have tried various approaches such as using the fully qualified name, starting from just the assets section, and experimenting with different '/' combinations, but so far, I haven't had any luck. I have looked through the Bootstrap documentation, but it doesn't provide much information for cases where CDN links are not used, which is not an option for me.

<link rel="stylesheet" type="text/css"
    href="/Grief/src/main/resources/assets/bootstrap/css/bootstrap.min.css" />
<link href="/Grief/src/main/resources/assets/font/all.min.css" rel="stylesheet">
...
<script type="text/javascript"
    src="/Grief/src/main/resources/assets/bootstrap/js/bootstrap.bundle.min.js" /></script>

and

<link rel="stylesheet" type="text/css"
    href="/assets/bootstrap/css/bootstrap.min.css" />
<link href="/assets/font/all.min.css" rel="stylesheet">
...
<script type="text/javascript"
    src="/assets/bootstrap/js/bootstrap.bundle.min.js" /></script>

Despite trying these and other methods, the table still does not display the desired Bootstrap style (as shown below).

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

=====The complete project layout=====

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

Chrome's console window:

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

Any assistance provided will be immensely helpful and appreciated.

csstwitter-bootstrapbootstrap-4

Answer №1

Consider taking this route as it leads to various other files:

<link rel="stylesheet" type="text/css" href="resources/assets/bootstrap/css/bootstrap.min.css">

Answer №2

To properly display these elements, ensure they are stored in the designated static directory. To reference them correctly, use the following format:

<link rel="stylesheet" type="text/css"
    href="/bootstrap/css/bootstrap.min.css" />
<link href="/font/all.min.css" rel="stylesheet">

Spring automatically identifies the static folder as the root location unless specified otherwise in the configuration settings. When referencing files, make sure to include the paths starting from the static folder onwards.

https://i.sstatic.net/4MpVx.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

Adjust the dimensions of polymer components (checkbox)

When attempting to adjust the size of the paper-checkbox, I experimented with changing the width and height properties in my CSS file. Additionally, I tried using transform: scale(2,2). The scale property resulted in blurriness, while adjusting the width ...

csspolymer

multiple divisions in the center

I am struggling with centering 2 divs, each containing 3 nested divs wrapped around a big main div. The code I have written is as follows: <div stye="margin-left:auto; margin-right:auto; width: 1210px;"> <div id="left" style=" float:left; width ...

csshtml

Update dynamically generated CSS automatically

Is there a way to dynamically change the CSS? The problem I'm facing is that the CSS is generated by the framework itself, making it impossible for me to declare or modify it. Here's the scenario at runtime: https://i.sstatic.net/IovGr.png I a ...

javascriptcssangularsassionic3

Place 4 divs within 2 divs, with one aligned to the left and the other to the right

I'm currently working on a small project using Angular 2 for an experiment, where I need to place 4 divs, each containing an image, within 2 divs. However, all the divs (with images) are stacked vertically instead of being placed next to each other, ...

javascripthtmlcssangularjs

JavaScript Issue Causing Jquery Carousel Dysfunction

I am having trouble with the slider I created using JS Fiddle. The link to the slider is not working and I need some assistance. Click here for the slider <div class="row"> <div id="myCarousel" class="carousel slide vertical"> &l ...

javascriptjqueryhtmlcss

Having trouble styling my Aside element correctly

I'm having trouble aligning my aside element on the page. It's not lining up properly with the rest of the content and is overlapping into the header area. How can I resolve this issue? Here's a snapshot of what it currently looks like: ht ...

htmlcssformattingformat

What is the interaction between CSS and URL fragments (the #stuff)?

Can URL fragments affect CSS behavior? For instance, let's consider a sample page at: http://example.boom/is_this_a_bug.html. You can view the code for this page on https://gist.github.com/3777018 Upon loading the page with the given URL, the element ...

cssurlfirefoxchromium

"Triangle Emblazoned Speech Bubble on a Clear, See-Through Back

I'm currently working on creating a semi-transparent speech bubble with a border. I'm using a ::before element for a larger triangle shape and a ::after element for a smaller triangle shape that sits on top to create the illusion of a border. How ...

htmlcss

Could we potentially implement a dropdown menu that spans the full width of the screen while still being contained within a wrapper set to a width of 1024

I have a query - can I create a full-width dropdown menu within a wrapper that has a width of 1024px (with contents centered on the screen)? My dropdown menu is causing some issues. Although the hover effect is not functioning yet, I am still working on st ...

htmlcss

Turn off the background color box with a single click

Whenever I click on a header menu item, the background changes along with it. Is there a way to prevent this from happening? https://i.stack.imgur.com/p6bJ9.png Take a look here ...

csswordpress

Having trouble with Google font displaying on React site but not on mobile devices?

After importing a Google font that appears perfectly on desktop and cross-browser, an issue arises on mobile where default fonts are shown instead. Below is a snippet from my App.css file: @import url("https://fonts.googleapis.com/css2?family=Turret+Ro ...

javascripthtmlcssreactjs

Ways to prevent a Div from shifting its position due to dynamic changes in height of another element

Looking for a solution regarding a 'bouncing loader' div that moves up and down in an infinite loop? Check out this jsfiddle However, the issue arises when I place a button below the loader, as it also moves in sync with the animation effect. I ...

htmlcss

How to Align the Button Vertically with the TextField in React Material-UI

Utilizing the Material-UI library for React, I have been working on creating a simple form with the following design: https://i.stack.imgur.com/LY3ZN.png My challenge lies in aligning the button with the TextField element. Adjusting the margin-top proper ...

cssreactjsmaterial-ui

Is there a way to showcase a block of Python code using a combination of HTML, CSS, and Javascript to enhance its

On my website, I want to display code blocks similar to how StackOverflow does it. The code block should be properly colored, formatted, and spaced out for better readability. All the code blocks on my site will be in python. def func(A): result = 0 ...

javascripthtmlcss

Enable divs to be interactively chosen

I have created two selectable divs that function like buttons. By using the left and right arrow keys, I am able to select one of the divs with this code: document.addEventListener("keydown", keyDownDocument, false); function keyDownDocument(e) { var k ...

javascripthtmlcss

Is it possible to assign a numerical value to the prev() function or the prevUntil() function in jQuery?

Is there a way to apply a specific style to the six previous and six next items of a list, while giving a different style to those outside of this range using only CSS? I am currently using a functional but redundant jQuery code for this purpose. Can the p ...

jquerycsslistmenuseries

Guidelines for organizing multiple checkboxes in a grid format

Hey there, I'm looking to create a 3x3 grid of checkboxes in a pop-up window. I found a similar example here: https://codepen.io/webdevjones/pen/qBapvrz. I tried using display: flex, but I'm unable to get the checkboxes in a grid format and the l ...

htmlcss

Is it possible to turn off the fallback color for bourbon radial gradients?

Is there a way to prevent the fallback from being applied when using the radial gradient mixin in Bourbon? I've consulted the documentation at , which states that the fallback is optional. However, no matter what I attempt, it seems that the primary ...

csssassmixinsfallbackbourbon

Is it feasible to adjust the positioning of invalid tooltips?

I've been trying to figure out how to adjust the position of my invalid tooltips to move a bit to the right and match my input position, but I haven't had any success yet. Here's the image I'm referring to: https://i.sstatic.net/fovSS. ...

htmlcssbootstrap-5

Exciting update in Bootstrap v4.0: Innovative approach to offsetting columns

The Bootstrap v4.0 grid system has introduced a new way of offsetting columns that I'm struggling to understand. The documentation doesn't provide much clarity on this. In previous versions, I was able to offset a column by a specified value like ...

bootstrap-4