I have a problem with the Bootstrap link which usually goes into the HTML file:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
It makes my navbar looks like:
(I need at least 10 reputation to post images, so I have to post the direct link)
https://i.imgur.com/dANnzzG.png
and after I remove the link:
(I need at least 10 reputation to post images, so I have to post the direct link)
https://i.imgur.com/EpnZCeK.png
But as you can see on the 2 picture, if I dont have the link, the stuff down the navbar ins't in the right position anymore. Please Help.
EDIT:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-6">
<app-list-employees></app-list-employees>
</div>
<div class="col-6">
<div><app-book-employee></app-book-employee></div>
<p></p>
<div><app-calendar-books></app-calendar-books></div>
</div>
</div>
That's the code for the component.
In the root of your project is the angular.json file.
If you want to use a CDN for bootstrap (like you use now), look for the styles object in this file (probaply between line 25 and 35), in there you can add your link. it should look like this:
"projects": {
"architect": {
"build": {
"styles": [
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
]
}
}
}
If you are using angular 6+ in your application it is best advised if you install bootstrap through npm as follows:
npm install --save bootstrap
After installing bootstrap add this line in your src/style.css file:
#import 'bootstrap/dist/css/bootstrap.min.css';
This will give you all the bootstrap styles so adding it in your index.html file or angular.json file is not needed
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() }}">
I have got a problem with Materialize Themes.
I tried to apply themes in various ways and it does not work.
I installed it by npm, added to angular cli.
I added theme to style in angular.json, imported to styles.css...
And it still does not work. - is not applying to elements:
My Cli console:
What have I done already?
In angular.json I added css files.
"styles": [
"./node_modules/#angular/material/prebuilt-themes/deeppurple-amber.css",
"./node_modules/#angular/material/prebuilt-themes/purple-green.css",
"src/styles.css"
]
In styles.css I added following import: #import "~#angular/material/prebuilt-themes/purple-green.css";
3 links added in index.html
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="lib/#angular/material/core/theming/prebuilt/deeppurple-amber.css">
put inside of your src/styles.css
#import '#angular/material/prebuilt-themes/deeppurple-amber.css';
I've been experiencing some problems trying to create columns for Rails using bootstrap. I installed bootstrap with "Integrating Rails and Bootstrap, Part 1 - the Installation". This is what I have so far:
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
</head>
<body>
<div id="main-container" class="container">
<div class="row">
<div id="A_Name_Title" class="col-md-6" style="background-color: LightSteelBlue">
<p>Test</p>
</div>
<div id="A_Time_Spent" class="col-md-6" style="background-color: LightSteelBlue" >
<p>Test2</p>
</div>
</div>
</div>
</body>
</html>
In the code, I am trying to create two columns stacked horizontally so I can use them as titles for the following rows. However, when I run the code I get:
I tried "Columns in bootstrap 3.0 only stacking vertically" but I still could not get it to work.
I am using Rails 5.0.1 with Bootstrap 3.3.7 and Ruby 2.2.6.
Edit - 02-16-17 - 5:00 PM
Moved the header into the correct place. Tried changing the "href="bootstrap.css" to "href="stylesheets/bootstrap.css" but RubyMine complained about that. Ignoring the complaint, the result was still the same. Followed the tutorial that #Fabrizio linked to and I still could not get it to work. With #Fabrizio's code, by replacing my link code with
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
I do get the result I want but from what I understand, if that website goes down, I lose access to the bootstrap.css
This is what I have for my "application.css.sass" file:
#import "bootstrap-sprockets"
#import "bootstrap"
Edit - 02/18/17
Turns out I was having issues with coffee script and by adding "gem 'coffee-script-source', '1.8.0'" and then running bundle install, I was able to import bootstrap through the use of the sass gem and the application.html.erb file. Thank you for all the help.
I am not sure that you can load css files with Ruby on Rails without following the Asset Pipeline, basically you will have an application.css file inside app/assets/stylesheets, the html file should have this manifest file in the head tag with the following syntax
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => "reload" %>instead of
<link rel="stylesheet" type="text/css" href="path to your css file" />
The manifest file application.css will include link to all the css files with the following syntax:
#import "bootstrap-sprockets";
#import "bootstrap";
Additionally with Rails you can include Bootstrap with a gem, it is called bootstrap-sass and you can follow the instructions at https://github.com/twbs/bootstrap-sass
Just include the gem as by the instructions in your Gemfile, run bundle install and then include it in your application.css..
Hear your can read about the asset pipeline.
http://guides.rubyonrails.org/asset_pipeline.html
I included your css in my text editor and this is the result I get, two vertical columns, for me a red and blue column. I think this is the result you would like to reach with a col-md-6?
This is the code I used:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div id="main-container" class="container">
<div class="row">
<div id="A_Name_Title" class="col-md-6" style="background-color: LightSteelBlue">
<p>Test</p>
</div>
<div id="A_Time_Spent" class="col-md-6" style="background-color: red" >
<p>Test2</p>
</div>
</div>
</div>
</body>
</html>
Everything seem good, if nothing works out, try creating new file
custom.scss in app/assets/stylesheets
and move the contents from application.css to custom.scss.
Also check the css selectors you used don't override any styles.
I'm trying to use Google's Material Components for Web in my project.
The problem is that when I'm adding the import statement, webpack doesn't output anything but exits with code 3221226505, according to npm.
Here's a snippet of my App.vue:
import 'material-components-web/dist/material-components-web.min.css';
The project's commit tree can be found here, and here's the npm log in case it contains anything interesting.
I hope someone can help me with this issue. If you find anything else unconventional in my repo, please let me know. Thank you!
Turned out I just forgot to define a loader for css files. Even though I'm still wondering why webpack just exits with some error code...
However, here's a part of my updated webpack.config.js.
module.exports.module.rules does now contain this:
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
The syntax you are using to import css is wrong, it should be like following in your index.html as is given in the documentation:
<link rel="stylesheet"
href="node_modules/material-components-web/dist/material-components-web.css">
But node_modules will not be accessible as you are using webpack, you can move this file to your static folder and import it like following:
<link rel="stylesheet" href="/static/material-components-web.css" type="text/css">
Following is complete code from documentation:
<!DOCTYPE html>
<html class="mdc-typography">
<head>
<title>Material Components for the web</title>
<link rel="stylesheet" href="/static/material-components-web.css" type="text/css">
</head>
<body>
//HTML where you use material components
<script src="/static/material-components-web.js"></script>
<script>mdc.autoInit()</script>
</body>
</html>
I'm a newbie when it comes to using Bootstrap plugins (just learned about it via codecademy)... I really would like to use this awesome bootstrap markdown plugin but fail to properly install it so I can call the getContent and parseContent from the textarea.
If you could help me I would really appreciate it it - a lot!
I have done this so far (mocking up the example from codecademy)
What I want:
What I did so far
Downloaded the following libs (jquery, bootstrap, bootstrap-markdown, to-bootstrap, markdown) via bower and copied the these files into the js/vendor folder
jquery.js (v2.1.1)
bootstrap.js (v3.1.1)
bootstrap-markdown.js (v2.5.0)
he.js (v0.4.1)
to-markdown.js (no version number)
markdown.js (no version number)
index.html
<!doctype html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-markdown.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet">
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/bootstrap-markdown.js"></script>
<script src="js/vendor/he.js"></script>
<script src="js/vendor/to-markdown.js"></script>
</head>
<body>
<div class="container">
<form>
<textarea name="content" data-provide="markdown-editable" rows="2" class="status-box md-input"_>### Hello World
*This* **is** the ***ultimate test***.
</textarea>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class='rows'>
<ul class="posts list-inline">
</ul>
</ul>
</div>
<script src="js/vendor/showdown.js"></script>
<script type='text/javascript' src="js/app.js"></script>
</body>
</html>
I actually think that this install the plugin correctly (my initial thought was that I didn't install the plugin correct which was why I couldn't make it work).
But how do I get the content from the textarea via the bootstrap-markdown API's .getContent() and .parseContent() instead of having to use the .getVal() and convert the string to html via showdown?
So far I can get it this way
app.js
$(".status-box").markdown({
savable:true,
onSave: function(e) {
$('<li class="col-xs-6 pull-left raw-markdown">').append( e.getContent() ).prependTo('.posts');
$('<li class="col-xs-6 pull-right end-markdown">').append( e.parseContent() ).prependTo('.posts');
}
});
Which is good. But I want to be able to access via the Post button instead.
I tried without luck:
var post;
$(".status-box").markdown( post = e.getContent() );
e represent the markdown edit only inside the onSave function.
So you have to get the markdown instance, I checked the plugin and it's possible (hacky but possible :-)
If you want to access it inside your post click function you have to access it in this way:
get the markdown element
get the markdown instance via data('markdown')
use the parseContent function
Code:
$(".btn-post").click(function (e) {
post = $('.status-box').data('markdown').parseContent();
console.log(post)
});
Demo: http://jsfiddle.net/IrvinDominin/fdpM4/
Have you download bootstrap - markdown.js file into your work environment. Check The link of bootstrap - markdown.js file. The lib of markdown.js may be missing in your code.
UPDATE
HI #Norfeldt,
For This you have to follow Below Instructions.
1. Check Compatibility versions between bootstrap.min.css and bootstrap.min.js.(i.e you must maintain same versions for both the things.) Because http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css Link contains Bootstrap version 3.0 css and http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js Link contains Bootstrap 2.3.2 version JS.
2.Maintain Correct root Directory path.
<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>
<script src="js/bootstrap-markdown.js"></script>
must be
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/to-markdown.js"></script>
<script src="js/vendor/bootstrap-markdown.js"></script>
3. Which version of bootstrap-markdown.js lib you are using.
Check this one
Version Compatibility with Bootstrap
Bootstrap Markdown v2.x only compatible with Bootstrap 3.x
Bootstrap Markdown v1.x only compatible with Bootstrap 2.x
Note: Download bootstrap files from Here add add to your html file.
Change path of these js file
<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>
To
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/to-markdown.js"></script>
Hope this will help you...