1 00:00:01,070 --> 00:00:07,850 Hello, in this Bistrot video, I am going to show you this Bassin utility, so this bathing utility 2 00:00:08,150 --> 00:00:17,570 allows you to add basically bathing use in the margin or padding feature using built bootstrap classes. 3 00:00:17,840 --> 00:00:20,180 So to implement it is pretty simple. 4 00:00:20,390 --> 00:00:27,020 What I would do is provide a link to this description, which shows you all of the different features 5 00:00:27,020 --> 00:00:33,200 available for the space and utilities that you have and for margin fee for padding. 6 00:00:33,530 --> 00:00:40,220 You can also select if you wanted to be the top bottom left or right or exfoliant, both left and right 7 00:00:40,220 --> 00:00:45,950 or y for both top and bottom right between zero and one. 8 00:00:46,190 --> 00:00:50,480 And there is the calculation of what the actual spacing is. 9 00:00:50,750 --> 00:00:53,810 And you can also set the classes to autism. 10 00:00:53,830 --> 00:00:54,920 There's an example here. 11 00:00:55,160 --> 00:00:58,730 I will show it more in depth in a second. 12 00:00:58,920 --> 00:01:04,820 I can also do something called a great gap on the negative margin as well and horizontal centerin. 13 00:01:04,820 --> 00:01:06,460 So feel free to check them out. 14 00:01:06,620 --> 00:01:10,760 You can also target a particular screen size, which again, I will show you. 15 00:01:11,240 --> 00:01:20,660 OK, so we have this middle column 12 and all the background color of red just so you can see what is 16 00:01:20,660 --> 00:01:23,750 happening relative to its content. 17 00:01:24,050 --> 00:01:29,480 So white is kind of hard to see something new, slightly evocative. 18 00:01:29,810 --> 00:01:31,310 And I'm going to put the text. 19 00:01:31,320 --> 00:01:32,200 Hello, Will. 20 00:01:32,720 --> 00:01:40,720 So this is what it looks like without any basic utility added to it by default is a bit of spacing with 21 00:01:40,730 --> 00:01:45,170 us to do with the Kodesh, 12 rows, that sort of stuff. 22 00:01:45,470 --> 00:01:48,170 And if I add a class of 23 00:01:50,810 --> 00:01:58,130 em so that we're affecting the margin now, we're adding margin to the left of it for dush five, we're 24 00:01:58,130 --> 00:02:00,560 doing the maximum margin there. 25 00:02:00,770 --> 00:02:03,410 So far it has moved across four. 26 00:02:03,500 --> 00:02:08,720 Inspect the element and you go hover over here. 27 00:02:08,990 --> 00:02:11,660 As you can see, we have some margin left. 28 00:02:11,660 --> 00:02:14,330 If I was to take that, this is what it looked like before. 29 00:02:14,570 --> 00:02:15,060 This is why. 30 00:02:15,140 --> 00:02:21,410 Look, with the margin left, though, let me show you what we can do with padded walls to add another 31 00:02:21,410 --> 00:02:21,860 div. 32 00:02:22,190 --> 00:02:25,100 And this call is the text. 33 00:02:25,910 --> 00:02:32,300 And in this case, I am going to reload this if I look without any spacing, utility added. 34 00:02:32,570 --> 00:02:38,360 But add a class of people putting a dash out. 35 00:02:38,360 --> 00:02:47,630 So we're going to say that only apply this putting on extra extra large screen sizes and five nine reload. 36 00:02:47,630 --> 00:02:48,530 We get padded. 37 00:02:48,650 --> 00:02:54,710 That's being applied to the left, the top, the right in the bottom, because we did not specify specifically 38 00:02:54,710 --> 00:02:59,690 that we wanted it to be left to right. 39 00:02:59,690 --> 00:03:06,500 We wanted left only we could just do something like that or t for top that sort of stuff. 40 00:03:07,010 --> 00:03:14,630 But if we go back, if I saw so it goes just below extra, extra large as the pattern has now disappeared, 41 00:03:14,900 --> 00:03:22,790 you can obviously add separate padding, utility classes for margin into the class for different breakpoints. 42 00:03:23,000 --> 00:03:24,620 So feel free to experiment. 43 00:03:25,040 --> 00:03:26,090 Really simple. 44 00:03:26,090 --> 00:03:28,370 If you have any questions, feel free to call me a message. 45 00:03:28,370 --> 00:03:32,090 And as usual, I look forward to seeing you in the next video.