Bootstrap is one of the most widely used responsive CSS libraries around. Here is a list of the most useful Bootstrap properties you should consider using.
- Realign text to components with text-* – where * can be left, right, center, justify, or nowrap
- Transform text in components with text-* – where * can be lowercase, uppercase, or capitalize
- Remove list style with list-unstyled.
- Change a list to be on one line with list-inline
- list-group – are a flexible and powerful component for displaying not only simple lists of elements but complex ones with custom content.
- If adding items that are <a> or <button> no need for individual parents <ul> around each item.
- Set active link or button with the active class.
- To gray out or disable an item use the disabled class.
- Buttons inside of a list do not require the btn class.
- table – basic styling—light padding and only horizontal dividers.
- table-striped – to add zebra-striping to any table row within the <tbody>
- table-bordered – for borders on all sides of the table and cells.
- table-hover – to enable a hover state on table rows within a <tbody>
- table-condensed – to make tables more compact by cutting cell padding in half.
- table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
- Use contextual classes to color table rows (tr) or individual cells (td).
- active – Applies the hover color to a particular row or cell.
- success – Indicates a successful or affirmative action.
- info – Indicates a neutral, informative change or action.
- warning – Indicates a signal that might need attention.
- danger – Indicates a dangerous or potentially adverse action.
- form-group – wraps labels and controls with optimal spacing.
- form-control – elements are set to width:100%.
- form-inline – applies left-aligned and inline-block controls.
- form-horizontal – use Bootstrap’s predefined grid classes to align labels and groups of form controls in a horizontal layout.
- All form-group’s behave as grid rows.
- form-control-static – when you need to place plain text next to a form label within a form.
Checkboxes and Radio buttons
- disabled – provide a “not allowed” cursor on hover of the parent tag.
- By default checkbox and radio, groups will be stacked horizontally
- *-inline will display the classes in a series on the same line.
- Both checkbox and radio create a block that contains a <label><input type=”checkbox/radio”…>text</label>
Bootstrap includes validation styles for error, warning, and success states on form controls.
- Applies to parent element
help-blockwithin that element will receive the validation styles.
Note: Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.
- Button classes can be applied to <a>, <button>, or <input> elements.
- btn-lg, btn-sm, or btn-xs
- Similar functionality to buttons
- Classes get added to <span>
- label-(default, primary, success, info, warning. danger) identical functionality to similar button classes.
Making Images Responsive
- img-responsive – applies a max-width of 100%, auto height, and display blocked in relation to the image parent.
- center-block – centers the image to the parent.
- Images can be displayed as shapes using img-*, where * can be rounded, circle, or thumbnail.
To add new rows to your container you need to create a new <div> using the “row” class.
- Rows must be within a container or container-fluid <div> block for proper alignment and padding.
- Use rows to create horizontal groups of columns (max 12 columns per row).
- Content should be within columns, and only columns may be immediate children of rows.
- The negative margin will be outdented so that the content within grid columns is lined up with non-grid content.
- Rows can also be nested, but they have to nested inside a column block.
Columns must be inside a row block.
- Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices (xs, sm, md, lg).
- If more than 12 columns exist within a single row, each group of extra columns will, as one unit, wrap onto a new line.
- Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
- Grid columns specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
- Applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.
- To manage how the columns will stack on smaller devices you can group .col-* class elements together. For example, if you want 3 columns to be grouped together on medium devices or smaller you can manage the columns by adding <div class=”.col-xs-6 with .col-md-4″>. When displayed on mobile the columns will start out with a 50% width and bump up to 33.3% when viewed on a desktop.
- col-md-offset-* – Increase the left margin based on the value of *.
- col-md-push-* and col-md-pull-* – used to change the built-in order of the grid. Push moves to the right, pull moves to the left.
- If you wish to make a column hidden or visible when viewed on certain displays replace “col” with “visible” or “hidden”. For example, if you only want to show a column when viewed on smaller devices use visible-xs-*.
Custom Bootstrap Properties
Navbars containers that are responsive meta components that serve as navigation headers for your application or site. These containers support brand images, forms, buttons, text, and non-navigation links.
- They begin collapsed (and are toggleable) in mobile views
- Become horizontal as the available viewport width increases.
- <nav> tag
- navbar-fixed-top (bottom) – fixes the menu to the top or bottom of the page.
- navbar-static-top – creates a navbar across the full-width navbar that scrolls away.
- <div> can be used in place of <nav> but requires an additional attribute of role=”navigation”
- navigation components should be placed within a container or container-fluid <div> block for proper alignment and padding.
- Requires the JS collapse plugin to work.
- navbar-brand – replaces the navbar brand. Need to provide an image inside the brand block.
- navbar-form – all content places inside this block will be displayed vertically.
- Some form controls, like input groups, may require fixed widths to show up correctly within a navbar.
- navbar-left (right) – start aligning the elements from the left or right.
- To add a button to your navbar create an <button> and insert the additional class of navbar-button (this can combine with btn btn-default).
- To add text to the navbar add the class navbar-text to a <p> inside the navbar container.
- navbar-link – adds the proper colors for the default and inverse navbar options.
- navbar-inverse – changes the look of the navbar.
Menu Drop Downs
- If you wish to create menu (drop down) links:
- Create an outer container with<ol> or <ul> tags using the class nav and navbar-nav.
- Create a <li> with the class drop-down to create the dropdown container.
- Nest inside the dropdown <li> create a link <a> to toggle the menu by adding:
- aria-haspopup=”true” – enables the popup menu when clicked
- aria-expanded=”false” – when page loads menu will be collapsed.
- Following the link create a new list block with the class drop-down to add your menu items.
- To create separators in a drop-down add a <li> with role=”separator” and class'”divider”
- badge – class added to <span> to highlight unread items or messages. On mobile, this would be the number that pops up on you email icon when you have new unread messages.
A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.
- Add jumbotron class to a <div> block to add content to the jumbotron
- Does not require a container, but can be used with a nested <div> using a container or container-fluid for proper alignment and padding.
Media Objects use content blocks to Display content like blogs, tweets, or messages. These messages display with an image, title, and text.
- media-list – outer container containing one to many media blocks
- media – container for media block
- media-left (right, top, middle, bottom)
Carousel creates a scrolling headline containing components like images, button, and text.
- To create a carousel container you need to create a div with:
- class=”carousel slide”
- Carousel indicators are <ol> blocks using class=”carousel-indicators”. This block will contain the slides <li>.
- Add the following to your slides <li>
- data-target=”#carousel id” – attribute points to the id of the carousel.
- data-slide-to=”0″ – attribute specifies which slide to go to when clicking on the specific dot.
- Using the class active set the slide to be the starting slide.
- Add the following to your slides <li>
- Now you need to create the wrappers for the slides
- These go inside the carousel container, but outside the indicator block.
- Wrappers need to be added to a <div class=”carousel-inner” role=”listbox”> block
- Inside the wrapper create a <div> block using the class=”item” to add components to the slides.
- Use class active to set current slide.
- The slides will add to the carousel-inner in the order they are added.
- Left/Right Navigation Controls
- Add navigation controls to the carousel allowing the user to click back and forward thru the slides.
- These are links added within the carousel container outside of the indicator and wrapper blocks.
- Link blocks need to be defined using <a> tag:
- Must use class=”right(left) carousel-control” indicate link is for right or left control
- href=”#carousel id” – targets the carousel to control.
- role=”button” – allows us to add icon button
- data-slide=”prev(next)” – uses accepted keywords (prev, next).
- To add a glyph icon add a <span> inside the link block with:
- class=”glyphicon glyphicon-chevron-left(right)”
- Incase glyph is not available make sure to add alt text using another <span> inside link block:
- Add text inside the <span>..</span> to display.
We have found these sources to be ideal for learning more about Bootstrap and Responsive Design:
Bootstrap Properties Reference offers a better idea of what properties and classes exist for Bootstrap.
To continue taking our “The Benefits Of Responsive Design” class click here to return to where you left off.