In This Article, We Are Going To Discuss How to Make Interactive Website Designs with Bootstrap In 2020
Dreamweaver allows you to create Bootstrap documents and modify web pages created with Bootstrap. Whether they are fully designed Bootstrap files or work-in-progress files, you can edit them in Dreamweaver; not just for code editing, but also for making design changes with great visual editing features like Live View, CSS Designer, Visual Media Queries, and Extract.
Click here – Can’t afford Netflix? Here is the list of top 10 streaming websites
Create Bootstrap docs
You can start designing your website with Bootstrap using one of the following options in the New Document dialog :
Just edit the text and replace the assets, if you need to, and you’ve created an interactive website. For more information and easy going you can start with Bootstrap Templates.
Create an HTML document based on the Bootstrap framework (New Document > HTML > Bootstrap ): Use this option if you want to create your website step by step, using Bootstrap and CSS components in Dreamweaver. For more information, see Creating HTML documents based on the Bootstrap framework.
Creation of HTML documents based on the Bootstrap framework
You can start building your interactive website by creating an HTML document based on the Bootstrap framework.
- Click File > New
- In the New Document dialog, click New Document > HTML, and then click the Bootstrap tab.
- To create a new bootstrap.css file (and all other Bootstrap files), do the following:
If you decide to use an existing CSS, specify the path or go to the location of the CSS.
- Click Create New.
- The Attached External Style Sheet dialog appears. Specify the settings and click OK.
- These include a pre-created layout option that provides a basic Bootstrap document structure.
- If you don’t want to use the basic structure and prefer to start with a blank document, deselect the previously created layout option.
- If you want to open the Extract panel (if it is closed), select Use Extract to create a page from Photoshop comps. So you can start extracting content from your Photoshop comps right away.
A new site will be created by default with version 4.4.1. By Bootstrap. After creating the document, you will be able to find the CSS and js folders in the root folder of the site.
However, if you want to create the site with Bootstrap version 3.4.1, select Site > Manage Sites. Select the root folder of the site. Click Advanced Settings > Bootstrap. In the Bootstrap Version drop-down field, select 3.4.1. For Bootstrap version 3.4.1, you will find the CSS, js, and sources folder in the root folder of the site.
JQuery version 3.4.1 supports pages built on Bootstrap 4.4.1. Bootstrap starter templates will be updated to Bootstrap version 4.4.1.
When you add Bootstrap components to a Bootstrap page, you can upgrade the pages from Bootstrap 4.0.0 to Bootstrap 4.4.1 and the jQuery version to 3.4.1. Click Yes in the dialog that appears when you insert Bootstrap components on the page.
When importing a Bootstrap 4.0.0 site or migrating a site from earlier versions to the next version of Dreamweaver, the Bootstrap version is set to 4.4.1 in Site Settings> Advanced Settings> Bootstrap.
Click here – Tips to Write HD Quality Nursing Assignment For You
Open Bootstrap files
You can open Bootstrap files in one of the following ways:
- Click File > Open and browse for the Bootstrap HTML file.
- (Recommended) Create a Dreamweaver site and point to the site folder in the folder that contains all your Bootstrap files.
When opening a Bootstrap HTML file in Dreamweaver:
- Rows are highlighted with gray dashed lines and corners are rounded
- Columns are highlighted in blue, with dashed lines
How to Hide, show and manage Hidden Bootstrap Elements?
Sometimes you may need to display an element in one viewport and at the same time hide that element in another viewport for design reasons.
To hide a Bootstrap item, right-click and select Hide Item. The item will be temporarily hidden and you will not be able to see it.
To view and show hidden items, right-click, and select Manage Hidden Items. Hidden items will appear gray with a shaded background. Click the eye icon to display the item.
Add Bootstrap Components
The Glyphicons, Panel, Areas, and Thumbnails components are only available in Bootstrap v3.3.7. Depending on the version of Bootstrap, you will see the corresponding components in the Insert panel. Also, the twist controls component is only available in Bootstrap v4.4.1.
- Document in focus: The components of the Insert panel are populated based on the version of Bootstrap that comes in the Bootstrap file that is linked to the document.
Use these aids to quickly and accurately place components on your page. For more information on inserting elements on your web page, see Insert panel overview. You can also contact Dubai SEO Agency for better guidance.
Add Rows
Click the row after which you want to add the new row. Then click the Add new row icon. A Bootstrap row will be added along with two-column child elements with six columns each.
The code for the added row is as follows:
You can start with <div class = “row”> Then Afterwards use <div class = “col – * – 6”> </div> on the next row add <div class = “col – * – 6”> </div>
Once it’s done, then at the end close it with </div>
The * in the above code represents the current size of the screen in Dreamweaver.
Add Columns
Empty columns will display a minimum height of 20 px. However, this height is not added to the page, it is displayed only in Live View to make it easier to insert items into columns.
Resize and move Columns
The task of resizing and moving columns becomes essential when creating interactive layouts for multiple viewports.
To Resize Columns
Click on the column in question and drag the handle to the right to resize. For a Bootstrap v4.0.0 document, resizing a column adds the class col – * – n, where * represents the current media query (sm, md, ld, xl) and n represents the number of columns that occupy. For the SuperSmall screen size, the col-n class is added.
To Move Columns
Click on the column in question and drag the handle to the left to move that column. The offset will be shown as a shaded area. For a Bootstrap v4.0.0 document, moving the column adds the class offset – * – n, where * represents the current media query (sm, md, lg, or xl), and n represents the number of columns it occupies.
For Bootstrap v3.3.7 documents, when moving a column, the class col – * – offset-n is added.
If you want to move the columns to fit specific viewports, resize the viewport using the options displayed in the lower right corner of the scroll bar. Then move the columns accordingly.
