CSS attributes and Bootstrap

Bootstrap:-Bootstrap is a free front-end framework for faster and easier web development

• Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins

• Bootstrap also gives you the ability to easily create responsive designs

• Why Bootstrap:-

• Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap

• Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops

• Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework

• Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Edge, Safari, and Opera)

Box Model:-the term "box model" is used when talking about web design and layout.

The CSS box model is essentially a box that wraps around every HTML element

Every box consists of four parts: content, padding, borders and margins

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
  • Border - A border that goes around the padding and content
  • Margin - Clears an area outside the border. The margin is transparent

Example

div {
  width: 100px;
  border: 1px solid black;
  padding: 50px;
  margin: 20px;
}