CODEWITHSUNDEEP
cssasp.netasp.net-mvctwitter-bootstrapbootswatch
Jjampong
Jjampong

Reputation: 624

Bootswatch theme not working correctly

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

Upvotes: 17

Views: 14397

Answers (8)

coder
coder

Reputation: 4409

  1. Use https://bootswatch.com/3/
  2. Use Chrome vs any other browser

Upvotes: 0

Chrono Vicky
Chrono Vicky

Reputation: 1

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

Upvotes: 0

Natesh
Natesh

Reputation: 371

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

Upvotes: 0

Ignacio
Ignacio

Reputation: 950

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

Upvotes: 0

user9032932
user9032932

Reputation:

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

Upvotes: 0

Kenny Catalyst
Kenny Catalyst

Reputation: 1

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

Upvotes: 0

Soham Mehta
Soham Mehta

Reputation: 604

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

Upvotes: 26

Jjampong
Jjampong

Reputation: 624

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!

Upvotes: 15

Related Questions