Bootstrap is a commonly-used style library. It allows users to quickly apply its CSS style rules
with class selectors. Style updates can add features or improve the usability of an application. For example,
Bootstrap, and other styling libraries for that matter, use a standardized color scheme for items like clickable
buttons. As the user of the helper library, you can apply the
btn btn-primary classes to a button
on your page and Bootstrap works behind the CSS scenes to render a blue button with white text in a legible
font. For more customization, you could also choose which color you want all of the buttons labelled with
btn-primary on your web page to be.
Straight out of the box, Bootstrap helps developers to get their web apps well-styled without needing to spend
much time writing custom CSS rules. The library also does some of the work of applying user-experience
best-practices. The button class
btn-danger for example, is defaulted to appear red, a color most
associated with danger.
Image of standard HTML buttons without CSS:
Same buttons with Bootstrap:
Bootstrap is already included in the given
_Layout.cshtml, which means that as long as your view is using that layout, you can access Bootstrap styling.
13.9.2. Bootstrap Layout¶
Much of what makes Bootstrap a powerfully helpful and time-saving style library is the layout logic it contains. In brief, Bootstrap uses a grid system of elements labelled containers and rows that respond dynamically to the state of a web page. Grid elements are given a size label that dictates when an item will shift or change how it is rendered. Broadly speaking, the grid system helps developers write applications that work well on screens of various sizes. Once you play around with it, you’ll find that the grid layout can help you write apps that respond to more than just changes in window size.
13.9.3. Bootstrap Tables¶
Bootstrap gives us some table styling that we can use to display events in
CodingEvents. Some table styling is
customizable, so read around Bootstrap’s site and explore adding different options to your table.
13.9.4. Bootstrap Forms¶
Bootstrap offers a number of classes meant to decorate form elements.
form-group helps organize items
within a form so that inputs and corresponding labels stay visually connected.
form-control can be applied
to any type of form input to give it the Bootstrap style and look.
13.9.5. Check Your Understanding¶
True/False: Style updates are considered refactoring, since they add no new features to a project, only make it look better.