I am a new ASP.NET Webforms developer and I am trying to do a test application in ASP.NET where I can use it with Bootstrap. I already have a bootstrap template that I used with other projects and it works so well. However, when I integrated it with ASP.NET MasterPage, I got something really weired and I don't know why.
Kindly note that I am using Bootstrap 3.2 and I put all of the custom style of the template in another file called style.css.
Could you please help me in this regard and tell me how to resolve this issue?
A snapshot of the right style and the look and feel of the system (desired result):
A snapshot of the undesired result:
Here's a JSFiddle file that includes HTML and my css file, style.css. I appologize for the bad formatting and use of JSFiddle as I am totally new to this website.
All what I have done so far with ASP.NET MasterPage is copying whatever I have in the html page and embed it in the MasterPage within
<form runat="server"></form>
UPDATE:
How can I modify the CSS to recognize the main form tag in the ASP.NET MasterPage?
I'm having a problem getting the styles to cooperate. I downloaded the sample MVCPaging solution from his site and loaded the latest MVCPaging from nuget version 3.1.1. I copied the paging.css file from the sample solution and added it to my solution. You can see the problem in the image below. Both style sheets are being loaded as you can see from the debug window but yet their seems to be conflicts. Does anyone have a working css file compatible for bootstrap 3.3.5
I have the bootstrap.css bundled and loaded in the _Layout page and the paging.css has a link reference in the parent page for the partial that contains the pager
EDIT:
Removing the display:inline block css from the pagination element helps to get the pager inline but does not solve the problem. See second image.
but there are several other styles that are not working for this with bootstrap 3.3.5 including button and the coloring of the pager status section below the pager.
What it should look like, and remember I am using the same code from the sample. The only difference is the bootstrap.css version
One more update. In the sample solution I removed the reverence to the bootstrap.css bundle and set a link reference to the 3.3.5 cdn link and I got the same results as my project
Edit:
Here is a link to the files that are being used
bootstrap.css This is loaded in the _Layout.cshtml bundle
paging.css This is loaded in the partial view that contains the pager as a link reference
I installed Visual Studio 2015 this week. However I discovered that I have no intellisense in my Razor Views.
In Visual studio 2013 it worked fine.
My all my css files are under ~/Content/css/ (*.min.css), including bootstrap.
Here is the bundle config:
bundles.Add(new StyleBundle("~/Content/smartadmin").IncludeDirectory("~/Content/css", "*.min.css"));
When I try to use some bootstrap css in my razor view, nothing pops up in the autocomplete box. There should be a purple icon next to the bootstrap classes right..? There are no icons and no css classes listed which is available under the bootstrap package.
I did a sanity check and created a new MVC 5 application. This comes shipped with bootstrap. This works, all the intellisense is there.
How do i fix this issue? Surely it must be a problem with my Solution? Does it not like the css files to be under a sub folder under content?
UPDATE: So i copied in the unminified versions of the files, then it got picked up. So anyone know the reason why VS does not pick up minified files for intellisense?
It seems like the solution is to add non-minified Files to your solution in order for intellisense to work. I think it is due to Microsoft splitting out the minifier into a separate extension.
If your project type is an ASP.NET web application and you are using a 'Master page', the easy fix is to add a link to the css file in the master page. For example, in the master page 'head' section I add:
<link rel="stylesheet" href="Content/bootstrap.css" type="text/css" />
ASPX and other WebForm files using the legacy editor do not benefit from this implementation in VS 2013, but may adopt the new system in future releases.
But you can still use this feature as follows:
right click on the default.aspx file in the Solution Explorer
open with
select HTML Editor
ok
If someone comes here and the accepted solution doesn’t work.
In my case I had to remove the database project (.sqlproj) from the solution for the Bootstrap css class intellisense to work.
Remove the database project then restart Visual Studio.
And to be clear. This is not a good solution as removing the database project is not what you want. So, hope someone finds a good solution to this weird bug.
In my case, the intellisense not worrk because the path of bootstrap files was changed then files are not included in the project.
After adding files to the project works fine.
I know... It is a simple solution. Sorry!
I got it worked by ensuring all actual scripts are in place and in order.
<script src="Scripts/jquery-3.2.1.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/angular.js"></script>
<link href="Content/bootstrap-theme.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
After that I closed the visual studio solution and reopened it.Intelli-sense started working for bootstrap afterwards.
What worked for me: Link to the full bootstrap css, close the view(s), rebuild the solution, open the view. Intellisense worked. Change to the minified css, close the view, rebuild, open the view. Intellisense still working.
I have an mvc 3 razor web application that uses several graphic components from a library.
I have set all the component in the library, I need to add a css file to the library but I dont know how to do it.
so how can I add a css file witch is a library ressource to a cshtml file.
I tried this but it doesnt work:
#section Styles {
<link href="#Url.Content("~/file.css")" />}
add the rel=stylesheet attribute to that link
I was reading this tutorial from the DNN website
http://www.dotnetnuke.com/Community/Blogs/tabid/825/EntryId/2675/DotNetNuke-Skinning-101-Part-2.aspx
I found the tutorial to be very useful, however there was an issue when I tried to apply the CSS style. For example after adding the content pane in the initial index.html I have no idea where to place the CSS. If I add it to the head section then the parser will remove it.
Where could I add or reference the css file on for the skin?
thank you.
Not a DNN specialist, but:
A skin normally contains a stylesheet file called "skin.css" in the skins\skin-name folder.
The reference to this stylesheet is provided for you by the DNN framework.
To reference multiple CSS files, or to add css files with different names, you normally #import them from the skin.css file.