How to use External CSS Frameworks In CSS
Integrating external CSS frameworks like Bootstrap or Foundation can expedite styling and provide a consistent UI across your application.
- Install Framework: Install the desired framework via npm or include its CDN link in your application.
- Follow Framework Guidelines: Refer to the documentation of the chosen framework for instructions on usage and customization.
- Apply Framework Classes: Utilize pre-defined classes provided by the framework to style your elements.
You can install Bootstrap using npm or yarn
npm install bootstrap
Alternatively, you can include the Bootstrap CDN link directly in your application layout
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” rel=”stylesheet”>
Below example shows Bootstrap integration:
<!DOCTYPE html>
<html>
<head>
<title>Rails App with Bootstrap</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container d-flex justify-content-center align-items-center min-vh-100">
<button class="btn-success btn-lg">Welcome to GFG</button>
</div>
</body>
</html>
Output:
Output
How to Add CSS in Ruby on Rails?
This article focuses on discussing how to add Cascading Style Sheets (CSS) in Ruby on Rails.
Table of Content
- Using SCSS
- Using Plain CSS
- Using Inline Styles
- Using External CSS Frameworks
- Comparison of Different Approaches
- Additional Considerations
- Conclusion