Custom Bootstrap Theme With Sass

hey guys in this video we're going to build a custom bootstrap theme and we're going to be using sass which is a CSS pre-compiled err alright now this is a project based video so I'm not going to go too much into you know tutorial content and really explaining the syntax and methodology and all that if you follow along it's really it's actually really easy we will be using quite a few different technologies but just very simple stuff so this is what we'll be building this is a bootstrap template and the idea is that we're using sass so that we can have variables where we can just simply change a color change of value in this in the sass file and everything all the main colors will change we can easily change font sizes just makes things very very customizable alright so we just have a nav bar with some icons up here some links a main showcase area with a stock photo in the background we have this area here with some icons from font awesome right here we have an image and then we have a bootstrap accordion menu then we have newsletter subscribe form down here and a footer very simple footer alright the inner pages are really simple as well we just have a title bar with the page name we have a panel with some content and then a list group over here alright and I kept the email form on every page services same thing we just have a panel with some wells with some different services and then a very simple contact form alright so it's not the the greatest template in the world but it's something to build and I think it looks pretty decent alright so this is the SAS web sites a slang com shows us pretty much everything that it offers variables you can see here we're setting a primary color using a hexadecimal value and then we can use that in our in our styles okay right here you can see that variables need to start with a dollar sign we can also nest styles so you can see we have an Ave here and then we can add you ELLs or whatever we want to style inside of that nav all right so we can essentially structure the CSS just like our HTML partials we can include partials we can import other sass files you can see that they use a s CSS extension mix-ins which are like functions we can extend and inherit classes and we can use operators and you can even have if statements and things like that but we're not going to get too deep into it now sass has to be compiled into regular CSS so that you can use it in your in your theme or in your website and there's a lot of different ways to do that you can do it simply through the command line if you want but we're going to use a GUI tool called koala which is very simple you basically just got to tell it where to look for the sass file and it'll compile it for you automatically as long as it's running so that's one thing we need to install and then we also want to install node J s because we're going to use a couple things from from the npm from node package modules including bower which is a client-side package manager so we'll use bower to install bootstrap and font awesome all right so I already have no js' installed if you don't just go ahead and download it and install it I don't have koala installed so I'm going to just go ahead and download that okay go ahead and click the download and let's save this into downloads it's a really small program alright so just run that and install it okay let's just click next and next close that up all right so that's all set we can keep that checked and click finish and it will launch koala for us all right now we're not going to touch it yet we're going to go ahead and create a folder to build the theme in I'm going to go into my C Drive and then let's see projects and I'm going to create a folder and just going to call this biz Lite underscore theme all right now in here we want to set up bootstrap right now you could just download it from get bootstrap if you want but more I guess modern way to do it is to use something like Bower which is a package manager so I'm going to go ahead and open up a command line and windows and if you want to use PowerShell or if you're using a Mac or Linux you can use your terminal but we're going to go ahead and CD into our projects folder so projects and what did I call it is I call it this light beam all right so you should have no js' installed which will give you NPM and then you want to install Bower so we want to say NPM install - gee which means you want to install it globally so that you can access it from anywhere all right and then we want to save our alright so now we have Bower installed we can install bootstrap sass so we want to say Bower install boot strap - sass and then we want to add dash - save and what that's going to do is it's going to create a folder called Bower components and if we look in there we have our bootstrap SAS folder which has everything we need for bootstrap it also installs jQuery because in order to use the bootstrap JavaScript you need to have jQuery so it handles that dependency for you which is really nice so we don't have to worry about installing jQuery separately so now what we want to do is go back outside of the bower components right in the theme folder and we're going to create a folder called sass which is where all of our s CSS files will go and then also a folder called style sheets which is where the compiled CSS will go that we actually use that we include in our index.html file all right now inside the sass folder we're going to create a file and we're going to call this app dot s CSS this is basically where we want to connect all of our sass files together where we want to import them now I'm going to open up my editor and I'm using Adam which I would recommend it's free it's really nice has a lot of features it's nice and clean we're going to add that folder to our project okay so I'm going to just open up the Biz light theme okay now if we look in bower components and then bootstraps ass and then assets you'll see we have the style sheets if we look inside there we have this main bootstrap underscore bootstrap dot F CSS and basically what this does is it imports all the different features of bootstrap because each feature has its own S CSS file if we look in this folder here you'll see alert badges carousel nav bar they all have their own s CSS file and then that main bootstrap file connects them all so what we want to do is import that main bootstrap file into our app dot s CSS files so let's do that so let's see right here we want to we want to do import and we want to go dot dot slash and then into bower components slash bootstrap - SAS slash assets slash stylesheets slash goats trap all right and notice I don't need the underscore because when you have an underscore that's basically you want to use it as a partial and you don't need to include it here all right now there's also if we look in that style sheets there's a bootstrap compass file as well now cut we're not using compass which is a CSS authoring framework we're not using that but I do want to include that file so I'm going to copy this and we'll paste that in and right here we just want to say bootstrap - compass alright so let's go ahead and save that now right now we're not getting this isn't compiling because we haven't added the project to koala so we're going to do that now so in koala we're going to click the plus sign and we're going to navigate to our projects folder and our is it biz light theme and then sass and then click OK alright now if we click on that you'll see that it's checked to auto compiles so that's that's good that's what we want and it should have compiled so let's take a look if we look in CSS in the CSS folder we now have app dot CSS and if we take a look at that you'll see that includes bootstrap includes everything alright it's actually a pretty big file ok so it includes all of that if we look in here everything that's in all of these fold these files right here it includes alright so that's good that's what we want so now we want to do is create an index.html in our route let's say new file index dot HTM and we'll just add some basic HTML here actually know what we'll do is we'll copy some code from the get bootstrap website so let's go to get bootstrap and getting started and then examples and you can see we have this starter template I'm going to click on that and then do a control you all right and then we'll just copy everything that's here and we'll paste it in our h2 index.html alright now we can get rid of a lot of this stuff let's get rid of this icon description author we're going to keep the viewport because this is going to be a responsive theme for the title let's change that to biz light theme let's see we're not going to need any of these any of these CSS references we only need to reference our one app dot CSS file all right that's what's great about sass is that it will take all of your CSS files and combine them so let's say link rel stylesheet and then we want to include href and let's see we have that in CSS all right you know what I created a folder called style sheets we actually don't need that since it compiled it into the CSS file out folder so CSS slash app dot CSS alright so let's see down here we're going to get rid of all these script includes as well so let's save that and we'll go and try to open up that index.html with Chrome and there we go so you can see that the CSS is being included now the reason that this is underneath the nav bar is because of this class right here now bar fixed top I'm actually going to get rid of that and I'm going to change now bar inverse to nav bar default save that and there we go so let's just recap what what we did what's happening okay we installed bootstraps ass with Bauer which resides in Bower components we have in bootstrap stats all of these s CSS files that are being imported into this one bootstrap S CSS file and then what we're doing is we're importing that into our or is it into our app CSS file right here as well as the compass version and then we're compiling it using koala into app CSS alright and then we're just including that in our HTML right here so that's what we've done so far hopefully that's not confusing now right now we're loading this index.html file right from the file system and that's fine if you want to keep doing that but what I want to do is install a dev server using NPM and actually run it in a server so I'm going to go to my command line and we're going to say npm install - g4 global and then live server alright I already have it installed so I'm not going to run it but once you do that you should be able to run live server and make sure you're in the right and you're in the theme folder all right now by default it's going to start on port 8080 which may be fine for you but that's being used on my machine so I'm going to specify - - port equals 8000 and that will just start it on port 8000 so now you can see I'm on my local host on the loopback address here and port 8000 and now if I go when I change something let's see we'll just let's change this project name right here we're going to change it to biz light theme and save it and you'll see that it should reload there it goes okay so it reloads without me having to actually click the reload button which is nice all right so now that that's done we're going to set up a full file a SAS file for our variables now if we look in the bootstrap stats folder and go into the Style Sheets bootstrap you'll see there's a file called underscore variables dot CSS this holds all the variables for everything for the navbar for the the main background anything that is a variable is in this in this file now I don't want to edit this file directly what I want to do is copy everything in it so just copy everything and then we're going to go into our SAS folder and create a new file and I'm going to call it custom variables dot s CSS actually underscore custom variables since it's a partial and then we're going to paste everything in there and then save it all right now we want to do is go to app dot s CSS and we just want to impor that up here so I'm going to say import and then custom variables ok notice we don't need the underscore and we don't need the dot s CSS so let's go ahead and save that okay that reloads now we should be able to change stuff from here in the custom variables file and it should change on our site on our theme so let's look for the navbar area it's well commented so you should be able to find it let's see nav tabs right here navbar okay we're using the navbar default class if you were using navbar inverse you would use these ones so let's go and change the height of the navbar I want it a little bigger so I'm going to change it from 50 to 70 all right so if you look at it up here once I save it it should reload and you can see that now it's bigger all right so we can add at this file edit the variables here and it'll reflect in our entire theme okay now I want to have a variable up at the top that's going to be the main color of the template so let's put an area here for custom and we're going to say main color alright and the main color I want is that light blue color which is a hexadecimal of one a8c nine seven okay that's going to be our main color now we want to implement that in a few different places one is going to be the the navbar all right so if we go down to where we just were the navbar let's see I want to put this right here now by default BG which right now is this value which is this light gray so I'm going to replace this with main color okay and we'll save that let every load and now it's that bluish greenish color now if you look at the text the text is not what we want we want that to be white so let's change right here now bar links we're going to change this to FFF which is white same thing here here and that should do it so let's save it let it reload and now we have white text I also want the hover when we hover over it I wanted to have this color background now another really nice feature of sass is that you can actually use percentages for the color for instance if we look right here what this is doing as far as the color is it's taking this color and passing it in a function called darken and then it's adding a percentage okay so it'll darken whatever this color is by that percentage so what we want is the hover which by default is trans that's why we don't see anything when we hover but we want to change that to darken let's see Dakin and we're going to pass in here actually know what we'll just copy this this whole thing and we'll put that there okay so now if we save that now when we hover over it we get that effect that color all right good the next thing I want to do is implement font awesome which gives us a bunch of icons and font awesome actually uses sass as well so let's go to our command line and let's see we're going to stop the server for a minute with ctrl C twice and then we're going to say we're going to use bower install font awesome and then we want to add dash dash C okay so that that will install font awesome just like it did with bootstrap sass so let's go ahead and run the server again live server port 8000 okay that'll open up and then if we look in our bower components we now have font awesome inside the bower components so there's a folder called s CSS and inside there there's a font awesome dot s CSS and just like with bootstrap it includes all of these other sass files so we just need to import this one into our main s CSS files so let's do that alright let's put this right at the bottom here I'm just going to copy that and then we'll just go ahead here and say font awesome /s CSS / font awesome all right so save that and then there's one other thing we need to do before the icons will actually show up let's see we're going to go into the folder where is it this light theme and what we're going to do is go in the font awesome inside the bower components and grab the fonts folder copy it and then we're going to bring it into into our main project into the root we're going to paste it in alright because that's where it's going to look so now we're going to add our social icons up here so let's go ahead and open up we'll go back to the index.html page and I'm going to copy this ul right here and we'll paste that in like that and then we're going to add a class here called navbar right and that'll that'll float it over to the right and then we're going to get rid of this active class here and let's actually get rid of all but one here and the link will go to http twitter.com and then what we want to do is we want to put in a font awesome icon here so we want to use an eye tag and then class equals F a and then FA - Twitter okay that's the class to get the Twitter icon and let's try that out so if we save that now you can see we have the Twitter icon alright we're going to do the same for the other networks so let's just copy that and I'm going to make this bigger this wider alright and let's see we'll just paste this in here so we're going to have Twitter and then we're going to have Facebook I'm going to change this class as well to Facebook let's do Google+ and if you go to the the font awesome site close these out and we click on icons you'll see that there is a ton of them okay so pretty much an icon for whatever you need and we're looking at these brand icons right here for instance Facebook is right here you can also use Facebook Square a Facebook official there's there's a lot of them all right so let's go ahead and finish this up so we have Google+ fa google dash plus and let's do LinkedIn so FA - LinkedIn and let's save that oh that's not right there we go so now we have our icons now up to this point we've only edited the variables we haven't created any of our custom styles so we're going to create another s CSS file in the sass folder and we're going to call it underscore custom dot s CSS all right and then we just want to import that in here but at the bottom so we want to say import custom all right so this is where any custom styles we have will go now let's put in the navbar and what I want to do is I want these icons to be a little bigger now we can use nesting normally we would have to do like navbar and then dot FA if we wanted to do that but within SAS we can actually include that in here we can nest it just like we would HTML so let's say font size and we'll step down to 18 pixels save that and you can see that those are now a little bigger okay next thing we want to do is the showcase we want to work on that main showcase area so let's go back to index.html and we're going to go down down here and we're going to get rid of all of this all right and then this will be the showcase area so let's create a div we'll give it a class of showcase and inside the showcase we want a container and inside the container let's put an h1 and this is going to say got ideas and then we'll have a paragraph and let's give that power graph a class of lead which is a bootstrap class and I'm going to grab some dummy text and just paste that in here all right so just a couple sentences of dummy text and if you want to generate some dummy text you can go to I think it's lip some calm and just click this generate button and gives you a couple paragraphs of dummy text so under the paragraph we're going to have a button or a link that's formatted as a button so let's see we'll just have this go to about HTML and then we want to add a class of BTN and BTN primary and that'll just say read more so let's save that ok so that's what it looks like now we want our background image so it's a free stock photos I'm going to go to this pixels comm and let's see the image that I want is here somewhere let's search for business right here this is the image that I'm going to use so you guys can go ahead and download this I'm going to get the nineteen twenty by twelve eighty version and click download and I'm going to save it into let's see projects viz light theme and I'm going to create a folder here called IMG I'm going to save it in there and I'm going to save it as a file called showcase JPEG so now we want to do is go into our custom s CSS and we want to add in here showcase and showcase is going to have a background which will be a URL and we're going to say no-repeat and inside here let's do dot dot slash and we want to go into the image folder and then showcase dot jpg all right so let's go ahead and save that and if we look in the front-end now you can see the images in the background alright so obviously we need to make this bigger I also want to get rid of this space right here this comes from the nav bar it actually has a margin so let's go to the nav bar make sure you're not inside the DFA and let's do margin bottom and we're going to set that to zero okay save that and now that space is gone so back to the showcase let's let's add a height to that so we'll set that to 600 pixels and we're also going to set padding you want 30 pixels on the top and bottom alright let's save that okay now I want this image moved up a little more so we're just going to add after this no repeat we want zero and then we're going to bring it up negative 100 pixels okay so that'll just push it up a little bit all right now the h1 I want that to be bigger so I'm going to nest that inside of here put an h1 and let's say font size and we're going to set that to 60 pixels all right now this whole area right here I want to have a clear background so we're going to add some styles to the container make sure this container class is within the showcase all right that's the only container we want to style like this so background is going to be white and we're going to set opacity oops I set that to 0.7 and then we want some padding which will be 20 and then 30 for the rest so let's save that okay so that gives it MUC see-through background now the button here obviously I don't want that to be that color blue when the rest of the template is going to be this color blue so let's go to our custom variables and we want to go let's find the buttons let's see all right so it's a button it's a primary button so this right here that's the text color which is white we want the background all right so it's set to this brand primary so let's see where's that let's do a search for that okay so right here oh it was actually right at the top so we want to change this to be the main color so I'm going to get rid of this okay we'll save and I can see that it's that bluish greenish color let's actually make this a little less see-through so we'll change the opacity let's say 0.8 okay so that's better so that's pretty much the showcase next thing we want is the area down here with the icons it'll have a bluish greenish background or whatever the main color is so let's go back to index.html and let's see we're going to put a div and let's give this a class of section - ay all right and then we're going to have a container and we're going to use the grid system here so let's create a row class and then we're going to have three divs that will be four columns each so div class call MD for okay and we're going to have three of these and this is going to have an icon so let's put an eye tag here and we'll say class equals FA this is going to be the html5 icon so FA - html5 okay and then under that we're going to have an h3 and the heading is going to be clean and simple code okay and then we'll have a power graph which is just going to have a couple sentence of sentences of dummy tax so let's paste that in alright so I'm going to copy the icon the heading in the paragraph all right we're going to paste that in these two as well so there and there all right now this second one here the icon is going to be a gear so it's going to be FA - gear and we'll change the heading let's change it to say sass pre compiler you can put anything you want really and then this icon is going to be a light bulb so let's see this is going to be FA - light bulb - OH and then we'll change the heading - let's change it to customizable all right so let's go ahead and save that see what we get okay so notice the icons are really really small so we're going to add we're going to add some custom styling so let's go to our custom s CSS file and let's see we're going to put down here we're going to say section - a and let's see what we want here we want to add padding of 30 pixels 0 I want to align everything to the center so we're going to say text aligned to the Center and the background is going to have it's going to be that main color so we can use that variable here and let's see the fa the icon is going to have a font size and I actually want to put that as a variable so inside custom variables will go right here and let's say icon - size and we'll set that to 60 pixels his weight is that what I want yeah 60 pixels so we'll save that and then we'll put that in right here icon size so let's go ahead and save it reload and there we go now the text is dark and we could simply just change it to white but what if we want to change the main color to be a light color alright so for instance if I go to custom variables and we change this to a really light color and save it now this looks good because it's dark text on the light background but this doesn't it's white now what we can do is we can actually create a function that's going to check to see if the background color is dark if it's dark it'll give a white text and we can check to see if it's light if it's light it'll be a docx text all right which is really cool really really helpful so what we'll do is we're going to create inside the sass folder a file called underscore functions dot s CSS all right and we're going to create a simple function here we actually have to have an @ symbol right here okay so function we're going to call it set text color alright and that's going to take in a parameter which will be a color variable and then what we can do is we can say if so if lightness pass in the color if lightness is greater than 50 then we're going to return the hexadecimal value for black all right and then we can put an else okay that should actually have an @ symbol as well else then we want to return white all right so this is a very very helpful function we'll go ahead and save that and then we need to make sure we import it in through our main app CSS file we're going to put it right below the variables so we'll say import functions okay we'll save that and then let's go to our custom CSS file and we want to use this let's say we want to use this in our section a so right here we'll say color set text color and then we're going to pass in here main color okay because it takes a look at the background which is this if it's light if the text color will be black if it's dark the text color will be white now we also want to do that in the nav bar okay so up in the nav bar let's put a for the links and then color set text color and we'll pass in main color alright so let's go ahead and save that and then let this reload okay so let's see that didn't work oh you know what we need to add an important flag here okay then we'll save it okay so now it has a dark color now if we go and change it back to the bluish greenish color and save let it reload the text is white okay so it's it's a basically a smart stylesheet okay and adapts its dynamic so let's continue on down below here we're going to have another area if we look at the final product it's going to be this right here we have an image and then we're going to use this accordion from for bootstrap now in order to use this we need to include JavaScript our bootstrap javascript file which I don't think we included yet so let's take a look in index.html down at the bottom here we need a script tag source okay now we need to include jQuery as well because the bootstrap JavaScript depends on jQuery and that was installed if we look in bootstrap Bower components so jQuery dist and then jQuery j/s so let's go ahead and add that so bower components slash jQuery slash dist slash jQuery j/s all right now I'm going to copy that and then we're going to include the bootstrap J s so bootstrap sass let's see bootstrap sass just check this real quick and then it's going to be in assets slash JavaScript slash bootstrap dot J s alright so let's save that and that should also give us the responsive menu if we go ahead and we make this smaller we have this little button here and now we have all of our links in this mobile menu alright so let's continue on down here let's see so after section a we're going to put in Section B actually I'm going to just copy this paste that in will change this to Section B and this is going to use the grid system as well but it's going to have two not three so we'll get rid of this last one this column d4 alright and then we're going to change these to column d6 both of these and then we'll just clear out everything inside of here and in here all right now the image we have to grab that as well let's grab it from pixels let's see what did I search for let's search for computer and what's here somewhere the hell is it right here this right here this chip so we're going to grab the 640 by 449 download that I'm going to save it as CPU dot jpg all right so let's go ahead and insert that right in here so IMG source and that's going to be in the IMG folder slash CPU dot jpg ok let's save that take a look all right now we want to actually make this the 100% width of its container so we can go to our custom CSS or s CSS and let's add down here dot section dash B and then the image inside of that we want with 100% all right now the background we want to change that to this grayish color so that it kind of matches so let's see in Section B we're going to say background and that's going to be a hexadecimal value let's see where is it so it's going to be e e 6e b f1 and then we're also going to add padding 30 pixels on the top and bottom and let's save that okay so on this side we're going to have our collapsible accordion now that's a lot of code to write so I'm going to just go to get bootstrap comm and we're going to go to JavaScript and then collapse and we want this accordion example right here I'm just going to grab everything in here so we'll copy that bring it over to index.html and we're going to paste it right in here and this call md6 okay I'm just going to indent this a little bit alright let's save it and go back and take a look and there we go now I want these panels these headings to have the the main color as the background so let's go to our custom CSS CSS file in Section B and actually know what let's go outside of Section B because we're going to use panels other places as well and we'll say plot panel - heading - a space h4 and we're going to set let's see we want the color to be dynamic just like this we want to use the set text color so we'll paste that in now for the background we need to do that in our variables so let's go to custom variables and I'm going to search for panel and we want let's see we want a panel background where is it's our panel header background the hell is it panel heading padding is it default right here I think panel default heading background let's change that to main color see if that works yep alright good so that's all set next thing is the newsletter area so let's go back to index.html and I'm just going to copy what we have for section a and then we'll go down the bottom here paste that in change it to section C and then we're going to get rid of let's see we're going to keep this call MD but we're going to get rid of these two all right and then we want to change this to call m.d. 8 but we want it to have an offset ok we don't want it to go all the way across but we want to move it to the middle so we want to just add another class called call MD - offset - - ok we want to push it over to columns and then let's get rid of all this and then here we want an h2 and we'll say subscribe to our newsletter ok we'll put a line break and let's I'm going to just grab a paragraph of dummy text ok then we'll put an HR and then we're going to have our form okay form we'll have an input give it a type of text and give it a class of form control and also input - LG that'll make it a little bigger all right then we'll give it a place holder let's just say enter email okay let's put another line break and then our button button we'll have a class of BTN BTN - primary BTN - LG and then BTN - block these are all bootstrap classes okay that'll say submit and let's take a look alright so you can see it's only eight columns wide but it's pushed to the middle because we added an offset of - all right so now we need to style this so let's go to see we want to go to custom CS CSS and let's see section section C and we're going to add padding it's going to have a little more padding we're going to do 60 pixels and margin top we're going to set that to 40 pixels we're going to align everything to the center the background is going to be the main color and let's see the text will be dynamic let's grab that now let's see let's see what that looks like all right so let's see I don't want that there let's actually get rid of that margin top all right now the button you'll notice is the same color as the background so what I want to do is darken that a little bit so let's actually add inside section C dot BTN - primary and we're going to use the Dakin function so darken and then we'll pass in the main color and then it's going to take a second parameter of the percentage we want to darken it so we'll say 10% so now I'll save and now you can see the button is darker all right so we're almost done with the home page let's just add the footer which is very very simple put our container all right and we're just going to put a paragraph and we'll say copyrights let's put a copyright symbol here 2016 is light theme okay so we'll save that and as far as styling that's going to be really simple as well let's set padding 30 in the background I'm going to make the same color as that button I'm going to dock in the main color so let's just copy that throw that in and then the color of the text will be dynamic with the set text color function and there we go alright so our index page is done now the inner pages are going to be very simple so let's go ahead and create those in the route we want to create a file called about HTML we want a file called services HTML contact dot HTML all right now in the index page let's fix the menus so that we can navigate to these pages so home is going to go to index about will go to about HTML contact and let's also add the services all right so now we're going to do is copy everything in here so we're going to select all copy it and then go into about and paste that in okay now let's start at the top here and in the title I'm just going to add a pipe and then about okay the menu and then the navbar all that is going to stay the exact same we don't want let's see show case we're going to change this to title bar we are going to have a container and then we'll have an h1 which will have the page title and then I'm going to get rid of the paragraph and the button okay so that's our title bar now we don't want Section A or B however I am going to keep Section C which is the the email form all right now right here is where the main content will go so let's say div class so you'll set it to main okay this will have a container and let's say we'll have a row and this column will be an a column div so call MD eight and then under that we'll have a four column which will be basically the sidebar all right now we're going to have a panel in here so div class panel panel default and let's see we'll have div class panel heading and inside the panel heading will have an h4 with a class of panel title all right and then this will just say who we are okay now below the panel title div we're going to have a div with a class of panel body and then this is just going to have a couple paragraphs so I'm going to grab that from lips simcom just copy two of those and let's see we put paragraph tags paste that in and let's make sure we end this paragraph and then start this one okay so let's save that and then we're going to go and click on a boat and there's our boat page let's make it so that the about link is active so if we go up to the menu we're going to just remove class active from home and put it on the about li alright now we're also going to have a list group in the sidebar and I'm just going to actually grab that from get bootstrap so if we go to components list group I'm going to grab this right here the linked items okay we'll just paste that in alright and there we go so there's our menu so that's the about now the title bar I will I want that styled a little bit so let's go to custom CSS CSS and we're going to go right here and say title bar and I want that to have the same background image as the showcase so this right here I'll just copy that alright instead of 100 pixels I'm going to pull it up 300 pixels just to show it a little bit more and we're going to add padding bottom and that's going to be 10 pixels alright and I'm also going to add a border bottom which will be 4 pixels solid and it's going to be the main color all right so let's save that okay that looks pretty good let's add a margin to the main div right here so we'll say dot main margin top 30 pixels all right so that's the about page now services is going to be very similar so we're going to copy our boat page paste that in services and let's just change some stuff that's right here on the title ok we want to change the active class to this li we want to change the title right here okay the panel title will say what we do and in the body I'm going to clear out these two paragraphs and we want to have our services within well dibs so I'm just going to paste this in that's one it's just a div with the class of well an h4 and a paragraph all right so we'll paste in two more of those okay I'm just going to change this one to web development and we'll change this one to SEO very simple okay we'll save that let's click on services and there's our services page okay last one is contact so I'm going to copy everything here in services and paste it in contact and then we'll simply change the title ok we'll change the clap the active class this okay and then the h4 on the title right here let's just say get in touch and then let's clear out these well divs in the body and then we just want to form here and I'm actually going to paste this in just to save on time all right so we just have a very simple form we have div with the class of form group label with name and input same thing with email and then message which has a text area so let's go ahead and save that and we'll click on contact and there we go all right so our theme is now complete and what's really nice about this is now if we go to our variables and we want to change the main color let's say we want to change it to that light color save it you'll see that now it looks completely different and text is also dynamic so it's the right color if we wanted to change it to let's say I don't know red which will be very ugly but we can't we can do it if we want all right so it's very customizable so that's going to be it guys I will upload this code on github hopefully it wasn't too confusing I know it was kind of long and there was a lot to it but hopefully it wasn't too bad alright so thanks for watching if you can subscribe leave a like leave a comment that'd be great and thanks for watching

Channel: Traversy Media

Views: 172,220

Rating: 4.9350214 out of 5

Keywords: twitter bootstrap, bootstrap, bootstrap sass, sass, bootstrap theme, bootstrap theme development

Id: pB7EwxwSfVk

Length: 64min 19sec (3859 seconds)

Published: Thu Nov 17 2016