- 00:00:02 Welcome to this video. Great to have you on board.
- 00:00:05 In this and the next videos of this mini-series here
- 00:00:08 I wanna dive into Bootstrap 4.
- 00:00:11 Which of course leads us to the question. what is Bootstrap 4?
- 00:00:15 It's a CSS framework.
- 00:00:17 And in this video, I wanna clarify what exactly it is, what it offers us, what makes up a CSS framework.,
- 00:00:24 and how we can add it to our next project, to our next website.
- 00:00:28 Before we then later in the series
- 00:00:30 dive into some of its features
- 00:00:32 learn how to use them and
- 00:00:34 build a tiny little website.
- 00:00:36 At least the front of it, with it.
- 00:00:38 So let's get started.
- 00:00:42 So I already mentioned: Bootstrap is a CSS framework.
- 00:00:46 But what does this actually mean? What is a CSS framework?
- 00:00:50 While you obviously know that CSS stands for cascading stylesheets and is used to style our website.
- 00:00:57 and typically
- 00:00:58 We do style a website by assigning styles to selectors,
- 00:01:02 like element or class selectors.
- 00:01:04 And often you just write a bunch of classes
- 00:01:06 which you then attach to your HTML elements to make them look in a certain way.
- 00:01:11 Now, there is nothing wrong with that approach.
- 00:01:14 But of course, the downside of this is (that)
- 00:01:16 You have to write all the rules all the styles on your own.
- 00:01:20 And this can become pretty cumbersome.
- 00:01:22 CSS frameworks like Bootstrap are there for you to help you.
- 00:01:25 They provide a lot of default styles
- 00:01:28 and a rich set of pre-styled classes, CSS classes.
- 00:01:32 which you can add to your HTML elements
- 00:01:35 to get certain styles and certain looks on your page.
- 00:01:38 It is especially great for quick prototyping
- 00:01:40 but it's also great for production-ready apps which you want to just give a certain style and where you don't want to write
- 00:01:46 all the styling on your own.
- 00:01:48 Now to be precise, Bootstrap covers mainly 3 things
- 00:01:51 The first is: some default styles
- 00:01:54 It sets up a default font size
- 00:01:57 Or in general, some default font sizes
- 00:01:59 Default paddings, margins,
- 00:02:03 colors. So a lot of default styling applied to
- 00:02:06 headings, paragraphs, and so on.
- 00:02:09 Besides that, it also offers a rich set
- 00:02:12 of pre-defined CSS classes.
- 00:02:15 And I will dive deeper into what is this in just a second.
- 00:02:18 Now, the third big thing it (does?) is the grid.
- 00:02:21 The idea behind the grid is that you can lay out your
- 00:02:24 page with such a grid.
- 00:02:27 Because if you think about a page, you will basically notice that
- 00:02:30 you can think of it as rows and columns.
- 00:02:33 Any Bootstrap gives an easy-to-use grid
- 00:02:36 which you define by using HTML elements
- 00:02:38 with certain CSS classes
- 00:02:40 and where the things will then be positioned correctly automatically
- 00:02:43 Bootstrap stylings.
- 00:02:45
- 00:02:49
- 00:02:52
- 00:02:55
- 00:02:58
- 00:03:01
- 00:03:04
- 00:03:07
- 00:03:10
- 00:03:13
- 00:03:16
- 00:03:18
- 00:03:21
- 00:03:24
- 00:03:27
- 00:03:30
- 00:03:31
- 00:03:33
- 00:03:36
- 00:03:40
- 00:03:43
- 00:03:46
- 00:03:48
- 00:03:51
- 00:03:54
- 00:03:57
- 00:04:00
- 00:04:03
- 00:04:06
- 00:04:09
- 00:04:11
- 00:04:14
- 00:04:17
- 00:04:20
- 00:04:23
- 00:04:26
- 00:04:29
- 00:04:31
- 00:04:34
- 00:04:37
- 00:04:40
- 00:04:44
- 00:04:47
- 00:04:50
- 00:04:52
- 00:04:55
- 00:04:58
- 00:05:01
- 00:05:04
- 00:05:07
- 00:05:09
- 00:05:12
- 00:05:15
- 00:05:18
- 00:05:20
- 00:05:23
- 00:05:26
- 00:05:29
- 00:05:32
- 00:05:35
- 00:05:36
- 00:05:39
- 00:05:42
- 00:05:45
- 00:05:48
- 00:05:51
- 00:05:53
- 00:05:56
- 00:05:59
- 00:06:02
- 00:06:05
- 00:06:07
- 00:06:10
- 00:06:13
- 00:06:16
- 00:06:19
- 00:06:21
- 00:06:24
- 00:06:26
- 00:06:29
- 00:06:32
- 00:06:35
- 00:06:38
- 00:06:41
- 00:06:45
- 00:06:47
- 00:06:50
- 00:06:53
- 00:06:56
- 00:06:59
- 00:07:01
- 00:07:04
- 00:07:07
- 00:07:10
- 00:07:12
- 00:07:15
- 00:07:17
- 00:07:20
- 00:07:22
- 00:07:25
- 00:07:28
- 00:07:31
- 00:07:33
- 00:07:37
- 00:07:40
- 00:07:43
- 00:07:46
- 00:07:48
- 00:07:52
- 00:07:55
- 00:07:58
- 00:08:01
- 00:08:04
- 00:08:07
- 00:08:09
- 00:08:12
- 00:08:16
- 00:08:19
- 00:08:22
- 00:08:25
- 00:08:28
- 00:08:31
- 00:08:33
- 00:08:35
- 00:08:38
- 00:08:41
- 00:08:44
- 00:08:47
- 00:08:50
- 00:08:53
- 00:08:56
- 00:08:59
- 00:09:02
- 00:09:05
- 00:09:07
- 00:09:10
- 00:09:13
- 00:09:16
- 00:09:19
- 00:09:21
- 00:09:24
- 00:09:26
- 00:09:29
- 00:09:32
- 00:09:35
- 00:09:38
- 00:09:40
- 00:09:44
- 00:09:46
- 00:09:47
- 00:09:51
- 00:09:54
- 00:09:56
- 00:09:59
- 00:10:02
- 00:10:05
- 00:10:07
- 00:10:10
- 00:10:13
- 00:10:16
- 00:10:19
- 00:10:21
- 00:10:24
- 00:10:27
- 00:10:30
- 00:10:33
- 00:10:35
- 00:10:39
- 00:10:42
- 00:10:45
- 00:10:48
- 00:10:51
- 00:10:53
- 00:10:56
- 00:10:59
- 00:11:02
- 00:11:05
- 00:11:07
- 00:11:11
- 00:11:13
- 00:11:16
- 00:11:19
- 00:11:21
- 00:11:24
- 00:11:27
- 00:11:30
- 00:11:33
- 00:11:36
- 00:11:39
- 00:11:42
- 00:11:45
- 00:11:48
- 00:11:50
- 00:11:53
- 00:11:55
- 00:11:57
- 00:12:00
- 00:12:02
- 00:12:05
- 00:12:07
- 00:12:10
- 00:12:13
- 00:12:16
- 00:12:19
- 00:12:22
- 00:12:26
- 00:12:29
- 00:12:32
- 00:12:34
- 00:12:37
- 00:12:38
- 00:12:41
- 00:12:44
- 00:12:47
- 00:12:50
- 00:12:53
- 00:12:56
- 00:12:59
- 00:13:01
- 00:13:04
- 00:13:07
- 00:13:10
- 00:13:13
- 00:13:16
- 00:13:19
- 00:13:20
- 00:13:24
- 00:13:27
- 00:13:30
- 00:13:33
- 00:13:35
- 00:13:38
- 00:13:40
- 00:13:43
- 00:13:46
- 00:13:49
- 00:13:52
- 00:13:54
- 00:13:57
- 00:14:00
- 00:14:03
- 00:14:06
- 00:14:09
- 00:14:12
- 00:14:15
- 00:14:17