Creating a Website with Bootstrap Studio (Tutorial)
ฝัง
- เผยแพร่เมื่อ 7 ก.ย. 2024
- 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 bootstrapstudi...
The image assets that we used: bootstrapstudi...
The resulting bsdesign file: bootstrapstudi...
![🎤 ไปกันต่อออ! จับฉลากร้องเพลง x P’ #XXSIVK [EP.2] (1/2) เพลงของใครจึ้งสุดน้าา 💓🎤 #MXFRUIT](http://i.ytimg.com/vi/mLI_K0sAS4o/mqdefault.jpg)
These BSS guys really cleaned up nicely, when I purchased the license I was #1 million +, great job developers!!
Thanks for your response
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
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
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 :)
Is this out for 3 years now? Was i living under a rock?
Correct bro! 😂
Same reaction 😅
me tho 😭😭😭
Me too!
holy shit yeah
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
Wow! I have been web development for 10 years and I am super impressed by this. Bootstrap 4 is definitely the way forward.
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". 🥰
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!
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
I bought it recently. I think it's good and worth buying. I love this pure bootstrap tools.
This is an awesome tool, I'm definitely investing in it, it took me less than 2 minutes to decide
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 :)
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.
This Software will help backend devs and tasteless designers like me xD
Lol agree
Include me lol
Agree, lamo
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
Its been mid 2020 yet here I am discovering something useful tool that existed for all more than 3 years ! XD
Recommended for user who no familiar with coding and who want to save time. Very handy, good design software
.
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! ;)
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.
The 30 minutes watching this video is up there with the top 10 most enjoyable things I have ever experienced, I am not kidding.
this is one of the BEST tutorials i have ever seen on the internet !
Thank you very much
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.
Oh thank god I don't have to search the documentation for bootstrap elements anymore. This is a really good app.
I have to admit, this is a great web app, I'm a dreamweaver fan myself, but this could come in handy.
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.
For those asking about the Jumbotron: yes it was dropped in Bootstrap version 5. However if you still want to add it for the purpose of this tutorial, you can find it by clicking the Online tab in the upper left and searching for Jumbotron. Hover over the style you want and click Install. The Jumbotron will now be available as a component.
As backend engineer, bootstrap studio help me so much
great video & nice tutorial, have a great day sir
IVE BEEN LOOKING FOR THIS VIDEO TO FIND THE NAME OF THIS PROGRAM FOR WEEKS HOLY SHIT IM SO EXCITED
This is an amazing tool... in the first use i desing like an expert... Ready to buy...
Love the way it was done. Quite a feel tutos online like this.
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.
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
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.
Nice tutorial. I'm waiting another tutorial.
keep safe friend.. see u around God bless
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.
you are the man! i love your tutorials so much! please do more, i will watch everything!
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.
The interface is simple and will help in learning.
Really nice of Ludwig to voice this
This is great! I hope in the future they make a drag and drop style like wordpress page builders have.
Great application,it will help me in my web studio projects,lemme go Purchase it asap!
Just did my purchase just now I am pleased... great work saving hours here..
If you are a developer then this could be a great tool to help improve your design process. If you are a designer without sharp code skills you will probably be disappointed. I'm an ex-coder now doing prototype designs and wireframes. I thought I knew enough code that I could handle this. Kinda like giving a 6-year-old a Harley as their first bike.
I'm giving my copy to one of the devs in the office. Might go back to JustInMind.
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
This is a keeper. Thanks for the quick and great tutorial.
Seriously. This is brilliant. Been looking for something like this... how the hell am I so late?
Really its impress me!!!
i want more vedios.........
Wow, this is like the affinity software's little growing brother. I mean geez drag and drop, pro site up in minutes, go back and add some custom code for animations or what not and it's all organized as well? Yea I'm buying this tonight
Which affinity software are you talking about? Publisher?
i got the cracked version 4.something. Works like a charm. The layout is little confusing time to time but hope i'll get used to it.
where?
@@bruh-qm7gb google "bootstrap studio torrent"
@@tarequrrahman3111 thanks.
Nice tutorial my friend. We want more videos like this. thanks 👏👏👏👏 👍👍👍👍 🤜🤛
this is awesome tool,
a time saver for sure,
and the price are great too.
this the future of web development
I even like your way of expressions Soo good
I always loved hand-coding the UI but this looks promising...
Take my positive feedback!!!
YOU ARE AMAZING!!!
Great video. Instructor is very good.
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
excellent tutorial , well made , exellent rythm ..thanks for the good job
the .txt file is no longer the img assets file?
you make it look so simple.
really really like it so far. Well done gents!!
this video is amazing, best tutorial ever.
it is really a good program. Looking forwards for more powerful functions.
@Bootstrap Studio Please do more tutorial videos. I am a beginner in bootstrap and bootstrap studio. I bought the bootstrap studio version for a lifetime and I do not know how to use this software to help me and produce more videos for us.
Thank you so much for sharing awesome tutorial....
Glad I purchased a lifetime license!
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.
great tutorial great instructor :) thank you for this :)
i like BS it is very helpful and straight forward.
Can we get an updated tutorial for the latest version of BS studio??? With the latest version, there’s no Readable theme, and the nav is contained in a navbar-collapse which seems to prevent it from aligning right. (If you just follow along with the tutorial)
Bootstrap Studio more small small Tutorial Require.
Bootstrap Studio is Awesome.
Awesome, It's really nice easy to use make a website as faster.
Such a good idea.
hello you are great tutorial i like it
I cannot find the text file attached for the bakery practice file.
man you are great . this is fucking great tutorial . greatly explain hope i found series of these tutorials on your channel
this is dank indeed
Thank you very much! Simple and objective as I needed.
I like the disney-art-attack tone of voice! XD
Awesome video! Thanks!
Thank you very much for this wonderful video ♥
Weldon very nice tutorial please make another complete website video i am waiting.
That looks like a great program.
This almost feels like cheating
Lifecheats dawg.
Yeah "almost"
this is same in java's JFX in scene builder you can design a UI in 10 minutes
Cheat in programmer is good. Bcz many think we should do
Think so.
Really great
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.
The Next development to this App should be like webflow and i'm really looking forward for next advancement :)
Nice video !!! Tks bro.
good job sir,really good i am no try but Hope you get well
Fantástico aplicativo. Excelente vídeo. Está me ajudando muito. Obrigado por compartilhar seus conhecimentos e informações.
Thank you it works with me
Love it! Followed it with ease. Cheers!
thanks.... really productive!
It is really a creative program, I like it
Amazing! I hope this 25usd last till begin of the next month! It's a sure thing for me!
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.
Pinegrow Web Designer is free, check it out! :)
Thats the best thing i have ever seen