Bootstrap 4 Concepts & Setup | BOOTSTRAP 4 TUTORIAL

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

You may also like