React Bootstrap Tutorial

using bootstrap with react is one of my favorite things to do because it's combining a library and a framework i really like using in this example we'll be building out this using react bootstrap and we'll be building out some components in our react application that utilize bootstrap if you haven't heard of me before i'm adrian from australia i do videos around design and development so if you haven't already hit like and subscribe and let's just jump straight into it before we begin we need a react application and we can do this in a number of ways but one of the easiest is just to use create react app or cra what i'm going to do is open up a new terminal and type in npx create react app and the name of our application in this case react bootstrap tutorial once this is finished we can browse directly into it envious code and in here we're going to install a couple of extra things the first thing i want to do is run yarn add bootstrap and also maybe react bootstrap these two will be added to our packages.json and we'll be able to start using them immediately to start our react application i'm going to type in yarn start this will open it up in a chrome window and i'm going to just move it here side by side we're going to close off package.json and the console and we're going to browse into src and to app.js in here we can start importing react bootstrap and using it and seeing the live changes apply in our browser what i'm going to do is i'm going to import a button so in this case i'm going to import button from react bootstrap forward slash button and we're going to place this straight here into our code below maybe the logo so i'm just going to place it in here like this and we'll select this as maybe test button for the text now when we save this we'll see that we should get the button here appear but it doesn't have any styling yet if we right click to inspect it however we'll see that it does indeed have the bootstrap classes in here so what we need to do now is import some of the bootstrap css and we can do this quite simply we only need to import the css directly here into our component and what i'll do is i'll import boot strap dist css bootstrap.min dot css and this will import all the styling we need to get us started and we can see that our button has already updated and we can see that take effect so what we're going to do now is have a look at how we can start customizing this and adding in some styling directly from bootstrap into our react application let's clean up some of the code we have here because we're not utilizing any of this and we want to really start fresh i'm just going to get rid of most of it here and we'll just have our test button here right in the center now the first thing you'll notice is that our fonts have been updated to i think roboto as well as some of the margins and line height and everything you would expect you would get normally when you're importing the bootstrap library but the other aspect to this is the way that we're importing our button there's two different ways to do it the very first is to import the button using the forward slash here where we're only importing this single component but the other way we can do this is import the button here in curly braces and we don't need the end of it unfortunately this will import maybe the whole library here but it's sometimes a little bit easier in terms of the syntax and this works too what i want to be able to do is import a number of different components to give as an example and the next one i'd like to import is an alert so let's import alert here from bootstrap and let's place it here just above the button let's pause it alert and in this case we're just going to say this is a button when we hit save on that we can see that we've got our alert here but it doesn't have any styling yet we need to pass in a variation so let's do variant here let's type this in the variant and in this case we've got a few different types but we're just going to start off with primary when we do we can see that the label has the blue styling here we've got all the styling that we would normally get when we do bootstrap so secondary goes gray success will go green and so on and so forth but it gives us an example of how we can place in the alert example here another thing we can do is maybe breadcrumbs because normally we have this above header so let's actually import it now for the breadcrumbs we will need a couple of items here and the very first one will be the breadcrumb class here so let's pass in bread crumb and in order to use this properly it's got a parent here and then it's also got some children but the children are a little bit different they're actual items so it'll be breadcrumb dot item now in this case i'm just gonna pass in test and let's see what we get so we've got our test in here and i'm gonna pass in maybe one or two more so test two and test three and we can see that they're applying automatically we can pass in other things as well like props so for example the last item here could have an active prop and this will automate to true but in this case when we hit save on that we should see that it goes gray because it's the current one in active state and we can apply different things using react for this but it gives us an idea of how we can utilize breadcrumbs in our bootstrap application here the next thing i'd like to do is maybe have a card now cards will require a few different components here so let's place in a card and what i want to be able to do is maybe have a image or something like that with a couple of bits of text and maybe a button as well so we can do all of that let's first create our card in here now the card has a couple of items we can pass in so we can pass in card.image and this is just a single component where you can also create a card dot body and for this we can place a couple of items in here we can do a card dot title and maybe also a card dot text let's place that in here so let's do card example and then let's type in here for our text this is an example of react bootstrap cards and then we can also even have a button here and we can use the same button we had before but in this case i might add a variation to it so let's pass in this variation of primary over here and let's select maybe uh what else can we have maybe have some text here saying read more great so i'm going to hit save on that and i can see we've got a bit of an error here and this error is because we're not closing off one of our items probably here so let's have a look at what this is ah this was weirdly renamed so i'll take that out and finally let's make sure that we're spelling card properly up here so now that we've done this we can see it's been imported the only issue here is that the text is in the right color and this is because we haven't actually set the color here and bootstraps actually being overwritten by the react applications color which is white so let's pass in color here to be black once more and we can see that it's applied so that's really cool we also haven't passed in an image url so in this case we might just use something generic or automatic from a online url in this case i'm just going to use this site over here to grab a random url and we're going to pass this into our card and we'll just do this with src and paste it in here so let's hit save on that and that should pop up and it's a little big maybe a little bit too big let's see if we can make it a little bit smaller i think that's looking good so there's our card and that's looking good uh we do want a bit of a margin so normally we could apply this as a manual class here sorry a manual uh style here such as margin bottom 15 but sometimes this isn't the best way to go about it so the other thing we could do here is pass in a class name and in this case what i want the class name to be is just mb3 which is three units of margin on the bottom and this will apply automatically based on the brood strap classes that are provided through bootstrap which makes life a little bit easier and means that we don't have to use as many styles in our code now that we have this let's have a look at maybe creating some forms so what i'm going to do is i'm going to import form here from bootstrap and let's actually create this here above our card now like cards and breadcrumbs forms have a number of sub components here that we can utilize so the very first thing i want to do is create a form here with a form group and for this we're going to have a few items in here the very first will be a form label and this will be the item we want so in this case maybe email address and this will be a simple one where we have maybe a form input so let's do form control in this case what we want to do is we'll do the type as email we'll do a placeholder here such as example at email.com and let's close that off without any children there and finally let's do a form here with some text and in this case this text over here will be a little bit muted it'll just be something that we want to essentially have as extra descriptors for people who are reading about what this is so let's do uh we'll never share your email address trust us and let's hit save on that now i can see that something weird has gone here with the rename again but i'll hit save once more and there is our form and it looks like it's applying okay the placeholder doesn't seem to be showing up because i haven't labeled it properly so let's do placeholder here and let's also maybe make the uh the height for this image a little bit smaller so we've got a bit more room to look at it so there's our placeholder there's our text and there's our email of course we can put in more items in here as well such as maybe a password or a username or something so let's actually copy out this entire group and for the next group in here let's maybe just do a label of password we'll change the type here to password as well and maybe the placeholder here to password as well and we won't have any text for this example in this case and finally we'll want a button and we've got a few examples of that so i'm just going to copy this one over and we're going to place this here below our form group and maybe we'll just have a secondary class for this and we'll have this as maybe login and finally we'll want to add a type to this so in this case what i'm going to do is i'm going to pass in type here as submit now the other thing that is useful when we're doing forms in bootstrap is to make sure that we're actually passing in id so that if we select the label it auto focuses on the input so we can do this quite simply let's jump here into our form group and add a control id in this case i'm going to do form email as the control id and in this we should be able to have a bit more control over this so now when we select this we can see it's auto focusing on the username and if we add another form control here and this will be form password this should automatically focus in on the password now when i select it so that's looking really good and i'm pretty happy with that there's also no such thing as a good bootstrap website without lots of containers and rows and columns so let's take a look at how we can utilize these in our example over here what i'm going to do is i'm going to import container maybe row and column here from bootstrap and we're going to utilize this here in our example and what we're going to do is maybe add a container to our entire item here so let's do container we're going to wrap everything inside of our form here as well as maybe even our button here at the bottom inside this container and this will make it fit just nicely and utilize all the room that we have the next thing i want to do is i want to create some rows here for our email and our password for our groups here so i'm going to pass in row and what i'm going to do is maybe i'll do one call here for the very first lot of items in our group for our first group and i'll do another one here as another column for our password so if we make sure that the indentation looks a little bit better we can see that this is now in a single row with two columns here and it's fitting in nicely and then it's moving on to the next lot of items here which are all nicely wrapped in a container and working really well so we can see when we zoom out they don't expand outside of that container and we could probably do a number of other things here too so for this container we could pass in a fluid class now if we apply this and resize we can see that it's utilizing the maximum room we have here but if we take that out it's just a regular container utilizing just the container max width here which is usually about 1140 pixels the next thing we can do is maybe also add some responsive elements to this so what i'm thinking is maybe let's have a look at doing columns where they respond depending on the media query they need to respond to so these columns here let's pass in maybe md and md let's hit save on that we can see they've already collapsed but if we expand them out we can see there they haven't on any viewport above md so it just gives us an example of how we can do responsive designs for our columns and rows inside of our bootstrap react application it makes life a little bit easier right rather than adding all these classes in we can just pass them in as props but it will take a little bit of time to learn which props we can pass in and which items we do have to import i hope you enjoyed this video on react bootstrap i've got lots of other videos on both react and bootstrap in general so check those out otherwise if you like this video hit like hit subscribe and i'll see you in the next one thank you

Channel: Adrian Twarog

Views: 148,967

Keywords: react bootstrap tutorial, react bootstrap tutorial 2020, react bootstrap, bootstrap react tutorial, bootstrap react, bootstrap react tutorial 2020, react-bootstrap, react-bootstrap tutorial, react-bootstrap example, reactjs, react, react-bootstrap form, react-bootstrap row, react-bootstrap col, react-bootstrap button, react-bootstrap alert, react bootstrap button, react bootstrap row, react bootstrap columns, react bootstrap row col, bootstrap, html, css, js, development

Id: 8pKjULHzs0s

Length: 15min 29sec (929 seconds)

Published: Sat Aug 08 2020