Bootstrap Fundamentals
This week was Bootstrap from Colt Steele The Web Developer Bootcamp.
https://getbootstrap.com/
Bootstrap Topics
-What is Bootstrap
-Adding Bootstrap to a Project
-Forms and Inputs
-Nav Bars
-The Grid System
Bootstrap 4 Topics
-Changes from 3 to 4
-Bootstrap 4 Colors and Background
-Typography
-Spacing Utilities
-Responsive Breakpoints
-Bootstrap Nav Bar
-Display Utility
-Box Model
Bootstrap 4: Flexbox and Layout Topics
-Flexbox and Layout
-Flexbox Utilities
-Bootstrap 4 Grid
What is Bootstrap
Bootstrap is a free and open source frontend web framework. Design templates are used for typography, forms, buttons, navigation and other interface components. Bootstrap was created in 2011 by Mark Otto and Jacob Thornton, Bootstrap purpose is to bring consistency across devices. The use of bootstrap results in the uniform appearance of tables and form elements across web browsers. Bootstrap uses jQuery plugins to provide dialog boxes, tooltips, and carousels.
Bootstrap is highly customizable, in that developers can remove unnecessary components, apply a theme and modify the uncompiled Sass files. Benefits of bootstrap include browser support, Mobile first approach, simple and easy to start, responsive design and looks, easy customization, clean interface or developers.
The purpose of bootstrap is to speed up development time by using pieces of prebuilt code to build the layout of a given webpage. Bootstrap has some very important features that make modern web design simple flexible and professional. Bootstrap uses a grid system which adds structure and organization to a webpage. The grid system divides the screen into smaller manageable parts than having to work with larger complex pieces.
The neat thing about bootstrap is that you can change the overall theme of the look and feel of your website presentation with bootswatch.
https://bootswatch.com/
It is easier to learn bootstrap when you have a foundation in CSS flexbox.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background
Adding Bootstrap to a Project
There are two ways to add bootstrap to a project. Bootstrap provides an CDN that is easy to copy the prewritten code into your project. Otherwise, it is possible to download bootstrap to your local machine then copy the files over into your project.
Forms and Inputs
Bootstrap has made it very quick and easy to create forms and input boxes with prewritten code templates. There are different styles for forms and input boxes to choose from. The prewritten code is customizable, so that you can change the look and feel to your liking.
Nav Bars
Bootstrap also provides prewritten code to create responsive navigation bars.
The Grid System
The grid system is the skeleton for the entire application. It allows us to add structure and layout to our application. Applications are able to scale and stack as they are resized to fit different devices sizes. The grid is made from containers, rows, and columns. There are 12 units in every row with 4 sizes xtra-small, small, medium, large. The 12 units can be resized to any of the 4 sizes to create responsive layouts.
Changes from 3 to 4
In bootstrap 4 flex-box is enabled by default, rems are used instead of px from bootstrap 3, global font size has changed from 14px to 16px. There are new utility classes for common CSS property-value pairs and margin padding spacing shortcuts. A new component called cards replaced three existing utility from bootstrap 3 such as panels, thumbnails and wells. More changes can be found within the bootstrap documentation.
Bootstrap 4 Colors and Background
Bootstrap has distinct names for the specific color you want to use. In bootstrap 3 the default colors were: primary is blue, success is green, info is a lighter blue, warning is yellow, and danger is red. In bootstrap 4 the default colors: primary is blue, danger is red, green is success, info is light blue. All the color classes start with text such as .text-primary.
Typography
There are display headings that come in four sizes with the 4th size being the smallest and the 1st size being the largest. Display headings are used to replace the default h1-h6 heading. Block-quotes made the font-size slightly larger than the default block-quotes.
Spacing Utilities
Borders utility gives borders to an element that you choose. Borders can be subtracted by doing border-0. Border-radius makes the borders edges rounded.
Responsive Breakpoints
Bootstrap is developed to be mobile first. Media queries create breakpoints to adjust to a given device screen size. There are four media query breakpoints
-Small
@media (min-width: 576px) { .. }
-Medium
@media (min-width: 768px) { .. }
-Large
@media (min-width: 992px) { .. }
-Extra-Large
@media (min-width: 1200px) { .. }
Bootstrap Nav Bar
The Nav Bar is made responsible by bootstrap; therefore, it can adjust to different screen sizes by small, medium, large, and extra-large sizes.
Display Utility
This is how you would change the display property.
.d-{value} for xs
.d-{breakpoint}-{value} for sm, md, lg, and xl.
This is used to help make websites responsive.
Flex-box and Layout
Flex-box is used to align content on a web page within two
directions, the default axis is from left to right. The start of
the flex-box is on the left side of a webpage, the end of the flex-
box is on the right side of a webpage. The cross-axis is top to
bottom. The start of the cross-axis is at the top and the end of
the cross-axis is at the bottom.
The justify-content property
The ways to move content around with flex-box from left to right
-d-flex justify-content-start
-d-flex justify-content-end
-d-flex justify-content-center
-d-flex justify-content-between
-d-flex justify-content-around
The ways to move content around with flex-box from top to bottom
-d-flex align-items-start
-d-flex align-items-end
-d-flex align-items-center
-d-flex align-items-baseline
-d-flex align-items-stretch
Flex-box Utilities
The direction property changes the direction that the content is laid out within a horizontal direction and the opposite side.
-flex-row to set a horizontal direction which is the default. Goes left to right.
-flex-row-reverse to set the opposite direction within the horizontal -direction. Goes from right to left.
-flex-column to set the content at the bottom.
-flex-column-reverse to set the content the top.
Can change the direction from a row to a column.
-Flex-column changes items from a row into a column.
-Align-items start will move items to the left side
-Align-items end will move items to the right side
-Align-self is used to align individual items.
Bootstrap 4 Grid
There are five tiers with xs, sm, md, lg, and xl.
Flex-box utility classes work for the grid system and components.
This week projects:
Landing page made with bootstrap
CodeRegina
/
purple
Landing page made with bootstrap
Landing page made with bootstrap
Top comments (0)