Bootstrap 4 For Beginners !! | Said Hayani | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Bootstrap 4 For Beginners !!

teacher avatar Said Hayani

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

15 Lessons (43m)
    • 1. Introduction

    • 2. Installation

    • 3. Typography

    • 4. Grid system part 1

    • 5. Grid system part 2

    • 6. Navbar part 1

    • 7. Navbar part 2

    • 8. Buttons

    • 9. Cards

    • 10. Alerts

    • 11. Images

    • 12. Forms part 1

    • 13. Forms part 2

    • 14. Class project

    • 15. Outro

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this class the you are going to learn  Bootstrap Framework  version 4, it's  CSS framework to build flexible  templates and responsive websites.

And this will teach you :


  • How to Use Bootstrap Grid System to build a responsive Layout like a professional 
  • The different uses of typography classes to style the content
  • Create a responsive images
  • Build a powerful forms
  • Create a nice cards to wrap the content
  • Create and customize Alerts
  • building responsive websites that work on all iPhone ,Pad , desktop and other devices 

Basic requirements:

The students  don't need to know much to learn bootstrap 4 just:

-Basic knowledges in HTML

-Basic knowledges of CSS

-Javascript is not necessary to use bootstrap

Meet Your Teacher

Teacher Profile Image

Said Hayani


Hello, I'm Said.I am a Full Stack Web Developer and Front End instructor,I am Writer at FreeCodeCamp,and author at Zeolearn  .

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: you guys will come to this class minute. You say Full stop weapons and front and instructor In this last rule, walk drunk with straps is it's primo and explore new future about strap and give me in this question how to use a great system to build. It's possibly out surmised on yours using experience so it's 2. Installation: basically these many different why toe OnStar undoubtable but drug and included inside your project You can just tell on fire directly and include them inside your perfect. Or you can use a boat from Cdn and by including city in links it in inside your predict off if you can fry in PM by trains Come on on running inside in your to Mila in PM on stubborn truck But now we are going to chose it First away on way into deLone Fight on uncle, Apparently in our project it's good, Don't warm. I look like a double again And I'm not going to double this fire because I didn't before just, uh you say they are up. It's ah defile extractive And it would be extract files on it is our fire after exciting and we just need to file put disruptive, escaped five and see what's dropsy is his fight and straight first ankle. Double skip five. It is always try choice unified version on uncoated it inside our project. And now this angled bootstrap CIA says Well, why'd unified version, uh, and now go to your text editor and open you up our project first this ankle The foot sub minute CSS and secondly, is it is uncalled for sub JavaScript file it just so now It's just if if I'm glowed but stop successfully just but a death. Which cross container? Just a button. Which class? Bitchin bitch n ray Marie, Let's take a look. Now on, Uh, obviously now we Uncle the Bastrop, Texas, in our bodies. So let's move to another bars. 3. Typography: But Shrub has which future for ah styling get content. So this take a look. It starts first with heading, you can create a large size off. Heading. Dissuading class is blight, followed by the number of sides. So let's take a look as what? An itch one. Its first. It's watch and see how it looks like it sounded like first of each one. Oh, let's keep it class display war to now Size has changes Now it has a big star, a large size. You can try this with the others on. You can just switch between this class is you can give it to supply two eyes. Maximus was displayed by three and full and five take a look. Now just this is different size loads of heading. Another thing is which the order, lest it's quite another list. This so it looks like this is another less. Now you can also remove this style right here. It's square. Despite any class this on styled, I just see now style is removed and I do so you can create on Elaine all the less it was. I didn't this body in the let's list in a lie class, and it's it gives class list and glide. I hate him. See, now all old atoms are aligned. And also another thing is, you get our in your content. Just give it Deb, Deb and Dick center last like this. It's but an inch won't show this street just to give its glass fixed center as you. Now it's come to the center of off debate and another thing is blocked. Got you can you can put it there on give it class. Look, goats Just give Lauren Lauren groups. Okay? This is blood God, you can see also this. Well, a court 40. Give it 44 blood. God. Okay, I did a fortune div dead and gives glass look good. Future See, I would look like is footer off block God. And also another thing can added a media class to scrape And it's true, it's given glass digs, digs Who's region meeting? Thanks. Next rigid I see now is half some style like committed takes and you go also switch. There's another colors you can colorize you content or heading just gives us give primary Try Primary three Mary and there's a danger and we'll success Yes. Okay. On this danger. And bring Marie. That's it. So I would look like now we can move to another section with another video that would another bootstrap future. 4. Grid system part 1: great system is the why you define Leo off the Web page and what's our four? Richest them? It's visit on flicks books. I think that making you LIAT more responsive under more flexible and the best is great system. It continued. 12 columns on We have to define Ah Leo upon this 12. So let's get started. No went toe create a basically art for a block. It's just simple log, so we used to go started. First thing is to create a Dev with class around is this is me. This is raw and we have to fight al columns And first in way, we need to create a header for our a block discarded Dev and give it class Go emanate 12 and call MD edgy to have as well and go as m it's with us where every but remember called empty it's for medium devices and cool, edgy is full. What device? I go s on go s m is for small devices. That means that we in medium device away great will take will take toe 12 corns and in media large devices also with take 12 guns as well and just equate a Jumbotron inside his head of chambers. Just give ah hiding a glass display one. And there's another deaf with glass block card on. Just give it a generated Lauren text sit and also just give a button Question. Which class, Megyn, did you end? Remarry? Good. Take a look Now how it looks in the browser. I just, you know, way have just quit a hater. Now we went, We'd a suitable just has great Another route right here. Disquieted death with glass The row And here where when to divide this route into two part On first part we take four comes plus well MD for and co LG for as well and a small device will take 12 comes Oh, as I am well and this is you would untitled this city of it side of all and we have to define another columns Would schools with, like, 12 guns It's the rice off combs And to see if it's called MD Age and call LG, it is well and quote s m 12 in small device will take 12. This is work with time. I discards steak. Look no, just squid are noble. Italy's it Instead of all glass place. I'm style it, Mr. Lee H in. I need him. Just this myth, like this eight and right here. Okay to stick. Look now, as you know, we have set about on heads section puts in a car Fictions on hair by the now we just finished depart first part celery smoked your another body. 5. Grid system part 2: what got its second part off? Great assistive. I just made some change right here into the civil. You're just added their less group at him. A glass to the list. And now let's move and great. Some cards we left It comes. Just create a around inside this columns and give it class. Ah, ro and quit another. Give which glass go, Andy for and call edgy for on co s a 12 and quit our car inside. This comes discredited def on Gives glass God on its own image. Ah, image on. Give it a glass if you remember. Ah, God! God! Image stuff in g doc Create. Now it's which, uh, Carter body it's created Live on gives class God body Give it a title. The secure class God fatal. I just got a little And quit a program which gloss God digs. Just give it. Ah, generate a taste. This remove some of it coolest along. Okay, uh, I'm gonna one okay. And I did a button to our God. It's quite a bunch. In which colossal Bt in between primary in the end, primary sprayed. No. People know she knows. You're so just great at first God. It's with many others. God, this it's multiplied this gold right here into six others columns. This could be in a bus. 3456 Uh, no, What you see now, this is loud. I would look like we just divide the address of columns, control four bombs, and now it's got take four grams. Ah, on if you see it and response. If you reset your your browser, just let's see you now how it is enough at card in smile the wisest take on terror in your space. This means that our criticism work fine on and responsive in our almost devices. He's right, I bet. Uh, this is I would look like I bid. You can also try iPhone eggs is I would look like in a pranks. So that said so. Let's move to another video 6. Navbar part 1: Now Bar is a powerful but Sark future. It's responsive, and it's working. Or in all devices and Mystic Logan and see how it book the sweet enough Dog. Which glass? No, but force of all Nobody expend on specific. Give it a nobody. Ah, I didn't have Ah, dog on here. Specifically, the background color often Now bar. Just give it a B G primary. And inside this nobody wait. Uh, it's with another brand and just cute going nowhere. And it gives class bar Brende and just you, Tom. And another thing is about to go still. But let's walk in the mobile devices. Wait, uh a button which class? Nobody juggler and inside this button just great to spend Which glass and of far Jokela a gone This will get in our unequal stick up Now I would look in Broza. I just see now we just wait a number but it's empty distress. I didn't mean you that's quite a depth off. So I have to add it toe to make you struggle work. This will have to added that a chewable I want to who loves and that its orbit Teoh my number just may never. No, On the average Hush on now, with smoke to the collapse Just step in and give it class Cool loves and of bar collapse. And there is another order it lists. And just to give its class no bar love on you said dissect, which lets Adam give it to class. No Ate him on inside this statement. Cut in its rive Go nowhere. Just give it about horse on its revenue with class. I love leak. Just copy and paste. Wait. Many others always ate him right here about, uh, services. And this is conduct. Uh, what was just, you know, this three is a good enough. I said, look, now I would work on on now. See? Now, just quit. Another bar on its moved to another part would not. 7. Navbar part 2: what? Come to the second part off. No bar. First, just change this number. Expend. It's not nobody's fault expended and just give it. Make it now bar expend lg! And now it's I did. I dropped down to our, uh, number another less. Aid him right here on just No, it's glass, not Aidan and a niche riff going nowhere and give it a glass of link and drop down on this to give options right here and great. I was going to give it. Does that are great? That's terribly. It it off just, for example, just my drop down whenever you want, you can name it whatever you want. Drop down and specified that the struggle tape of total that up hopes that to juggle, which is dropped down. No on this with a normative the day that will contain a drop down menu. Let's give it class drop down menu. I mean you and it will contain a less of a trip on Drop down eight times you've class drop down draw No, ADM. It was for examples. Provide, and it's great. Many other eight and Ricky profile and sitting and log out for looking out into browser hopes. Should we look, what's up? May drop down, drop down and drop down stubble. Dismiss. It'd on now just I didn't drop down Waas in with Not aided. Now it should work as you see now out. Drop down its work fine now and for Responsive. As you see now, nobody's working fine in other devices like Galaxy and also was walking on a bad as well. And it all the peaks allergies. It will also a swell, and now it's moved to Adam. Another video with another struck futures. 8. Buttons: but some questions are weighted Pretty and one of the best future bootstrap. Now let's take a low controI some examples, but our bottoms first and give it class beauty in Let's take a look Now it looked like I just you know, it's take, but from styles you can added money as cross as well, like for primary buttons, gives a cross between three Mary and she. Now we take a pre my style and you can do with same as aware what other the business like but in success on but in danger on but default sex is on. This is given danger, style and beautiful style, and you can just say which war Ning, Let's take a look now hotel like I just, you know, yeah, so awesome. And to create a small buttons, just great a buttons and give a glass. But sin followed by class. But since its end, this is a small button. Take a look. Now you take a small size and to create a larger button, just claws. But it kills you like this and this is a large button. Let's take a look. Now take ah, large size. You cannot while I did another class for stylist on Give Another Color like beauty and Primary. Yes, he said. And you took weird enough line bottoms. It's great Buttons gives class video N b t n Out line Remarry owns line Yeah, right here. Now it's steak. I know like style. You can do the same with others. Bottoms, all science, like success on danger and sex is Let's take a look on the browser What you see now, and I understand you can create a girl off bottoms now, but it's just take under equated there on a step and give class b TN go on its What we gonna do now? It's all this. But what he inside there? Let's take a look I would look like in the browser you see now all the butter, our bread raid in one graph since the Gulf of buttons. What is it we just got for the bottoms? Foot drop. Now let's take a look and undervalue with another future. What's drop 9. Cards: card. He's appointed drop, so it's great. Were and see how it looks like. That's quite a dead on. Give it class God and uncle image, uh, and give it class. Got image, top and weight body. And it's just great to death on. To give a glass gods body on here would contain a total This glass use class God title and a bar graph. It's sort of a Lauren. Thanks. Okay. And create a button and it gives class. But n bringing Matty, let's take a look. How would look like in the project? This is our god. What? He It's great. Another design. Our another different cars would hand it and forces so God can have hands on foot. I just quit another death and give it close. God And just another deal on in the gym on Give it class, God hater. And what a dead under Give its class God body and it's quit par alone bar graph. Hey! Okay. On also, you can create a forger. What did give on? Just give it glass. God Forger. This is Cordier. Say Clark Howard look alike, brother. This is our another god. Another state off God remote desktops. Let's come on this first. Hey, uh, no. Just always started another state off. God. Now let's move to another video. Another future, but strong. 10. Alerts: olives along Huge is playing Lex messages to users, so destroying example disc. Wait a dead on Give it class. I let and he won a lot of success. Just get at it. Costs. Let's success all that. Now let's take a look I would look like under brother his light success system thing large . And is Skopje under burst? Is there right here now? There's also other danger to student success to danger on, and there's also a let's warning on. It is also a large M flu state. Look, I would look like this is a tip Ahlers that yes, in both Trump and you can also added headings to do your let's just put it there on did and give Kloss a leads. Hitting squared some teams and sure, what street? It's true. You see how it looks like they're heading, and also we can create a clean the secret program and just with a league Andi, give it class leads wink, For example, Utah Home speak You see now which I would look like it's appropriate. Todo altitude Allah. Let's tries now it's kept on our video. Another feature 11. Images: to make your image responsive at his glass image floats your image. It's sick love and see our walk because quit image it's on. Includes image. Now let's take a look on. The browser would look like now it is not responsive. But if you add class image floats if we're response, fight now. I just did not all imagine to responsive and another future is somebody else. It's quit at image and it's ankle another image. I'm not different image and just give it class. Team is number Now They cook now is Tumnus style and it's just great. Many other something else right here. I see now this is our thumbnails about schtrops. Thumbnails. No, let's take a It switched on a video with another future, but drop. 12. Forms part 1: what's our full allow you to bed powerful and responsive forms, and they're really look right in design. So it's like, Look on the bright out for us. A script fall first thing is to rob your ample inside a dead, which glass formed group squirted dead and gives glass formed Rob on also a Dev. Which glass and what you drop free, open happened and great on boats. Which class just gives glass from control on boys older user name and just just added some other people right here for bus, water and email. Let's go pee in it based. There's for the Mile Flight e mile and this is for US awards on Street tipped a pass award on this plate and thoughtful submitted budget. He would submit tape with Google eyes, but in BGN says on a beach in block to take insight of log and give the value submit. Now I would like in the browser she's our from now bootstrap forms. On another thing, if you want I did a make on before the apple. Just give glass right a spare class off spin which gloss I am photographed. Tex, I just and port here your icon. I use material acorn so you can use what? Whatever. If you are going to be fair, all you like just and gloated much of wheel icon to someone used this symmetrical cones vehicles on Give it a con person. This is how it looked like I can if you added icon before and photographed. I always added there's a Skopje to other parties Cop This one right here on. I didn't either. This pain change this person in my Yes. You know how it looked like on this dismount under the part off farmers. 13. Forms part 2: there is some import that are hard to be styled. So both Trump provide us custom glasses to style this company int. So now just stay clock. I looked like that. I should start with range to skip clouds you quite a debt and give class form grub grow up and would label We're for ranged and great and boat with which type range and give glass custom range. Check out in the browser hopes. Something wrong us to off No hot. Here's how would look, look, range Now stylings off. Right now it's looking mice and then before and another thing is chick box and radio. This with death with glass form grub and great Another death with glass Custom control on what kind of glass weed control for chica bows on with imports with hip chick books on close and thoughts. Oh, custom control and boats and give it Heidi. Who would Chig walk? Chief Juan and under the label for chick warn on your cheek box. Let's take a look Now this was off. Something is rockin And what is it? Just Mr Glass glass named Causton Control label. Not should walk the walk Control. I just Okay, now it showed worker. You see now it worked. Fine. Why do you something? No. Really good. Cost control controls costume loss, not control. No, it won't find. And another thing is radio. Just copy and paste this form Grab right here on this Just teen check box. We drive you. Where did you hear? On four Tied. Right. You on a this. Give it male Female after equates to Teoh to ride You Okay, this forward for female? Okay, give it a name. Yeah, me. Oh, and this game for female on female. This is wounded for male on. Okay, well on this is full female. Stick up now in the browser. This is how now she could box It worked fine and actually looked right. 14. Class project: food project off the glass. You have to create a movie website using but struck full. Try to cute skill. You have to learn in this class and probably it should include God's greatest in buttons and forms or contact forms. You can try to cologne, Netflix website as example, or you can show whenever you want. And don't forget tried to upload your project into the classical re so I can get your I feel about so I wish you good luck. 15. Outro: on graduation. We just over the most also future off. What struck? You can grow new skin in trouble by practicing on building your own project struck and you can cheat. Officer communication on get bootstrap has come as well. And if you have any question about this class you got was a Jimmy and Eric modules that you got my article about Trump will find the lake and description below. And don't forget for me. Excuse. Yet it is many on the West Coast is coming up. So so see you another class.