Creating a Website with Bootstrap Studio (Tutorial)

Video ready, click here to close ×


In this video you’ll learn how to build a real website with Bootstrap Studio. We will start from a blank page and build the layout, use the responsive grid, write CSS and we’ll even make a simple gallery with a lightbox. Get Bootstrap Studio at https://bootstrapstudio.io

source

21 comments

  • How do I add links to the different menu buttons?

  • Completely Awesome!!!

  • This studio is for lazy programmers only … i suggest learn the basic one … you can debugg it whatever happens to you website 🙂
    sorry for the wrong grammar …

  • Can someone tell me where to get started to make graphic like the ones shown in the video? The cup cake icons, the heart icon and stuff? I really need to learn these. They look so bootiful and would love to make them on my own websites.

  • Can anyone tell me how to change the Navigation bar style? I tried to change its color to white or transparent but nothing work??

  • Tell me what language you guys wrote your bootstrap studio IDE in and I'll buy it. UI is so clean.

  • I really love this program, but IMO it needs to be more customizable in the UI and features.

    UI
    1. I wish the HTML and CSS sections were on the right side of the app instead of the bottom. It feels so cramped there, but that's my opinion.
    2. I would also like for each section of the UI (Overview, HTML/CSS, Options, etc.) to have it's own tab that can be moved and docked anywhere on the app similar to most modern applications with a tab interface.

    Features
    1. I would like more freedom using Bootstrap elements. Right now many Boostrap elements seem to be 'locked' from modification and the only way to edit them is to convert them to custom code (which is a bad feature that I will explain later). I wish I could duplicate them as my own and modify them without converting them to custom code.

    2. The custom code feature is just frustrating when I have to resort to it. After converting my HTML structure to custom code – or importing one – I lose the HTML hierarchy in the Overview and I am no longer able to select anything within it on the viewport and I can no longer easily add classes and IDs to elements. IMO instead of the custom code feature, BS should just use imported HTML just like anything else in the program and still be able to use the features of the program to edit it.

    3. Remove the restrictions of placing certain elements within others. Several times I needed to place an element within another, but the program did not allow it which then forces me to find dumb work arounds or convert to custom code and lose everything that the program was supposed to make editing the code faster. This IMO makes things more frustrating when I want to do something that I could do by hand, but not with this program. Please do something about it.

    Aside from these flaws that I hope eventually are fixed in newer versions, this program is really amazing and I love it so much! It allows me to make things that would've taken about a week by hand, just in a day. This program has really improved my productivity! I really hope that these great developers consider my criticisms and hopefully fix them in the future. This program was one of the best $25 I've spent!

  • This is a fairly good tutorial but unless I missed something, it is how to build a web PAGE, not website. Can this page become a template? Are the nav and footers connected to the rest of the pages? I wish these things were mentioned here. Not taught here, but mentioned so we know.

  • It's a nice program, but it hurts to be talked to like I was a 7 years old.
    "Look, we can edit the HTML code, guys!"
    Oh, please. Just show me how the program works.

  • i was wondering after i make the website in here can i copy the html code and everything and paste it into visual studio 2015 and add the bootstrap files into visual studio and then do the backend programming using c#??
    will it work? or will i have to do something more?

  • Yesterday was the first time I'd ever even heard of Bootstrap, so this morning I went looking for some videos that would explain it to me. This is the best video demo I've seen yet, but though it starts AFTER downloading or installing or whatever is required, so I still don't get that part of the process.

    And please get the narrarator to stop saying "buddon." It's annoying.

  • Could you make a video on how to make a membership website in bootstrap studio?

  • Very nice tutorial.
    When changing the theme, my "Navbar Brand" item disappeared. Not sure why as I followed your steps… Any idea?
    Thank you.

  • did any one had any issues some css didn't work on my bootstrap studio like the jumbotron transparent / the icon cake making it large and text-align : center; does not work why is that ?

  • Created my website following your tutorial, and now the page loads from the bottom up first. Thought it was the footer, but changed it out and still does it. Any ideas?

  • This is a keeper. Thanks for the quick and great tutorial.

  • Thank you so much for sharing awesome tutorial….

  • which softwere r u using to edit this code ?

  • Just bought this yesterday and love the flexibility. Upgrading my skills to force me to understand the code, and this video helped a lot. I followed along with the entire video, stopping, backing it up, starting, and created my first website. Now I can market my skills as WordPress and Bootstrap expert. Thank you!!!

  • The Next development to this App should be like webflow and i'm really looking forward for next advancement :)

Leave a Reply

Your email address will not be published. Required fields are marked *