Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Bootstrap for ASP.NET MVC
  • Table Of Contents Toc
Bootstrap for ASP.NET MVC

Bootstrap for ASP.NET MVC - Second Edition

By : van der Westhuizen
4 (1)
Buy this Book
close
close
Bootstrap for ASP.NET MVC

Bootstrap for ASP.NET MVC

4 (1)
By: van der Westhuizen
Buy this Book

Overview of this book

One of the leading open source frontend frameworks, Bootstrap has undergone a significant change and introduced several features that make designing compelling, next-generation UIs much simpler. Integrating Bootstrap with ASP.NET's powerful components can further enhance its capabilities. This book guides you through the process of creating an ASP.NET MVC website from scratch using Bootstrap. After a primer on the fundamentals of Bootstrap, you will learn your way around and create a new ASP.NET MVC project in Visual Studio. You will move on to learn about the various Bootstrap components as well as techniques to include them in your own projects. The book includes practical examples to show you how to use open-source plugins with Bootstrap and ASP.NET MVC and guides you through building an ASP.NET MVC website using Bootstrap, utilizing layout and user-interface components. At the end of this book, you will find some valuable tips and tricks to help you get the most out of your Bootstrap-integrated and ASP.NET MVC-integrated website.
Table of Contents (10 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. Getting Started with ASP.NET Core and Bootstrap 4
chevron up
Icon
1. Getting Started with ASP.NET Core and Bootstrap 4
Icon
Files included in the Bootstrap distribution
Icon
CSS pre-processors
Icon
Creating an empty ASP.NET MVC site and adding Bootstrap manually
Icon
Adding the Bootstrap 4 files using Bower
Icon
Compiling the Bootstrap Sass files using Gulp
Icon
Installing Font Awesome
Icon
Creating a MVC Layout page
Icon
Summary
2
2. Using Bootstrap CSS and HTML Elements
Icon
2. Using Bootstrap CSS and HTML Elements
Icon
The Bootstrap grid system
Icon
Bootstrap HTML elements
Icon
Form layout and elements
Icon
Bootstrap images
Icon
Bootstrap figures
Icon
Summary
3
3. Using Bootstrap Components
Icon
3. Using Bootstrap Components
Icon
The Bootstrap navigation bar
Icon
List groups
Icon
Badges
Icon
Media object
Icon
Breadcrumbs
Icon
Pagination
Icon
Input groups
Icon
Button dropdowns
Icon
Alerts
Icon
Progress bars
Icon
Cards
Icon
Summary
4
4. Using Bootstrap JavaScript Components
Icon
4. Using Bootstrap JavaScript Components
Icon
Data attributes versus the programmatic API
Icon
Cascading dropdowns
Icon
Modal dialogs
Icon
Tabs
Icon
Tooltips
Icon
Popovers
Icon
The accordion/collapse component
Icon
The carousel component
Icon
Summary
5
5. Creating MVC Bootstrap Helper and Tag Helpers
Icon
5. Creating MVC Bootstrap Helper and Tag Helpers
Icon
Built-in HTML Helpers
Icon
Built-in Tag Helpers
Icon
The difference between HTML Helpers and Tag Helpers
Icon
Creating HTML Helpers using static methods
Icon
Creating helpers using extension methods
Icon
Creating self-closing helpers
Icon
Creating a Bootstrap button Tag Helper
Icon
Creating a Bootstrap Alert Tag Helper
Icon
Summary
6
6. Converting a Bootstrap HTML Template into a Usable ASP.NET MVC Project
Icon
6. Converting a Bootstrap HTML Template into a Usable ASP.NET MVC Project
Icon
Working with prebuilt HTML templates
Icon
Creating the ASP.NET MVC project
Icon
Creating the master layout
Icon
Adding a view for the home controller
Icon
Adding different page views
Icon
Adding charts to views
Icon
Summary
7
7. Using the jQuery DataTables Plugin with Bootstrap 4
Icon
7. Using the jQuery DataTables Plugin with Bootstrap 4
Icon
jQuery DataTables
Icon
Adding DataTables to your ASP.NET MVC project
Icon
Loading and displaying data in jQuery DataTables
Icon
DataTables plugins
Icon
DataTables extensions
Icon
Summary
8
8. Creating Bootstrap 4 ASP.NET MVC Sites Using Visual Studio Code
Icon
8. Creating Bootstrap 4 ASP.NET MVC Sites Using Visual Studio Code
Icon
What is Visual Studio Code?
Icon
Installing Visual Studio Code
Icon
Creating an empty ASP.NET project
Icon
Using Bower to add the Bootstrap 4 files
Icon
Using Gulp to compile the Bootstrap Sass files
Icon
Creating a MVC layout page
Icon
Summary
9
A. Bootstrap Resources
Icon
A. Bootstrap Resources
Icon
Themes
Icon
Add-ons
Icon
Editors and generators

Installing Font Awesome

Bootstrap 4 no longer comes bundled with the Glyphicons icon set. However, there are a number of free alternatives available for use with your Bootstrap and other projects. Font Awesome is a very good alternative to Glyphicons that provides you with 650 icons to use and is free for commercial use.

Note

Learn more about Font Awesome by visiting https://fortawesome.github.io/Font-Awesome/.

You can add a reference to Font Awesome manually, but since we already have everything set up in our project, the quickest option is to simply install Font Awesome using Bower and compile it to the Bootstrap style sheet using Gulp. To accomplish this, follow these steps:

  1. Open the bower.json file, which is located in your project route. If you do not see the file inside the Visual Studio Solution Explorer, click on the Show All Files button on the Solution Explorer toolbar.
  2. Add font-awesome as a dependency to the file. The complete listing of the bower.json file is as follows:
             { 
           "name": "asp.net", 
           "private": true, 
           "dependencies": { 
           "bootstrap": "v4.0.0-alpha.3", 
           "font-awesome": "4.6.3" 
           } 
         }
  3. Visual Studio will download the Font Awesome source files and add a font-awesome subfolder to the wwwroot/lib/ folder inside your project.
  4. Copy the fonts folder located under wwwroot/font-awesome to the wwwroot folder.
  5. Next, open the bootstrap.scss file located in the wwwroot/lib/bootstrap/scss folder and add the following line at the end of the file:
             $fa-font-path: "/fonts"; 
        @import "../../font-awesome/scss/font-awesome.scss";
  6. Run the compile-sass task via the Task Runner Explorer to recompile the Bootstrap Sass.

The preceding steps will include Font Awesome in your Bootstrap CSS file, which in turn will enable you to use it inside your project by including the mark-up demonstrated here:

<i class="fa fa-pied-piper-alt"></i>
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Bootstrap for ASP.NET MVC
End of Section 1
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon