Getting Started with Bootstrap 4 using Barrio in Drupal 8

hi i'm ivan from web bosch and in this video i'll show you how to use bootstrap 4 in Drupal 8 now if you want to use bootstrap on a Drupal site the best place to start is the bootstrap theme we throw about 150,000 installs it is the most popular theme on drupal.org and also the best way to use bootstrap in drupal but as of this recording bootstrap 4 is not supported in the theme only version 3 so in this video i'll show you how to use Berio which is a bootstrap 4 base theme in Drupal 8 so before we can begin go ahead and download the Berio theme and you can download it using composer with the following command composer require Drupal slash bootstrap underscore berry oh and you can also download it using Drupal console or if you want you can even download it manually just by going to this project page and then scrolling all the way down and then downloading it by clicking on one of these links and also if you want to learn more about the theme just head over to drupal.org or slash project slash bootstrap underscore Berio so once you have downloaded the theme and added it into the themes directory go to appearance and then scroll all the way down and you should see bootstrap barrier and good strap barrier sub theme the bootstrap barrier theme is the main theme and we'll use it as the base theme and the bootstrap barrier sub theme is just an example sub theme which you can use to create your own sub things because in Drupal remember you always want to create a sub theme so that you can add in custom overrides and CSS in the sub theme without losing those modifications if you were to update the parent thing now to create a sub theme is pretty simple jump into your editor so I'll jump into appear to be storm but you can use any type of editor and then under themes contribute strap barrier you should see a folder called sub thing let's just copy that and then paste it into themes and then I'll call it Vario custom but you can call it whatever you want and now what we need to do is go through the sub theme and replace any mention of bootstrap Berio sub theme with the name of our sub-theme so what I'll do is I'll just open up a few of these folders because I know where all these files are and let's just replace this settings dot yeah more file and we'll replace this schema but yeah more and then we'll replace the dot theme and the next one will be the yam all the info yeah more and the libraries dot yeah more and let's just do a quick search bootstrap Berio sub theme so we can see everywhere where that term is mentioned in the files so let's go in here and well let's just add in barrier underscore custom which is the name of my sub theme and let's open up the global J s and then under the info let's replace bootstrap Berio sub theme in the library section now this is important if you don't change this then bootstrap won't be loaded up through the CDN and let's change this hook so it actually gets fired off and let's just do another quick check it's probably 1 X replace so there we go and let's just go down to preview library and replace it there perfect so right now we have created a sub theme and simply replaced bootstrap barrier sub theme with our sub-theme name and so if we jump back into our site and refresh you'll see that we have to bootstrap barrios sub-themes why is that and that is because we didn't change the label or the name up here so I open up the dot info Jamal and let's just call this bootstrap I'm sorry Berio and let's call this barrio custom and then if we refresh the page you'll see the Berio custom sub-theme which we just created so let's go ahead and install it and you can easily install it just by clicking on install and set as default and then if we go to our home page we should have a working bootstrap site that's awesome let's open up the inspector and make sure there are no errors because sometimes you may get JavaScript errors and you wanna make sure everything is working well and also let's just test the navigation that it's working perfect okay so right now it is working let's now look at the theme configuration because you can configure a few things through the settings page so click on the manage appearance and then click on settings and from here you can configure a bunch of stuff now I won't show you every single piece of configuration I'll just show you some important ones the first important one is under container you can switch the container to be a fluid container so let me just show you what that means if I open up the home page in a different tab and let's inspect and let's just hover over let's try and find the main idea they go here you can see the main div which wraps the content area has a class called container and if we were to set this to Florida container instead of this area being contained at 11 40 pixels fluid container makes a go for width but just one thing to be aware of there's still a 15 pixel padding on the left and the right if you want to display a hero image edge-to-edge you will have to come up with another solution because you still have white space on the sides because of the 15 pixel padding so just be aware of that so let's just set this back to container and on the region you can set classes for the region area and then sidebar first layout and sidebar second this allows you to control the width of the sidebar so the sidebar first width is this sidebar and let's just refresh this and you can see that if we inspect you will see that there is a class Cole - MD - 4 so that means that that this region is 4 columns wide and if we go back here you can see that it is set to 4 columns if you were to change it to 2 columns that means that if that the sidebar first will then be 2 columns wide and you can see that it's very very narrow and you can see the class called MD 2 and you can also do the same for the sidebar second region let's just set that back to 4 and then under components you can change the default size of the buttons and then under navbar you can control the nav bar you can even contain the nav bar so if we have a look at the nav bar now you can see that it's all the way to the left if we were to check nav bar with container and then refresh you will see that it's now contained with the rest of the site and then if you go to a fix you can configure the fixed functionality so that elements stay at the top of the browser as you scroll down and then from the scroll spy section you can configure this bootstrap bit of functionality and then under fonts you can configure the google fonts you can change it and then also the icon set and then under colors you can change the system message colors and then you can also change the tables and then under color scheme you can change the color of the whole site which is actually pretty cool because in the bootstrap theme to change the color you have to compile bootstrap locally using SAS but from here you can easily use this color functionality which Drupal has had for years but it's good to see that it's integrated in here so if we were to change it to firehouse and now the site looks red instead of blue the only thing you can do which is a bit of a shame is that you can't change let's go back here is that you can't change the bootstrap primary secondary info warning and I think error colors those are the names for them for the five major colors and so if we go into the bootstrap documentation go under documentation where is that I think it's under utilities colors yes you cannot change these how much is that I'm sorry six primary secondary success danger warning and info colors to change these colors you would have to compile bootstrap locally and then change change the color values in the variables file but you cannot change it from here which is a bit of a shame okay so let's go back to our home page and let's look at how the bootstrap library is actually getting loaded because we haven't downloaded the library yet and the way it's getting loaded up is through a CDN so if we view the source and let me increase the size you can see that bootstrap is getting loaded through bootstrap CDN comm and so this is the unified CSS and then if we scroll all the way down you should see the bootstrap javascript file and one of its dependencies pop-up now with the popper library you only need it if you are going to use the tooltips so let me go into components on them just search for tool tooltips please so if you want to use this tooltips functionality so when you hover over buttons you get this nice little tooltip then you will need to use the popper library but if you're not going to use those tor tips you won't need the pop out library and bootstrap actually has two dependencies papa and also jQuery but luckily for us Drupal comes with jQuery so so we don't have to worry about that so let me show you now how bootstrap is getting loaded through the CDN so let's jump back into our sub-theme and if we open up the libraries Yamma file you will see that there's this bootstrap underscore CDN and it's defined to assets under javascript so that these two will get loaded and then under CSS it's loading up this CSS file and then to use bootstrap underscore CDN all you need to do is under info dot llamo just add it like so under libraries that is how the theme is using the CDN version of bootstrap now let's download bootstrap and load it up locally because sometimes you may not want to use a CDN now to do that let's first download the bootstrap library so if you go to home and then click on download and make sure you download compiled CSS and JavaScript now I've already downloaded that and place it into your libraries directory and if you can't see a libraries directory then just create it and what I'll do is I will extract it and then rename the folder name so it's just bootstrap and you can see that on the CSS we have a whole bunch of CSS files and then under jeaious we have the JavaScript now you will notice that there's the minified versions okay so we can just ignore them for now but there's bootstrap jeaious and also bootstrap bundle jeaious now what's the difference well bootstrap dog bundle ships the Papa library so we won't have to manually maintainer or manually download it we can just use bootstrap bundle which comes with Papa whereas bootstrap doesn't come with jQuery or Papa and then of course the minified version it's just a minute version of the original file so to use these assets what we need to do is jump back into our sub-theme under libraries and what we'll do is we'll have to change this bootstrap one because we're not using popper so so we can get rid of that and also we don't have a disk directory okay but what I'll do is let's just use this first just to make sure it's working and so I want to see that the site actually breaks so let's do that first let's pop this in here and then if we refresh the page let's just close these because we don't need them so now what we need to do is rebuild the site cache so if you go into configuration and then click on performance click on clear or caches or if you want you can just do it through the command line which I'll do later on but let's just rebuild it and we'll also turn off CSS and JavaScript aggregation so we can see the files getting loaded up let's go back to the home page and you can see that it is broken awesome and then if we inspect we should see this error okay so it is saying that library is slash bootstrap slash dist blah blah blah is not being loaded up and that is because you can't find it so what we need to do is go into libraries remove these two values dist and then rebuild again so what I'll do is just type in drush CR and then if we refresh it should work it should work perfect and then if we view source and let's search for libraries you can see that it's getting loaded up here awesome that's a CSS and the JavaScript is getting loaded up where is it slash libraries is getting loaded up here perfect but remember when we said that we're going to use the bundle version so let's just do that now let's just roof let's just rebuild the site cache and if we refresh this I know it's going to work I just want to make sure that it's getting loaded up and if we click on it we can see the actual JavaScript file awesome okay so that is working okay let's now look at loading up bootstrap another way because believe it or not there's multiple ways to load up bootstrap in Drupal because there's always ten different ways to do things in so the next way to load up bootstrap is by using a module called bootstrap library so if you go to drupal.org or slash project slash bootstrap underscore library and then from here you can download the Drupal 8 version or if you are using composer which you should be you can download it using this command composer I'll require Drupal slash bootstrap underscore library and then once it's downloaded go to extend and then search for boot strap and then let's just install this and then if you go to structure and then if you go to configuration and then bootstrap library and then from here you can configure the module but the module has a few areas where you can configure it okay and the first place is if you go into appearance settings and you scroll all the way down and this may not be obvious you have this option right down at the bottom and when I was first playing around with bootstrap library I couldn't get it to work and it wasn't until I came all the way here and I was like well I don't see anything new and it's not until we scroll all the way down that you see this little bit right down here and so from here you can select if it gets loaded up through a CDN if you use it if it uses the non minified version and then if you were to set it to none it'll use the settings which has been configured on the main configuration page so let's just set this to none and then click on safe configuration and then we can configure it all from here and just next life a lot easier and the first thing you can do from here is change the version of the CDN so if you want you can you can use the version 4.0 point zero so let's just do that and then I think we also need to set the theme visibility as well so let's just do that and then if we go to the home page and you go view source you'll see that this CDN is getting loaded up but it's still loading up bootstrap the way we set it up previously so if you are going to use bootstrap library module make sure you remove this declaration because trust me you don't to be loading up two different versions of bootstrap on the same site and then if we hit refresh we should only see the CDN and we shouldn't see anything else nice okay awesome and then if we go back into the configuration page if we were to set it to load locally then it'll use these options down here the non minified minified and also composer installed libraries now I wanted to cover how to use composer in here but I couldn't get it working the way I want to and I'll leave that for another video and then if you scroll further down you can control which paths the library gets loaded on which is pretty cool and then from here you can select which files get loaded up CSS or JavaScript but if you don't check anything then all of them will be loaded up so let's just click on save configuration and then if we reload the site it should be loading up from library's perfect now one thing to be aware of is that the Papa library isn't being loaded up the only time pop art gets loaded when you use bootstrap library is if you are loading it through the CDN so that's something to be aware of because if we have a look at the module so if we go under modules contribute wrap library you will see a little under libraries that it's just pulling in bootstrap minified version and bootstrap unified CSS and that's it there's no Papa so just be aware of that but if you're loading our bootstrap through the CDN then Papa gets loaded now two other themes which I recommend you look at if for some reason you don't want to use barrier and the first one is bootstrap 4 so if you go to drupal.org slash project slash bootstrap for all one word this is a theme to look at now I actually know this person who maintains it it'll be rude for me not to recommend it and the other one is boot base and this one is another bootstrap 4 base theme so check them out if you don't like Berio so that is it for this video thank you so much for watching if you enjoyed it give it a thumbs up and if you want to be notified of future videos don't forget to subscribe to our youtube channel and if you want to learn more about Drupal we'll head over to web or net anyway that's it from me thank you so much for watching and I'll catch you next time

Channel: WebWash

Views: 31,151

Rating: 4.9463987 out of 5

Keywords: Bootstrap 4, Drupal, CMS, Web Development

Id: D5A_aFdlWEs

Length: 21min 37sec (1297 seconds)

Published: Tue Oct 16 2018