Twitter Bootstrap is a free set of tools for building web applications. It is one of the easiest CSS frameworks to use in the industry today. It comprises template files as well as optional JavaScript extensions. It provides a uniform, modern appearance and basic style definitions for all key HTML components. Since it is an excellent, responsive framework that is easy to use, most developers use it to speed up the client side of their development process.
In your project or application you may wish to use third-party components like Syncfusion alongside Bootstrap. However, Bootstrap applies CSS styles for HTML elements globally. This means that the third-party vendor components that you use in your project may have glitches in their appearance. This arises due to Bootstrap overriding the CSS styles of your components. The overhead involved in debugging to fix these CSS issues is a tedious task and waste of time.
Our JavaScript components can be used in the Bootstrap environment without any issues. We have made the necessary CSS corrections to prevent Bootstrap styles from affecting our JS components, so you can make use of Bootstrap together with our components to create responsive applications. The following sample showcases how to configure JS components together with Bootstrap:
<!DOCTYPE html>
<html >=”http://www.w3.org/1999/xhtml”>
<head>
<title>Essential Studio® for JavaScript : Accordion </title>
<!–CDN link for bootstrap.css–>
<link href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”
rel=”stylesheet” />
<!– style sheet for default theme(flat azure) –>
<link href=”http://cdn.syncfusion.com/js/flat-azure/ej.widgets.all-latest.min.css”
rel=”stylesheet” />
<!–scripts–>
<script src =”http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script src =”http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js”></script>
<script src =”http://cdn.syncfusion.com/js/ej.widgets.all-latest.min.js”></script>
</head>
Bootstrap.css and the script and theme files necessary for essential JS components are included.
The following code demonstrates how the accordion control is wrapped inside a container created using Bootstrap classes:
<body>
<!–Accordion component is wrapped inside the container created using Bootstrap classes–>
<div class=”content-container-fluid”>
<div class=”row”>
<div class=”cols-sample-area”>
<div id=”multiAccordion” style=”width: 500px”>
<h3>
<a href=”#”>Orubase</a></h3>
<div>
Orubase is the only mobile application development framework built especially for developing complex line-of-business mobile applications targeting iOS, Android, and Windows Phone platforms in the shortest possible timeframe.
</div>
<h3>
<a href=”#”>WinRT XAML</a></h3>
<div>
Essential Studio® for WinRT contains all the controls you need to build line-of-business tablet applications including grid, chart, map, tree map, SSRS report viewer, rich-text editor, PDF viewer, gauges, barcode, editors, and much more.
It also includes a unique set of controls for reading and writing Excel, Word, and PDF documents in Windows store apps.
</div>
<h3>
<a href=”#”>Metro Studio</a></h3>
</div>
Syncfusion Metro Studio is a collection of over 2500 Metro-style icon templates that can be easily customized to create thousands of unique Metro icons.
</div>
</div>
</div>
</div>
</div>
</script type=”text/javascript” class=”jsScript”>
$(function () {
// Declaration
$(“#multiAccordion”).ejAccordion({ multipleOpen: true });
});
</script>
</body>
</html>
All our JS components can be used together with Bootstrap which helps in creating web applications with rich UI interface.
By default all Essential JS components are provided with responsive support. Our components will adjust automatically based on the browser size.
We have not provided responsive support for our controls using Bootstrap. It doesn’t mean our controls will not be responsive when used with Bootstrap, however, we have not used the classes of Bootstrap to make our controls responsive.
Setting width to 100% will make all our components responsive. We have provided the file “default-responsive.css” in this sample file. Including this file will make some components like menus and dialogs change their appearance in mobile devices. We have also attached a sample in the file that demonstrates the responsiveness of the menu tab and accordion control when the width is set to 100%.
Syncfusion has currently no support for Bootstrap themes, meaning Essential JavaScript components do not replicate the look of Bootstrap themes. This is in the to-do list for future releases.