January 18, 2017 at 3:18 pm #3286Danny MarkovBootstrap Studio Developer
When you click the “Apply” button (or hit Ctrl/Cmd + S) the Preview is automatically reloaded so you can try out your changes immediately (see our tutorial about Preview and Export for more).
2. WRITING CSS
There are two ways to edit CSS in Bootstrap Studio. The first is to use the Styles tab and edit the styles of the selected component. The other is to create separate CSS files in Design pane and edit them.
2.1 THE STYLES TAB
The bottom part of the window holds two areas – HTML and Styles. HTML gives you a real-time preview of the generated HTML for the page with the ability to select elements, define attributes, IDs and css classes.
The Styles area shows you the applied CSS styles for the HTML elements that you select. This is a quick way to check what styles are active at any given moment, and to easily override default Bootstrap styling.
The Styles tab pulls CSS definitions from Bootstrap’s CSS file, as well as all other CSS files that you create. Note that Bootstrap’s styles are locked – you can’t edit them directly. To change them, you need to Copy them to your own stylesheets.
2.2 CREATING CSS FILES
To do any real CSS editing, you need to create a stylesheet in the Design panel. By default, every new design comes with a styles.css file, but you can create as many files as you wish. Just right click the “Styles” label and choose the create option.
2.3 EDITING CSS
Now that you have a stylesheet file, we can start editing CSS! Double click the file and our CSS editor will pop up.
Click on a selector, css property or a value to edit them. Hit Enter or Tab to move to the next rule, and Shift+Tab to the previous. You can click in between rules to create new ones and in between css blocks to create new blocks with css code (this is not available in the Styles tab).
Images and fonts that you’ve added to the Assets panel will be automatically picked up and shown as suggestions when appropriate.
There is a full undo/redo history, so feel free to experiment!
When you click the three dots on the top right of each CSS block, you will see the menu that is shown above. You can duplicate, toggle media queries and delete entire blocks of CSS from the menu.
Tip: There is a quick way to delete CSS styles. When you focus a css selector, hit the Delete/Backspace key to empty it, and Enter to confirm changes. This will delete the entire block and move on to the next.
3 ADDING CLASSES, IDS AND ATTRIBUTES
Adding your own classes and ids is very important when writing and reusing CSS styles. To do it, click the Attributes panel on the bottom of the HTML tab.
In this panel you can change id and class names, or add additional attributes to elements by clicking the + button at the bottom right.
Note: You can add any CSS class that you wish, but some, like text-left in this picture, are locked. To change locked classes in Bootstrap Studio, you need to modify the component’s settings in the Options panel.
Congrats! You can now create any kind of design imaginable with Bootstrap Studio. Our application makes writing CSS both easy and fun and you will soon dread having to go back to a text editor again.February 14, 2017 at 4:41 pm #3700
This is my website from ultimate blocks from php server
I have exported in zip this project site.
For exporting to the bootstrap.
I would like to see my webpage created in the bootstrap studio looks so.
February 24, 2017 at 10:28 am #3877nan wint yeeMember
HelloMarch 3, 2017 at 3:06 pm #3964Bashiir12MemberMarch 3, 2017 at 8:10 pm #3967
I think that bootstrap studio app is perfectly a miracle as the app with easy oppurtunities on the constructing of website with responsive effect and with beautiful design.
Thank to them young people that have created this software. From Albania
But, when i downloaded and extracted the bootstrap templates from zip to folder that contains “js,html,css,fonts,img,etc” for importing to the bootstrap studio,
does not show anything, as the Pinegrow Web EditorMarch 10, 2017 at 6:51 am #4062kaybeeIceMember
Hi i have multiple html files created in the bootstrap studio and i also have multiple css file created as well. I would like each html files to have its own unique css file. I don’t want all the html files linking to all the css file. for example, I have two html files(first.html & second.html), i also have two css files(first.css & second.css) i would like to be able to link only the first.css file to the first.html files. I don’t want to open the first.html file to see it having both the first.css and the second.css filelinked to it. How do i get this done?March 10, 2017 at 12:48 pm #4068
Send me a screenshot brother
Wrote on google
Upload image online without registration
Copy public link and click in this icon IMAGE to paste your public link of image to understand what do you want.
You must be logged in to reply to this topic.