17

It's my first time working with ASP.NET, I'm trying to use a Bootswatch theme but when I try to use it the navigation bar at the top of the page turns into a weird drop-down menu.

Am I doing something wrong? I just replaced the current bootstrap.css with the new one from Bootswatch.

This is the result

Jjampong
  • 584
  • 1
  • 4
  • 19
  • 1
    If I remember correctly, the default version of boostrap that came pre-packed with the mvc templates was v3.x.x and boostwatch might be using v4.x.x. There is a slight change in the navbar from v3 to v4 so that might be causing that issue. – StaticBeagle Dec 26 '17 at 23:37
  • Okay, is there a way to fix it? – Jjampong Dec 27 '17 at 00:03
  • 3
    The easiest will be to downgrade to boostwatch that's based on bootstrap3, https://bootswatch.com/3/ , or alternatively you can update the html with the new bootstrap4 directives. – StaticBeagle Dec 27 '17 at 00:11
  • 1
    Now you can use latest version of Bootswatch (v4.1.3) - https://bootswatch.com/ Or you can use BootstrapPlusPlus. - https://bootstrapplusplus.com/ – Shouvik Aug 05 '18 at 09:29

8 Answers8

26

Check for the compatible verison of the Bootswatch page

1) https://bootswatch.com/

2) https://bootswatch.com/3/

Try these both. One of them should work

Soham Mehta
  • 576
  • 5
  • 4
15

The problem was that the version of bootstrap used in the default mvc-templates and version of bootswatch themes didn't correspond.

I fixed it by dowloading a compatible theme from this link https://bootswatch.com/3/

The easiest will be to downgrade to boostwatch that's based on bootstrap3, bootswatch.com/3 , or alternatively you can update the html with the new bootstrap4 directives

Thanks to StaticBeagle for hist quick answer!

Jjampong
  • 584
  • 1
  • 4
  • 19
0

I had the same issue and realised that within the my bootswatch css file it is using v4.x which is the current latest version. To resolve this, I simply downgraded to v3.x by navigating to the previous versions of bootswatch and copied the file content of the css file into my project and it worked. Here is the link to the downgraded version https://bootswatch.com/3/lumen/#navbar

Kenny Catalyst
  • 1
  • 2
0

I had the same problem, best way to fix this was to downgrade or use alternative version 3 or either 4 by using import URL tag 

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic");
/*!
 * bootswatch v3.4.1
 * Homepage: http://bootswatch.com
 * Copyright 2012-2019 Thomas Park
 * Licensed under MIT
 * Based on Bootstrap
*/
/*!
 * Bootstrap v3.4.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

and this just solved my problem thanks all

0

Bootswatch is a very good resource but you can also find good resources like some free templates made for ASP.NET MVC that use MDBootstrap (a front-end framework built on top of Bootstrap) here:

ASP.NET MVC MDB Templates

Ignacio
  • 910
  • 2
  • 12
  • 24
0

There may be Javascript or jquery file missing in your html

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js></script>

Add these in your HTML

Natesh
  • 331
  • 1
  • 4
  • 15
0

Bootswatch use data-bs-toggle, but doesn't work, I change for data-toggle and this just solved my problem

Chrono Vicky
  • 1
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 10 '22 at 03:58
0
  1. Use https://bootswatch.com/3/
  2. Use Chrome vs any other browser
coder
  • 4,201
  • 2
  • 15
  • 22