Bootstrap & CSS James Kahng

Intro Websites require a lot of upfront setup to look passably good (HTML base, CSS style, etc.) Because of this, people have made libraries to make your job easier Bootstrap is a CSS library that holds tons of great CSS components that are automatically responsive and often animated!

How Bootstrap works Bootstrap is basically CSS (technically written in Less) It is set up so if you assign classes to your HTML tags, it will use the Bootstrap component assigned to that class. Ex.

Let’s jump right into it! Today we will make a Bootstrap playground page where we can showcase some cool Bootstrap features. First, download Bootstrap and jQuery Create a new HTML file locally

Connect our dependencies Connect our Bootstrap CSS and JS files and jQuery JS file. Alternatively, you can use a CDN (content delivery network) for these files, i.e. request them from a server every time your page is loaded. Whenever we want to make filler text, we can use the Lorem Ipsum generatorLorem Ipsum generator

Container Bootstrap was developed with many screen sizes in mind (designing for this is a huge pain without it) The container is the overall containing element 2 options container – size depends on screen size container-fluid – size is always the size of the window

Grid system 12 columns Settings for screen sizes (xs, sm, md, lg) Smaller settings work up through other screen sizes Using these settings, we can show different things at different screen sizes

Column classes 3 parts col Column Grid size Refers to screen size it refers to Number of columns

Grid system The grid can even be nested Parent grid element can be 3 columns long Child element has access to another 12 columns

Arranging elements Offset, push and pull options allow you to arrange your page depending on screen size When designing these pages, make sure you start mobile first! It is easier to design up from smaller screens than the other way around

Visibility Set things to be visible only at a certain screen size Useful for example when we want to hide information for smaller screens e.g. a graph/photo can be replaced with link Use ‘class=“visible-{column size}”’

Huge array of components Nice looking buttons, progress bars, radio buttons, jumbotrons and they are all responsive Let’s try a few List of components

Tabs One of the many interactive ways to organize your page Define the tab content and then link it to your tab navigation bar

Accordion Allows showing one chunk of data at a time Can be used to keep forms clean or allow people to take steps through the page

Carousel Slideshow of images Common design element for modern websites

Nav-bar Example

Coding challenge Create an About Me page with your story and picture using Bootstrap. Include some responsive elements. Include one of the interactive elements (tabs, accordion or carousel) Submit by 4/21 to

Great tools! Bootstrap online class (basically what I went over) Bootstrap online class Bootstrap documentation Lorem Ipsum generator Bootstrap free themes (color schemes) Bootstrap free themes Bootstrap templates