0

I am working on a MVC project where I need a particular view to apply the bootstrap css style on two elements: a table and a multiselect, the css files in question are:

  <link href="~/Content/themes/bootstrap/bootstrap-3.1.1.min.css" rel="stylesheet" />
  <link href="~/Content/themes/bootstrap/bootstrap-multiselect.css" rel="stylesheet" />

The problem is that by including those two lines in the code, it completely changes the style of the whole page. So I want to know if there is a way to apply only to those two elements these styles.

First thing I did was to create a single file to unify these two files into one single being (According to this link):

<link href="~/Content/themes/bootstrap/all-bootstrap.min.css" rel="stylesheet" />

These are the items to which to apply.

<select id="chkRecIds" multiple="multiple" />

<table id="table_ODC" class="table table-striped table-bordered table-hover">
...
</table>

Thank you very much, if you need more information let me know.

Community
  • 1
  • 1
Glegan
  • 110
  • 1
  • 8

1 Answers1

2

When you apply the whole library to the page, it changes everything, since default bootstrap library includes typography, form elements .. etc. What you can do is - build your own bootstrap library and only include table and forms. I'd also edit the library and append a specific class, so you can isolate your specific chunks of elements that you'd want to style.

You can customize your boostrap build here: http://getbootstrap.com/customize/

Kirill Chatrov
  • 822
  • 6
  • 11