Thank you for this video, it is a very good idea and initiative. This makes it easier to learn and understand the software. Continue like that and make many more videos !!
Thank you, this is helpful. Please provide a video with more instructions on how to use the Appearance > Bootstrap Theme settings you mention at 0:57. Changing these settings only seems to affect text and background, but does not affect buttons, alerts etc? Please clarify. Thank you.
Do someone know how to place footer to the bottom part of the site? Because when i shrink the page in smaller screen the footer is moving and don't place to the very bottom part of the page..
I've added a Lightbox Gallery and place my images within each of the 6 boxes. However, When I preview and click on the image it shows a large empty place holder. How do you get it to show the Lightbox clicked image full screen. ?
Even if you download this template, upload to web and then open on an iPhone, things are cut off. It starts up slightly zoomed in for some reason. It's making this product almost unusable. Reproduce it by opening in a private fresh tab (iPhone 13 pro for me)
Video Title: Designing a Beautiful Portfolio Website in Bootstrap Studio Video Text: hey guys in today's video we will be designing a single page portfolio it will have a large photo with a parallax effect a hire me button and a grid of recent projects we begin with an empty bootstrap 5 design i have prepared the photos that we'll use ahead of time just drag and drop them in our next task is to add a new font from google fonts it is called work sans we will need several font weights in our design then we create a new css block that will hold our changes the app will automatically choose the body selector for the block set the font we imported here so it can take effect after this we need to customize the bootstrap theme this will override bootstrap's colors from a single place i have a text file prepared with the colors we need i'll just copy over the primary info and dark colors set the text color make the page background dark and change the font weight we can now start laying down the page by dropping a header inside it we will add a parallax background component change its height to 600 pixels and select the header photo in the animation tab next we will add a container again create a new css block to hold the changes and then set a height and a max width this will make the element taller and narrower so it looks good on every screen size inside the container we will drop a heading and a paragraph we need these elements to stick to the bottom of the container to do this we will use the flexbox group of options remember to switch to the smallest device breakpoint this is because the flex settings are mobile first and are applied to the selected size and larger as a result the text will appear on the bottom on every screen size as for the text itself let's copy it over first the heading and then the paragraph we will make the heading big and bold the paragraph also needs to be a bit bigger to apply custom styling to it without affecting all other paragraphs on the page we need to give it a custom class name then select the class name and give the element some padding i'll give it a dark background and apply a bottom margin with bootstraps mb utility class we'll begin the next section by dropping a main component inside it we will add a section and a container to speed things up select the section and duplicate it a couple of times with the command d shortcut on mac or control d on windows add a paragraph in the container and copy the introduction text from the document we also need to make this text bigger with the font size option to create the social media icons we add a list element and switch it to inline style leave only the first list item inside it we drop an icon remove the surrounding text and switch it to the twitter icon from font awesome 5. select the parent and duplicate it double-click each of the copies to change them multi-select the three icons by clicking while holding command on mac or control on windows and apply a larger font size to all of them we just need to give them a bit of horizontal margin with the bootstrap m e class let's move on to the banner drop a div in the container and give it a unique class name create a new css block for it and select it grab a paragraph and place it in the div apply some padding to offset it from the sides then center the text choose background color and set a border radius make the paragraph larger and replace its text drop a button after the paragraph change its text make it dark and increase its size make it uppercase and bold as well grab an icon and place it after the text double-click to change it to a chevron for the project part of the portfolio we will start with a heading change the text and switch it to h2 search for a row and place it after the heading after this add a column finally add a card with overlay we will give the row a bit of vertical padding to give the project card some room to improve the responsiveness of the page we will use the per row option by setting it to 1 we make the card take the entire width of the window on medium width devices we will show 2 per row and on extra large and above we will show three select and delete the elements in the card leaving only the image double click it and choose the first project then select the column and duplicate it a few times to give the card's vertical offsets we will override a bootstrap css variable to do this select the row give it a unique class name and create a css block then just give a value to the gutter y custom property all that's left is to change the project images the last section of the website is the footer drop a footer component in the body and inside it add a row with two columns the footer itself will need a custom background color expand and select it here add some vertical padding then drop a div inside the column add a couple of paragraphs as well i'll copy over the text from our notes it will be best if we replace the heart emoji with an icon so it fits with the rest of the design make the first paragraph larger and bolder and remove the bottom margin the footer has a copy of the same social icons we made earlier so we can just copy them over to copy press command c on mac or ctrl c on windows right click and choose paste linked this will create a synced copy of the icon so they remain identical regardless of which copy we edit let's see how the design looks on smartphones we need to center the footer content to do this use the alignment option give the element some vertical space use the py utility class to center the icons we will use the flexbox group to clear the extra space on the bottom use the mb0 class on medium-sized screens we need to undo the centering we'll just use the flexbox group and text align option again another thing we need to improve is to give our section some padding multi-select them by clicking while holding shift then assign the py utility class to all of them 5 is a bit too much in our case so i'll set it to 4 on all screen sizes and to 5 only on large displays with this our design is complete in the next videos of the series we will enhance the portfolio with css animations build a working hire me form and add switching between dark and light mode as always you can grab the finished design in the description if you like this video subscribe to our channel thank you for watching you
Hi, thanks for this nice video that shows how fast you can create a website. One thing I don't want at all is inline styles. There is an inline style for the parallax background. I managed to move the css for the parallax background to its own class or id. Once I export the files and launch the site, no parallax image is displayed. How can I implement an export without inline styles?
This tutorial appears to assume the viewer is familiar with the terms Parallax effect, containers, css blocks, body selector, etc etc. Anyone know of a more detailed tutorial on designing a website with Bootstrap Studio. Preferably by someone NOT in a hurry and can add a more detailed explanation. Let's not just stick things together. We can all do that to a certain degree. As I didn't get an answer to my last post 8 months ago I doubt very much if I get one for this.
Thank you BS Studio team for the video. More such videos are required. They would be helpful for us to learn things faster.
LOL "BS" Studio
didn't read that one twice did ya?
Thank you for this video, it is a very good idea and initiative. This makes it easier to learn and understand the software. Continue like that and make many more videos !!
Why so little number of videos? This videos are amazing, and teach very important lessons on the use of tools.
fr
It’s not clear why there are so few tutorials for this amazing tool
I have not found anything better and I’ve been looking
keep on uploading videos bootstrap studio user here
I look forward to more tutorials 🤓.
more tutorials please～～～～～
please make more tutorials like that. thanks.
Very helpful! More videos, please!
More tutorials please. 🙏
Thank you, this is helpful. Please provide a video with more instructions on how to use the Appearance > Bootstrap Theme settings you mention at 0:57. Changing these settings only seems to affect text and background, but does not affect buttons, alerts etc? Please clarify. Thank you.
YAYYY NEW VIDEO
love this
We want more project by using this program
More videos please!!
Do someone know how to place footer to the bottom part of the site? Because when i shrink the page in smaller screen the footer is moving and don't place to the very bottom part of the page..
I've added a Lightbox Gallery and place my images within each of the 6 boxes. However, When I preview and click on the image it shows a large empty place holder.
How do you get it to show the Lightbox clicked image full screen. ?
Is there a way to add vertical menus using Bootstrap studio?
I want to import a Bootstrap template into Bootstrap Studio 5 but the index.html file isn't recognised. What am I doing wrong?
Even if you download this template, upload to web and then open on an iPhone, things are cut off. It starts up slightly zoomed in for some reason. It's making this product almost unusable. Reproduce it by opening in a private fresh tab (iPhone 13 pro for me)
which editor do you use
Video Title: Designing a Beautiful Portfolio Website in Bootstrap Studio
Video Text:
hey guys in today's video we will be
designing a single page portfolio
it will have a large photo with a
parallax effect a hire me button and a
grid of recent projects
we begin with an empty bootstrap 5
design i have prepared the photos that
we'll use ahead of time just drag and
drop them in
our next task is to add a new font from
google fonts
it is called work sans
we will need several font weights in our
design
then we create a new css block that will
hold our changes
the app will automatically choose the
body selector for the block
set the font we imported here so it can
take effect
after this we need to customize the
bootstrap theme
this will override bootstrap's colors
from a single place
i have a text file prepared with the
colors we need
i'll just copy over the primary
info and dark colors
set the text color
make the page background dark and change
the font weight
we can now start laying down the page by
dropping a header
inside it we will add a parallax
background component
change its height to 600 pixels
and select the header photo in the
animation tab
next we will add a container
again create a new css block to hold the
changes
and then set a height and a max width
this will make the element taller and
narrower so it looks good on every
screen size
inside the container we will drop a
heading and a paragraph
we need these elements to stick to the
bottom of the container
to do this we will use the flexbox group
of options
remember to switch to the smallest
device breakpoint this is because the
flex settings are mobile first and are
applied to the selected size and larger
as a result the text will appear on the
bottom on every screen size
as for the text itself let's copy it
over
first the heading and then the paragraph
we will make the heading big and bold
the paragraph also needs to be a bit
bigger
to apply custom styling to it without
affecting all other paragraphs on the
page we need to give it a custom class
name
then select the class name and give the
element some padding
i'll give it a dark background and apply
a bottom margin with bootstraps mb
utility class
we'll begin the next section by dropping
a main component
inside it we will add a section and a
container
to speed things up select the section
and duplicate it a couple of times with
the command d shortcut on mac or control
d on windows
add a paragraph in the container and
copy the introduction text from the
document
we also need to make this text bigger
with the font size option
to create the social media icons we add
a list element and switch it to inline
style
leave only the first list item
inside it we drop an icon
remove the surrounding text and switch
it to the twitter icon from font awesome
5.
select the parent and duplicate it
double-click each of the copies to
change them
multi-select the three icons by clicking
while holding command on mac or control
on windows
and apply a larger font size to all of
them
we just need to give them a bit of
horizontal margin with the bootstrap m e
class
let's move on to the banner
drop a div in the container and give it
a unique class name
create a new css block for it and select
it
grab a paragraph and place it in the div
apply some padding to offset it from the
sides
then center the text
choose background color
and set a border radius
make the paragraph larger and replace
its text
drop a button after the paragraph
change its text
make it dark and increase its size
make it uppercase and bold as well
grab an icon and place it after the text
double-click to change it to a chevron
for the project part of the portfolio we
will start with a heading
change the text and switch it to h2
search for a row and place it after the
heading
after this add a column
finally add a card with overlay
we will give the row a bit of vertical
padding to give the project card some
room
to improve the responsiveness of the
page we will use the per row option
by setting it to 1 we make the card take
the entire width of the window
on medium width devices we will show 2
per row
and on extra large and above we will
show three
select and delete the elements in the
card leaving only the image double click
it and choose the first project
then select the column and duplicate it
a few times
to give the card's vertical offsets we
will override a bootstrap css variable
to do this select the row
give it a unique class name
and create a css block
then just give a value to the gutter y
custom property
all that's left is to change the project
images
the last section of the website is the
footer
drop a footer component in the body
and inside it add a row with two columns
the footer itself will need a custom
background color
expand and select it here
add some vertical padding
then drop a div inside the column
add a couple of paragraphs as well
i'll copy over the text from our notes
it will be best if we replace the heart
emoji with an icon so it fits with the
rest of the design
make the first paragraph larger and
bolder
and remove the bottom margin
the footer has a copy of the same social
icons we made earlier so we can just
copy them over to copy press command c
on mac or ctrl c on windows
right click and choose paste linked
this will create a synced copy of the
icon so they remain identical regardless
of which copy we edit
let's see how the design looks on
smartphones
we need to center the footer content to
do this use the alignment option
give the element some vertical space use
the py utility class
to center the icons we will use the
flexbox group
to clear the extra space on the bottom
use the mb0 class
on medium-sized screens we need to undo
the centering we'll just use the flexbox
group and text align option again
another thing we need to improve is to
give our section some padding
multi-select them by clicking while
holding shift
then assign the py utility class to all
of them
5 is a bit too much in our case so i'll
set it to 4 on all screen sizes and to 5
only on large displays
with this our design is complete
in the next videos of the series we will
enhance the portfolio with css
animations build a working hire me form
and add switching between dark and light
mode
as always you can grab the finished
design in the description if you like
this video subscribe to our channel
thank you for watching
you
Can anyone please tell me how to find the next video?
Hi, thanks for this nice video that shows how fast you can create a website. One thing I don't want at all is inline styles. There is an inline style for the parallax background. I managed to move the css for the parallax background to its own class or id. Once I export the files and launch the site, no parallax image is displayed. How can I implement an export without inline styles?
Without the parallax effect, there is no inline style. Then I work without this element.
The JS that provides the parallax animation needs at least the picture url inline styling so it "knows" what image to apply the effect to.
This tutorial appears to assume the viewer is familiar with the terms Parallax effect, containers, css blocks, body selector, etc etc. Anyone know of a more detailed tutorial on designing a website with Bootstrap Studio. Preferably by someone NOT in a hurry and can add a more detailed explanation. Let's not just stick things together. We can all do that to a certain degree. As I didn't get an answer to my last post 8 months ago I doubt very much if I get one for this.
Hello Team,
If i purchase the Lifetime Package then in how many devices can i install ?
As far as I remember its 3 or 5 devices
*EDIT: its 3 :p*
Good...
Cool
💓💓💓
我怎样才能看到中文版啊
我们的程序界面目前仅提供英文版本。 该界面不支持其他语言。 但您可以用任何语言创建网站。
ᴘʀᴏᴍᴏsᴍ 😑
in Spanish please!! or substitule
bueno, es mejor que aprendas en inglés porque los lenguajes de programación están en inglés al igual que HTML y CSS