I'm creating a web application without using bootstrap framework. But later I used the bootstrap carousal to my web application. Because I imported the bootstrap framework some of the styles I applied has changed, because different styles has been defined for those elements in bootstrap framework.
Now I want to add bootstrap framework only to the carousal section of my web application. So, I tried to change the order of the the link tags where I have imported the bootstrap framework and my custom style-sheet. But it didn't work.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel = "stylesheet" href = "css/main.css" type = "text/css"/>
Any help?
download bootstrap to your system and include bootstrap.css in your project and remove the conflicting classes from that file..
call that part in iframe with different webpage and links
Related
I am using Laravel 6 and want to change the structure of some of my routes in the web.php file. When registering the following route like this:
Route::view('/my-article', 'articles.my-article')->name('my-article');
everything works as it should.
But when changing the URL like this, adding /articles:
Route::view('/articles/my-article', 'articles.my-article')->name('my-article');
Suddenly no CSS is applied anymore. No Bootstrap, Fontawesome or own stylesheet. JS script on the other hand, and HTML of course, were loaded.
Oddly (for me): The other routes worked fine, all CSS stylesheets loaded.
I tried the same with another route that had a Controller action. I changed it from
Route::get('/{continent}', 'ContinentController#index')->name('continent');
to (adding /continents)
Route::get('/continents/{continent}', 'ContinentController#index')->name('continent');
And again, no styles were applied. Only JS scripts and HTML.
Why is that so? Why can't I add something to the URL by hand and why does it affect the loading of the CSS stylesheets?
Thanks and best regards.
EDIT:
Here is the part of my template.blade.php file where the styles are included:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Font Awesome Icons CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Own CSS -->
<link rel="stylesheet" href="css/style.css?{{ time() }}">
The issue is CSS Does not effect on website after bundle although all of bundle process is fine
From the view source code page i can see the css file but it does not take any effect on website. The code bellow is what i used to call css and saw from view source code page and from my layout file.
<link rel="stylesheet" type="text/css" src="/Content/css?v2">
Does anyone have any idea for this?
Thank you.
You used
External Style Sheet
With an external style sheet, you can change the look of an entire website by changing just one file!
Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:
your code
<link rel="stylesheet" type="text/css" src="/Content/css?v2">
try like ths
src should change to href
<head>
<link rel="stylesheet" type="text/css" href="/path/yourcssfilename.css">
</head>
My bootstrap in ASP.NET MVC is up-to-date (v4.1.3). When I use dropdown components, it does not work properly!
Then I use: and comment out #Style.Render(~/Content/css)
It goes like this:
How could I fix this? (I have checked carefully the version of bootstrap in Content folder. It have no problems. As the same as the latest one I download from getbootstrap.com
today when I open my project, it's css style went wrong. Navbar is not show the style. Then I detected that bootstrap 4.1.3 (lastest version) is not supported with the auto-created layout of ASP.NET MVC (it is now using 3.3.7 as I remember). I think that I should edit the class style. But last, thanks for your answers.
It looks like your bootstrap or jQuery reference is not being read. Check your raw html output (right click on webpage and view page as source. Note Bootstrap requires jQuery.
Here is an example of a jQuery and bootstrap order loading on html page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
I'm nearing the end of my first big mobile angular project.
Thus far I've just adopted default styles from the twitter bootstrap provided, bootstrap style sheet links look like this:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/toaster.css" rel="stylesheet">
<link href="css/mobile-angular-ui-hover.min.css" rel="stylesheet">
<link href="css/mobile-angular-ui-base.min.css" rel="stylesheet">
<link href="css/mobile-angular-ui-desktop.min.css" rel="stylesheet">
What should be my next steps to restyle default fonts, colors etc.
So for example, this style is set in the mobile-angular-ui-base css:
.text-primary{color:#007aff;}
In the bootstrap css I like has it defined as:
.text-primary{color:#b58900}
So if I want to inherit the theme / styles from the bootstrap is it just a matter of creating a further custom css superceding the styles again?
Or is there some way of regenerating the mobile angular css based on a bootstrap?
I have an ASP.NET MVC 3 project with a _Layout.cshtml and the css style sheet being accessed like this:
link href="../../Content/themes/base/jquery.ui.all.css" rel="Stylesheet" type="text/css"
This is fine for most of the views in my project but there is just one view that I would like to define the style sheet independently and in the view itself. Specifically in the head of the view. This means that the view would have to have it's own head and body tags independently of the _Layout.cshtml file.
Is this possible? If so can someone help me get started with it?
EDIT:
What I'm trying to do is put a style sheet in the head of this one view that would override the CSS from the _Layout.cshtml.
You could define an optional Razor Section in the head tag of your layout. Place it after your main stylesheet, and then it can be used in any views using the layout to bring in additional stylesheets that contain override rules.
_Layout.cshtml
<head>
<link href="../../Content/themes/base/jquery.ui.all.css" rel="Stylesheet" type="text/css">
#RenderSection("CssOverrides", false)
</head>
View.cshtml
#section CssOverrides {
<link href="../../Content/themes/base/jquery.ui.override.css" rel="Stylesheet" type="text/css">
<!-- additional stylesheets -->
}