Create Responsive Websites with Bootstrap Studio v5.8.3

In this video we will get a quick run down of the user interface.

Next we will add some content and styling to the page. We will also have a quick look at the generated HTML code.

Margins and padding are basic HTML / CSS properties. We use margins and padding to modify the layout of the elements and their contents. Margins add 'outer space' (between the borders of neighboring elements), while padding adds 'inner space' (between the border and the content of the element).

So far we have been working with very simple elements. Up next is a more complex element: the navbar. Navbar is short for navigation bar, and is usually implemented as a bar at the top of the page in which the main sections of the website is written out. Each item on the bar usually contain a link, so that the user can easily find and jump to the section they need.

You will no doubt have noticed that none of the items we have added are linked to anything yet. In this video we will first create new pages and then link them to the nav items in the navbar.

A carousel is essentially a slideshow that can be used to cycle through a series of photos, slides or info graphics.

A gallery is a useful way to show off your portfolio. It consists of a grid of images, which the user can click on to see it in a larger view.

If you would like customers to be able to easily find you then adding a embedded google-map to you website is the way to go. To add a map you need to make an api key first though so google can identify your project. With a free api key your project can load 25000 maps per day! If you need more loads than that and you would need to pay!

An article list is a great way to direct surfers to more specific content in your website. It combines a thumbnails, descriptions and links into a responsive grid.

As usual, just find ‘Article List’ in the components panel and drag-and-drop it onto the page or into the Overview panel.

In this video we learn about using rows and columns to create simple layouts which respond to the size of the screen.

We also work out an example where we use these rows and columns to create a simple 'about me page' where the elements are arranged in a row in large screens, and are arranged in a column for small screens.

In this video we use rows and columns to create a simple responsive footer.

Themes are predefined layouts and styles of a website. Using an existing theme can be a fast and easy way to change the overall look and feel of your website, without needing to pay too much attention to detail yourself.

As we have seen, it’s a simple matter to set the colors, fonts, margins etc.. of each to element using the appearance panel. But this means that if we want to change the overall look and style we would need to go back and set the styling for each and every item. This can obviously be very haphazard and time consuming.

A better way would be to create a CSS style and link the style to the relevant elements using class attributes. In the following we will create a CSS style block which sets the background color to beige. We will then apply the style to all the relevant elements.

We can also add styling which depends on the size of the screen. For example, we can apply small margins if the website is being viewed on the phone and apply large margins if the website is being viewed on a desktop computer. We achieve this using a media query.

You will no doubt have noticed that many of the styling blocks are locked, and have ‘Bootstrap’ written in the bottom right corner. These CSS style blocks are locked in Bootstrap Studio. In theory it’s possible to edit these styles, but this is not desirable. That’s because when the Bootstrap Framework is next updated you would lose all the changes you made to the Bootstrap CSS files. A better solution is to 'override' them.

We would also like to set the style for the Navbar items for when the mouse hovers over it.

In this section we will explain the basics of the flexbox.

In this example we will use flexbox to modify the article list to evenly distribute an array of icons.

You may have noticed that the footer does not always reach the bottom edge of the page. For example, if we go to the ‘About Me’ page, for screen sizes medium and larger, the footer does not reach the bottom of the page. This looks a bit ugly.

We can solve this by using flexbox to create an automatic spacing which will push the footer down to the bottom of the page.

As we have seen we don’t need to rely on existing components, but we can create our own! We can build up a component from simpler components, as we have done to create our own footer for example. Or we can start with an elaborate component and add to it, or modify it to fit our needs.

Once created, we can copy components to the library. This way we could easily use it in multiple projects without having to recreate the same elaborate component over again. And, if you are feeling generous, we could even share it online. As an example we will add the footer to the library, and use it in a new project.

Another very useful component is custom code. Custom code is simply an empty block in which you can type or paste your own code. This can be very useful because many websites and platform over you the option to generate code which you can to ‘embed’ on you website.

In Bootstrap Studio we can drag and drop multiple form elements like text input fields, radio buttons, check boxes etc... onto the canvas.

After making a form for a user to fill out, Bootstrap Studio comes with a very easy way to link the form to your email address. This way the user can fill out the form online and all the information will be sent to you as soon as her or she click the submit button. To do this we use smart forms.