# Bootstrap [getbootstrap.com](https://getbootstrap.com) Bootstrap requires next to a css file an corresponding .js file. Download the files into your css and js folder. [jQuery 3.5.1](https://code.jquery.com/jquery-3.5.1.slim.min.js) [Bootstrap 5.1.0 JS](https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js) [Bootstrap 5.1.0 CSS](https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css) (Alternatively you can insert them via [jsDelivr](https://getbootstrap.com/docs/5.1/getting-started/download/#cdn-via-jsdelivr). This requires developing your web site on a localhost.) The bootstrap grid system is based on the same `flexbox` property as the »flexbox grid« framework. In addition both use almost the same syntax, so we don't have to change much from the previous code. Responsiveness works right away. Syntax for ordering is ```html first-sm --> order-sm-first ``` Syntax for alignment: ```html start-xs center-md end-lg --> justify-content-center ``` (Not responsive.) Syntax for offset: ```html col-sm-offset-9 --> offset-sm-9 ``` But the grid layout is only one part of Bootstrap. It offers easy solutions for a huge range of elements: [Navbars](https://getbootstrap.com/docs/5.1/components/navbar/), [Modals](https://getbootstrap.com/docs/5.1/components/modal/), [Accordion](https://getbootstrap.com/docs/5.1/components/accordion/), [Collapse](https://getbootstrap.com/docs/5.1/components/collapse/), [Scrollspy](https://getbootstrap.com/docs/5.1/components/scrollspy/), ... But in return it will have an impact on your design. For e.g. if we inspect the headline we identify several attributes styled by Bootstrap. (Of course we can override all of them.) If we only need the grid layout it may be better to use ![bootstrap_flexboxgrid_comparison](img/bootstrap_flexboxgrid_comparison.jpg)
Complete layout: ![bootstrap_md](img/bootstrap_md.jpg)
`index.html` ```html bootstrap grid

Responsive + Reordering

box-1
col-xs-12 col-sm-6 col-lg-4
box-2
col-xs-12 col-sm-6 col-lg-8 order-sm-first
box-3
col-xs-12 col-sm-5
box-4
col-xs-12 col-sm-7

Auto width

box-1
col-xs-12 col-sm
box-2
col-xs-12 col-sm last-sm
box-3
col-xs-12 col-sm

Alignment

row justify-content-center
col-xs-12 col-sm-6

Offsets

col-xs-12 offset-sm-9 col-sm-3
col-xs-12 offset-sm-9 col-sm-3
col-xs-12 offset-sm-9 col-sm-3
col-xs-12 offset-sm-9 col-sm-3
```
`style.css` ```css body { font-family: sans-serif; } .row { margin-bottom: 20px; } .box { height: 200px; color: white; display: flex; align-items: center; justify-content: center; text-align: center; } .box { background-color: rgb(9, 102, 72); } .box-2 { background-color: rgb(45, 75, 199); } .box-3 { background-color: rgb(175, 26, 191) } .box-4 { background-color: rgb(139, 184, 72) } ```