Creating a Website with Bootstrap Studio (Tutorial)

hey everyone in this video you'll learn how to build a real website with a bootstrap studio we will start from blank page and build the layout use the responsive grid write CSS and we'll even make a simple gallery with a lightbox the first step is to create a new blank design we won't give it a name just go ahead and press the create button I have a folder with assets here that a client has sent me about their new bakery their wish is to turn these into a responsive website they gave me a logo in some illustrations in a text document with the copy they wish to include we will go ahead and import all the images by dragging and dropping them and we'll open the text document to have it ready for later so the customer wants to have cakes pricing in order as links in their top navigation menu we can make this using a nav bar this is a bootstrap component that you are probably familiar with it gives you a responsive and functional top navigation menu let's open up the HTML panel to see the HTML that was generated all right so we first have to change the brand of the navbar double-click to edit it as text I'll go ahead and type the name of the business let's make this part bold very well now we hit apply to commit the changes let's make the link show in the right part of the navbar we just select the nav and choose to align to the right now let's change the links double click to edit them to add one more we'll use this toolbar button great now we need to create a promo section that features the clients offer of the day we'll drag and drop a div then we'll place a Jumbotron inside it because the div has a zero height we can't drop it inside the div from here we'll use the overview panel for this just drop it on top of the div there alright and now let's see the HTML that was generated looking good to mix styling easier let's set an ID on this div we'll call it promo let's write some CSS to style it click the Create button and a new CSS block will show up will change the selector a bit and we'll make the elements content with the text aligned property let's add some padding 40 pixels should be enough looking better already now we want to add a nice background image I think this one would look nice as a background let's try it just start typing in bootstrap studio will suggest the image name we'll also add the background size property to scale the image to fit the CSS we just wrote is added to your style sheet file double-click to open it in the CSS editor there now the jumbotron can use some work let's style it clicking when a blue line shows up creates a new CSS block we want to prefix the selector with the ID of the parent div so that it affects only this Jumbotron all right now let's around it a bit 20 pixels would look nice it needs some padding as well we will also make it semi-transparent by setting its background to an RGB a color that is 75% visible that's much better let's see how this looks in a real browser hit the preview button and mark the checkbox to enable the preview this starts a web server that is visible on your local network just press here to open the URL in the browser all right let's resize the window to see how responsive the pages what we see immediately is that it takes up the entire width of the window which doesn't look nice on large screens we need to limit it okay so we'll limit the jumbotron with a combination of a max width and centering using margin auto let's switch up to the browser real quick it is updated automatically with our latest CSS so there's no need to reload the page you can see that the Jumbotron is now centered but doesn't take up the whole page which looks nicer let's switch the screen size to see how things look in the app there is too much padding on small screens which doesn't leave enough room for the text let's fix this will create another block of CSS code which will limit with a media query to show only on small screen sizes let's try with 20 pixels yep looks much better now we want to limit this block to only small screen sizes we'll do this with a media query when you click here the current screen size is placed as the media query max width so the CSS block will be active only on the current screen size or smaller but it looks like we also need to decrease the space around the jumbotron on small screens we'll do it with a smaller pixel value for the promo padding looks good we just need to make this active only on small screens with a media query and the result is more room for text on small screens and more padding on large devices all right I think it is good enough I'll click here to get this panel out of the way now let's move on with the intro text we'll need to place another div actually now that I think of it a container would make more sense because we want to limit how wide this part of the page is then we will add a heading for the title and lastly a paragraph for the text let's switch to the text file and copy the text first we will copy the title double-click the component and paste inside it now we'll do the same with the paragraph there if you are like me you are not a huge fan of the default bootstrap theme bootstrap studio comes with a number of alternative ones that are much nicer from the list I'll choose the readable theme which is one of my favorites hit the button and the pages instantly transformed looks a lot better than the default theme let's open the HTML panel again I would like to tweak the theme a bit as I would prefer a sans-serif font for the body copy of this particular design to do this we need to select the body component and then switch to the Styles tab to see all active CSS rules this block sets the font family for the page and as you can see it is defined in the bootstrap stylesheet we can edit this directly we need to copy it to our style sheet first just click here and we'll have our very own copy of the block you can see it at the bottom of our Styles that CSS file I'll move it to the top to keep things organized so now we can delete the rules that we don't need to override just hit delete and then enter to remove them for the font family we want to specify a sans serif font stack the page is updated in real time as we make the change great things are a lot nicer now let's make the intro prettier select the heading element this will focus it in the HTML panel so now we can select its parent container click the attributes form to show it we will be adding more containers like this to the page so we better give it a class name to make all of them easier to style now let's create a CSS block for it we need to Center it with text-align and then we will add some comfortable padding around it very well we need to write some more CSS to style this section but it will be specific for the introduction so we will place the code in a new block with an ID selector first we give it an ID welcome will do then we create a new CSS block with that ID we need to limit its width of the paragraph with a max width so it matches the width of the Jumbotron then we will increase its font a bit lastly we will Center it with a margin I think it would look better if headings insight sections had a normal font weight and if there was more space beneath them let's write some CSS for this all right looking better I will tweak the padding a bit to make it prettier now we can move on with the feature section I will go ahead and duplicate the entire introduction to speed things up don't forget to change the ID to something unique we don't need this paragraph anymore what we need instead is to create a grid row with three columns I will drag and drop a row then I will place a column inside it you can see in the HTML that columns take the entire width of the row by default we want to decrease this from 12 positions to 4 if you have the column selected you can do this from the options panel we have a control over a number of other column properties here including offset in push and pull this is very handy when working with the bootstrap grid now we will need to drop a heading click it to change the type of tag from h1 to h2 then we will drop a paragraph let's copy things over from the text document first this section title then the name in paragraph now we will select the column and add a class name to it to help us with the styling I will give it an item class I think we can improve the design a great deal by adding an icon above the heading let's try just drag-and-drop it and double click to change it I want this to be some dessert like a cake there was nothing suitable in the glyph icon set but there is an icon for this and font awesome there the icon is way too small so let's enlarge it with some CSS icon fonts are in fact fonts with the vector glyphs instead of letters so they respond to the font properties to enlarge the icon we'll just give it a larger font size there that looks much better let's make the heading less bold all right now we are ready to make the other features I will speed this up by duplicating the one we already did and I'll copy paste the text then I will change the icons let's see how this looks in the browser the preview is already running so we can switch to Chrome thanks to the bootstrap grid the features list is fully responsive and adapts to the page with the design looks a bit off right now but we will improve this when we add some margins let's switch to the small size we will add a top margin to every item and we'll tweak the headings margins a bit let's switch to the browser again there is a definite improvement but maybe we'll look better with smaller headings yep much better let's try giving the feature section a background but because bootstrap containers don't stretch across the whole page we will need to wrap it in a div and set the background to it just grab the div and drop it before the container then we take the container and move it inside the div let's add a class name to this div I will call it dark section I will go ahead and create a new CSS block for it let's give it a light gray background color we will click the color preview to open up the color picker and we will choose a light blue color doesn't look too bad we will tweak the margins and padding's a bit more until it looks pretty there let's turn our attention to the navbar I'm not a fan of the blue text and links so I will choose the inverted color thing let's switch to the browser again one problem that I see is that the navbar is fluid intakes the full width of the page which doesn't fit well with the design there is a very easy fix for the responsive navbar just select it and remove the fluid checkbox something else that we can try is to make the bar fix to the top of the page this is done with the position drop-down let's switch to Chrome we will need to add a margin to the promo element to compensate for the fixed navbar but otherwise everything is fine we can fix the margin by focusing the promotive and switching to the Styles tab we will add the new margin right here one more thing that we need to do is to add the logo I will just grab the local image file and drag and drop it before the first letter of the brand then we'll give the logo an ID to make the logo smaller we will write some CSS the max height property will do this for us we will also add some margins to better position the image another thing we can improve is the color of the icons let's make them this same color as the logo I'll set it to a dummy color so that the color preview is shown and we can trigger the color picker then I will choose the eyedropper tool and pick a color from the logo let's see the result great looks much better now another thing we should improve is the color of the active navigation item to do this we need to override this bootstrap CSS block we'll make a copy of it to our style sheet so we can edit it switch to the Styles dot CSS file and you'll see the new CSS block at the bottom I'm going for a light yellow color without a border looks good to me let's jump to Chrome real quick and see the result I think we can make a few tweaks to the text colors first the intro paragraph we'll make it a bit later then the features they need to be a slightly lighter color with more blue we'll use the color picker for this great we can now move to the photo gallery which will showcase our clients work I'll speed things up by duplicating the Welcome section and adding it last to the page by dropping it into the body we'll rename the section to gallery and will delete the paragraph then we will drop a row we now need to drop a column I could just drag the column from here like we did previously but bootstrap studio gives you quick action buttons which we can try out this time just focus the row and click the column button we will again switch the column to take a third of the width so we can place three items on the same row then we'll drop a thumbnail component inside it we only need the image so I will go ahead and delete the other components of the thumbnail to set the image just double-click it and choose which photo to show let's pop open the HTML panel to see what the code looks like you can see that we have only a thumbnail div and an image inside it it's a good idea to make this a link to the full version of the image to do this we will use a link component and we'll set its URL to the full image we need to place it directly in the thumbnail component the HTML panel was updated instantly to show our new link now we will grab the image and drop it inside the length just delete the text focus the image and make it responsive this makes it adapt to the size of the thumbnail the only thing left is to set the URL of the link to point to the full image great let's create two copies now we double-click them to change the images and we will also change the URLs of the links let's switch to the browser again you can see the thumbnail gallery at the bottom it adapts nicely to the width of the page the links also work but it would be better if the images were opened in new tabs I'll switch back to bootstrap studio and we'll set all linked targets to blank there and now when we try clicking the links in the page again they will open the photos like we want them very well we are nearly done with our page we still have a few things to do with the Jumbotron first we need to change the style of the button we click to select it then make it larger and more blue from the options panel next we need to copy over the text that the client sent us we copy and paste the title then the subtitle also we should change the text of the button great things shaped up pretty well the only thing missing is a footer but we can save us some time by getting one from bootstraps Studios online library just click the online tab in search this one would do nicely I'll hit the install button which will fetch the component from our servers and install it once that's ready we can grab the component and place it on the page I'll drop it over the body so it is placed as the last element and here it is notice that a new stylesheet was created which holds all the CSS for the footer let's open it there is quite a bit of code here one thing that we should fix is the top margin there's too much white space beneath the gallery to do this I'll just decrease this property since it is zero we can remove it entirely now let's change the logo I'll remove the blue part I don't like how white everything is let's make it darker the design tab in the color picker shows all colors used in the page this light gray will do very well now we should change these links just double click to edit the text we can delete the rest the company name should also be changed along with the year I like how this turned out let's see how it looks in the browser okay so the footer is responsive but it stretches across the entire width of the page this doesn't fit very well with the rest of the design we should limit it we can do this by using a container we need to put it right before this row here drop this right in only thing left is to remove the padding great and now when I open the browser you can see that the footer aligns nicely with the rest of the content let's shrink it some more looks good everything is nice and responsive one last touch that will make this page even better is to make the gallery images show in a lightbox we can do this by importing the library from the CD nsj now we'll search for a lightbox this looks like a good script I'll copy the main CSS file first then I'll link it from here this will include the stylesheet in the page directly from the CDN URL click import we'll do the same with the JavaScript file copy it and paste it let's see what else we need to do to make the lightbox work so we need to have a special data attribute to tell the light box to scan the photos I'll just copy this switch back to the app create a new attribute and paste it here I'll put cakes as the name of the light box group so that the library knows that the images should be shown together as an album I'll do the same for the other two photos the preview is running so let's switch to the browser scroll to the bottom and click one of the photos and we see the photos are shown in a beautiful lightbox gallery all that is left is to export the project choose a folder where you wish the files to be placed in double-click it let's see what's in the folder we have an index.html file and in assets folder inside the folder we have all resources that this site uses including the bootstrap framework in images CSS in J's files that we've created the exported page looks nice and is fully responsive let's see what the code looks like we see the style sheets and fonts imported in the head section we've got the navbar the main content in the footer below the JavaScript libraries and scripts which we use are included before the closing body tag overall after exporting we end up with a well-structured html5 document which follows bootstraps best practices and looks as if an experienced front-end developer has written it by hand and with this our design is complete bootstrap studio is a powerful tool that can make creating websites and layouts much faster it offers powerful tools that can make you more productive and save you time we are sure that there is a lot you can do with it thank you for watching

Channel: Bootstrap Studio

Views: 1,251,752

Keywords: bootstrap studio, tutorial

Id: 10SwsoYNkVc

Length: 27min 18sec (1638 seconds)

Published: Wed Aug 17 2016