Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Adding Bootstrap 3 to Angular 2 application

Posted on 2016-11-02
4
Medium Priority
?
805 Views
Last Modified: 2016-11-05
Hello there,

I am starting my first Angular 2 application and my basic setup is done. I want to know that how can I add bootstrap css library to my angular 2 project? .

regards
Zolf
0
Comment
Question by:zolf
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 41869967
Just include it in your index.html page in the <head>
0
 
LVL 13

Assisted Solution

by:F Igor
F Igor earned 1000 total points
ID: 41871104
You need to add a local copy of bootstrap library in HEAD section of your page. Download it from
https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip

<!-- Main CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" >
<!-- Basic Theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css" >
<!-- Main JavaScript library -->
<script src="js/bootstrap.min.js" ></script>

Open in new window




Or include directly using bootstrap's CDN
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- Basic Theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
<!-- Main JavaScript library -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

Open in new window

0
 
LVL 59

Accepted Solution

by:
Julian Hansen earned 1000 total points
ID: 41871231
@F Igor

Not quite correct - if you are going to use the bootstrap components then you should use the Bootstrap Directives for Angular rather than including the bootstrap default JavaScript file.
0
 

Author Closing Comment

by:zolf
ID: 41875844
cheers!!
0

Featured Post

Stressed Out?

Watch some penguins on the livecam!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

670 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question