Scribd
Upload
39 views2 pages

DA Basics Steps To Embed A Tableau Dashboard or Story Into A Bootstrap Webpage

Uploaded by

hencika07
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
39 views2 pages

DA Basics Steps To Embed A Tableau Dashboard or Story Into A Bootstrap Webpage

Uploaded by

hencika07
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Basics Steps to embed a Tableau dashboard or story into a Bootstrap webpage

Custom Procedure:-

Bootstrap: Bootstrap which is a popular front-end development framework that makes it easy to
create responsive, mobile-first websites. Here are the general steps for using Bootstrap in your
web development project:

Download Bootstrap: You can download the Bootstrap framework from the official website
(https://getbootstrap.com/) or download free themes from the theme wagon website -
(https://themewagon.com/theme-tag/hotel-template/?swoof=1&pa_price=free&paged=1&really_
curr_tax=447-product_tag) to include it in your project.

Include Bootstrap in your project: Download the Bootstrap files, extract the zip file, and
include the CSS and JavaScript files in your HTML code.

Set up the HTML structure: Create the basic HTML structure of your webpage, including the
head and body tags. Add the Bootstrap classes to the HTML elements to create the layout and
styling of the page. You can either write your own HTML code or change the content of the
website according to the project.

Customize the styles: Customize the styles of the Bootstrap components by adding your own
CSS code. You can either write your own CSS code.

Add JavaScript functionality: Add JavaScript code to create interactive elements on the page,
such as dropdown menus, modals, and carousels. Bootstrap includes its own JavaScript plugins
that you can use, or you can write your own JavaScript code.

To embed a Tableau dashboard or story into a Bootstrap webpage, follow these steps:

● In Tableau Desktop or Server, open the dashboard or story that you want to embed.
● Click the "Share" button in the top-right corner of the window.
● Select "Embed" from the dropdown menu.
● Copy the embed code to your clipboard.
● In your Bootstrap HTML file, create a new div element where you want to embed the
Tableau content.
● Paste the embed code into the div element.
● Save your HTML file and preview the page in your browser to see the embedded
Tableau content.

These are the basic steps for using Bootstrap in your web development project.
Use the reference files to complete the project:

● Download the reference file in zip format then extract in your local system
● Save the reference files in your project folder
● You will get bootstrap file such as HTML, CSS, and JavaScript for web development of
your project.

● HTML is used to create web pages. It provides the structure and content of a web
page by defining the elements, such as headings, paragraphs, and images, and
their relationships to each other.

● CSS is a style sheet language used to define the presentation of HTML


documents. It allows web developers to control the layout, typography, colors,
and other visual aspects of a web page, making it more visually appealing and
user-friendly.

● JavaScript that allows developers to add dynamic functionality to web pages. It


can be used to create interactive features such as animations, pop-up windows,
form validation, and more. It also allows developers to manipulate the content
and structure of a web page in real-time, based on user interactions.

● Together, HTML, CSS, and JavaScript form the building blocks of modern web
development. They are used to create responsive, dynamic, and interactive web
pages and applications that can be accessed from a wide range of devices and
platforms.

To embed a Tableau dashboard or story into a Bootstrap webpage (Refer the embed code
video and follow the below steps):

● In Tableau Desktop or Server, open the dashboard or story that you want to embed.
● Click the "Share" button in the top-right corner of the window.
● Select "Embed" from the dropdown menu.
● Copy the embed code to your clipboard.
● In your Bootstrap HTML file, create a new div element where you want to embed the
Tableau content.
● Paste the embed code into the div element.
● Save your HTML file and preview the page in your browser to see the embedded
Tableau content.

You might also like