Creating a Website with Bootstrap Studio (Tutorial)
Vložit
- čas přidán 16. 08. 2016
- 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 bootstrapstudio.io
The image assets that we used: bootstrapstudio.io/resources/...
The resulting bsdesign file: bootstrapstudio.io/resources/...
These BSS guys really cleaned up nicely, when I purchased the license I was #1 million +, great job developers!!
Thanks for your response
Wow! I have been web development for 10 years and I am super impressed by this. Bootstrap 4 is definitely the way forward.
Great video! Thank you, I think I'm an actual developer now! Could not get the Bootstrap grid concept, now I read the code at the same time, it's very useful to see how it is constructed, of course you can't rely only on that tool but it can help you learn
Best purchase in my life. And for only 25$ for 3 pcs so I can use it at home and at work. Thank you guys for this AMAZING tool
you are the man! i love your tutorials so much! please do more, i will watch everything!
Your rhythm while talking makes it sound like you're about to break down into a beat any moment.
haha I think he is a voice-over guy from fivver. I remember his voice
This is an awesome tool, I'm definitely investing in it, it took me less than 2 minutes to decide
Is this out for 3 years now? Was i living under a rock?
Correct bro! 😂
Same reaction 😅
me tho 😭😭😭
Me too!
holy shit yeah
This is a keeper. Thanks for the quick and great tutorial.
Love the way it was done. Quite a feel tutos online like this.
Had no idea this even existed and it’s 2020 now.
Totally! I just bought this three years ago and it was sitting in my computer. I booted it up and again and I was like, "Why haven't I been using this?!"
Same
yeah i cant believe i wasted my whole semester studying web programming without knowing this exists dude...
Yeah right? Like ive been working with bootstrap for a few years now and i had no idea this existed. Im trully amazed.
@@robbialfianto7609 wow...I too didn't know something like this existed..hahahhhahhaha...I just stumbled in this channel
Thank you very much! Simple and objective as I needed.
Nice tutorial. I'm waiting another tutorial.
this is one of the BEST tutorials i have ever seen on the internet !
Thank you very much
I freaking love this program. Tried a lot of different ones, and this one just makes sense. This is how web design ought to be. Easily worth the asking price.
palewine after developing the site using the tool ? can we do further work with PHP n MySQL ?
Skully6 yep :)
I bought it recently. I think it's good and worth buying. I love this pure bootstrap tools.
This is an amazing tool... in the first use i desing like an expert... Ready to buy...
Just did my purchase just now I am pleased... great work saving hours here..
What I've done with my life all this time? There is a before and after to this video in muy life. Thanks alot! Gonna suscribeme right now!
this video is amazing, best tutorial ever.
Take my positive feedback!!!
YOU ARE AMAZING!!!
This is great! I hope in the future they make a drag and drop style like wordpress page builders have.
Amazing. There's many things I can do with bootstrap. Happy to learn.I thought I cannot change css of bootstrap. But this video give me idea to change. Although I'm not going to use bootstrap studio (cause I'm a beginner at coding) but I'm going to use the css writing.
Love it! Followed it with ease. Cheers!
You made this looks like a piece of cake. Please continue making more videos. I look forward for upcoming update, and I subscribed your channel.
IVE BEEN LOOKING FOR THIS VIDEO TO FIND THE NAME OF THIS PROGRAM FOR WEEKS HOLY SHIT IM SO EXCITED
this is awesome tool,
a time saver for sure,
and the price are great too.
This Software will help backend devs and tasteless designers like me xD
Lol agree
Include me lol
Agree, lamo
Thank you so much for sharing awesome tutorial....
Great video. Instructor is very good.
excellent tutorial , well made , exellent rythm ..thanks for the good job
great tutorial great instructor :) thank you for this :)
really really like it so far. Well done gents!!
I have to admit, this is a great web app, I'm a dreamweaver fan myself, but this could come in handy.
Fantástico aplicativo. Excelente vídeo. Está me ajudando muito. Obrigado por compartilhar seus conhecimentos e informações.
Nice tutorial my friend. We want more videos like this. thanks 👏👏👏👏 👍👍👍👍 🤜🤛
this is great!! thank you bootstrap studio
Great program, wish you could have more videos though. There are times it gets very frustrating and it would be great to have video tutorials on how to upload a map for example.
Seriously. This is brilliant. Been looking for something like this... how the hell am I so late?
it is really a good program. Looking forwards for more powerful functions.
Its been mid 2020 yet here I am discovering something useful tool that existed for all more than 3 years ! XD
You can't believe how this is great for a backend developer that had no feel for beauty and colours
I fell the same
@@legendaryrex9676 What's your deal
I'm into nodejs
Newbie though
Recommended for user who no familiar with coding and who want to save time. Very handy, good design software
.
I bought it right after watching this video. loved the demo.
High Five for the awesome creators of this. You are gonna save a lot of time for me. #BeAwesome
still good?
Tell me about your expirence for this application did advice me to pay it
thx man, very good tutorial. keep uploading videos plz!! ; o )
Oh thank god I don't have to search the documentation for bootstrap elements anymore. This is a really good app.
Seems you still got to know a lot of CSS for working with this. I wish it was more like right-click on the page and change things without knowing CSS.
I'm working through this video with BSS v5.03. The software (and Bootstrap) have changed since this video was made.
06:55 The Theme button is no longer on the toolbar. Instead there is a Settings button with a Design sub-category which has the theme as an option. The Readable theme does not exist in Bootstrap 4, instead there is a theme called Litera which is the nearest substitute.
i am also having same issue i cant find the button to move the navbar to the right
for anyone needing to know, this setting is under Options. Set Alignment to Right.
For those wanting to use the Readable theme, you must select BS v3 framework when starting the new design.
I like the disney-art-attack tone of voice! XD
Weldon very nice tutorial please make another complete website video i am waiting.
Great application,it will help me in my web studio projects,lemme go Purchase it asap!
Awesome! Great tutorial!!!
Wow i love it!
excuse me sir which version is this you have?
I like it. Website Builders like Mobirise are quite good for non-coders. This one makes it easy to do both coding and visual editing smoothly.
*Keep it up! You've got a new subscriber!*
The interface is simple and will help in learning.
Thank you very much for this wonderful video ♥
i like BS it is very helpful and straight forward.
WoW beautiful tutorial !
thanks.... really productive!
A very good tutorial that helps me a lot. Thank you :)
Will there come more tutorials?
Awesome, It's really nice easy to use make a website as faster.
Very nice tutorial.
When changing the theme, my "Navbar Brand" item disappeared. Not sure why as I followed your steps... Any idea?
Thank you.
That looks like a great program.
I even like your way of expressions Soo good
Amazing! I hope this 25usd last till begin of the next month! It's a sure thing for me!
Awesome video! Thanks!
Wow. Bootstrap Studio is only $25 right now so I got it. Life saver!
why would you pay something when there are free options, like notepad++ or atom
GodricThe I use Eclipse. But it's nice to try something new for designing websites.
i costs money, i don't like it. what can i say, i've born into wrong religion :D
Convenience of Bootstrap Studio for $25... Worth every penny I think. Brilliant interface. Sometimes hard to work around when beginner with Bootstrap. But definitely better to manage CSS and HTML within this environment than other I tried (netbean...)
linuxmq Exactly! ;)
As backend engineer, bootstrap studio help me so much
The Next development to this App should be like webflow and i'm really looking forward for next advancement :)
I'm glad I'm not the only one who know this exist at the same time I'm sad i know bootstrap studio at the end of 2019, i hope that i know this earlier
Completely Awesome!!!
Great tutorial Man. I have one challenge, whenever i upload the background picture (background.jpg) it covers the entire background very unlike yours which leaves white space beneath it. I followed all your steps.
Take my money! I've been looking for something more substantial than Muse, and give me more control than Unbounce. I seriously just punched the air.
David Connelly I Agree!
Pinegrow Web Designer is free, check it out! :)
Where did you see free? I cannot see it !
Kordikk696 The free stuff is a Trial version so
it is not a Free software. After that, it costs 49 usd as the cheapest option
I got mine for just $25. Worth every penny.
After all my efforts for doing manual html typing ....
This will save me a lot of time
ikr for me it feels like im cheating
you make it look so simple.
Looks awesome. I will urge my company to but it.
Also clealy visible from this video is that BSS really needs reusable components (gallery thumbnails) with an ability to override its parts (set different images).
In a form of component templates with facets to implement would be nice.
Page templates also would fit in. Because why copying navbar/footer everywhere by hand?
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!
I totally agree with this
Just a note from 6 years later. It looks like the problem of custom code has been solved, so it can be converted back into components, and html pages can be imported.
Thank you for the video. I had a question if anyone can help. I just bought this but I don't have a theme button as shown at 7:03. I have a setting button, which then shows a theme button inside it, but it just says I don't have any themes yet. It gives me the option of importing a .css file but I don't know where I can get these. Thanks
WHAT? Why I only discover this at the end of 2019 ?
you are not alone
Same here
me too =))
me too here man
The same to me.
It is really a creative program, I like it
I LOVE this tool. Have been using it for YEARS. I only WISH they would release a "Tailwind Studio" now that everyone I know is transitioning away from Bootstrap.
It is also adorable how the announcer says "Buddins" and "Liberry". 🥰
great video & nice tutorial, have a great day sir
Thats the best thing i have ever seen
I always loved hand-coding the UI but this looks promising...
i love it it's easy and very usefull
help please : when you added an icon, it looks already centered, but when i add an icon it is aligned to the left.
how to align to center please?
I like bootstrap studio a lot. I am a developer but I don't like HTML and CSS. Finally a visual builder that still allows full control over the code :)
Such a good idea.
Great tuts ! But I would just like to ask on how to preview it on the browser since it's on .bsdesign extension ?
Hello,..so I have been having to use Sharepoint for websites as dictated by my employer. I have found a nice work around by simply importing all of the necessary files created in XaraWeb Designer into a blank Sharepoint folder and it shows and plays great, so long as I point the reference (in a blank Sharepoint Page) to the correct index file as imported into Sharepoint Designer folder.
I'm assuming that I should be able to do the same with a site using Bootstrap created files. Basically I need to be sure to import the index file and the Assets folder into the Sharepoint folder. Am I correct?
Thank you it works with me
man you are great . this is fucking great tutorial . greatly explain hope i found series of these tutorials on your channel
I cannot find the text file attached for the bakery practice file.
Great software!
Really its impress me!!!
i want more vedios.........
It Looks and Feels great To Me
Just came across this.. seems good! A few questions, any styling needs to be done via code? Is there a style gui? Also, when it comes to resizing...Also done via code? Can i just grab a corner in the boundary box?
Hello, thanks for the tool. But when I add a logo to the Navbar-brand as shown in the video. The logo appears above the (Brand) text, not next to it. Do you know how to fix this? I've tried to play with margin and padding with no success.