Bootstrap Theme Business

Bootstrap Theme Business / Getting Started

This file will help you getting started with the Theme

Installation


Responsive Bootstrap Theme

Follow the steps below to start working on this Responsive Bootstrap Theme:

  1. Unzip the download file bootstrap-biz-1.zip to a new folder that you can name as 'my site'. Your unzipped file will have two main folder. One is a folder named 'documentation' to guide you through customizing the template and the second one is named 'site' which is the actual one that holds all the files and folders you will be working on.
  2. Once your site is completed you will need to upload these files to your Web Server using FTP in order to use it on your Website.
  3. Make sure you upload the required files/folders listed below (don't upload the documentation folder):
    • assets/ - jQuery scripts Folder
    • email/ - Email scripts Folder (required to make the contact form functional)
    • images/ - Images Folder
    • portfolio/ - Portfolio Folder for portfolio page thumbnails and large previews
    • scripts/ - Bootstrap jQuery and CSS files Folder
    • slider-images/ - Slider images Folder
    • styles/ - Custom style sheet and layout backgrounds Folder
    • index.html - Home-Page and other site html pages including contact.php page

  4. You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

Page Structure

All the content is enclosed in #pageBody

<body id="pageBody">
    ...
</div>

The page is divided into 5 Areas:

  1. Logo Area - #divLogo
  2. Top Navigation Area - #navbar
  3. Sliders - #camera_wrap
  4. Main Content Area - #contentArea
  5. Footer - #divFooter

#slider - Only on Home Page

Grid Structure

  • .sidebar - Sidebar
  • .span12 - Full Column (Full Page)
  • .span6 - Half Column
  • .span4 - One-Third Column
  • .span8 - Two-Third Column
  • .span3 - One-Fourth Column
  • .span9 - Three-Fourth Column
  • .span2 - One-Sixth Column
  • .span4 - Two-Sixth Column
  • .span10 - Five-Sixth Column

Bootstrap Documentation for scaffolding at: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

Logo Editing

The Logo Container can be found in between the commented tags - !--Edit Logo here--

<div id="divLogo">
    <a href="index.html" id="divSiteTitle">Your Site Name</a>
    <a href="index.html" id="divTagLine">Your Tag Line Here</a>	
</div>

You need to type in your site name and tag line.

Inserting your own Logo

If you wish to use your own Logo, make sure that that it does not exceed more than 350 pixels wide and 70 pixels in height. Replace the existing logo code for the following new code if you wish to use your own logo:

<div id="divLogo" class="pull-left">
    <a href="index.html" id="divSiteTitle"><img src="images/logo.png" alt="Site Name" title="Site Name" /></a>
</div>

Note Ensure that your code points to the correct path of your logo's location, i.e. in your '/images' folder.

Slider Setup

The Slider can be found in the Container - #camera_wrap

<div id="camera_wrap">
			
  <div data-src="slider-images/1.jpg" ><div class="camera_caption fadeFromBottom cap1">Add a slogan or feature here...</div></div>
  <div data-src="slider-images/2.jpg" ><div class="camera_caption fadeFromBottom cap2">Add a second slogan or feature here...</div></div>
  <div data-src="slider-images/3.jpg" ></div>

</div>

Edit your images for the slider so that the dimensions are 1170 pixels wide and 410 pixels in height. Place these slider images in the folder named 'slider-images'. You can have as many slides as you wish.

You can also use your own slider. A fantastic collection of premium sliders can be seen here . We really recommend the 'Strapslide' slider which is based on Bootstrap.

Icon Settings

It is very easy to change the icons to your own style by changing the name in : <i class="icon-gift">

You can see the different icons with their associated names on the html page named 'page.html'.

The icons are displayed on the Home-Page are 'Font Awesome Icons' :

<div class="box">
    <i class="icon-gift"></i>
    <h4 class="title">Web Design</h4> <hr/>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, sapien nec dignissim porta.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, sapien nec dignissim porta.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, sapien nec dignissim porta.
    </p>
</div>

The icons displayed on the 'Services' page are 'Foundation General Icons' :

<div class="box">
    <i class="general foundicon-website"></i>
    <h3 class="title">Web Development</h3> <hr/>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, sapien nec dignissim porta.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, sapien nec dignissim porta.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus, sapien nec dignissim porta.
    </p>
</div>

Change the icons to your own Foundation Icon style by changing the name in : <i class="general foundicon-website"></i>

Footer Settings

All the Footer content is enclosed in #divFooter

<div id="divFooter" class="footerArea">
    ...
</div>

Background Settings

The backgrounds for both the layout and footer can easily be changed by editing a style in the file named :styles/custom.css

For the main layout background open the custom.css file in Dreamweaver (code view) or Notepad++. Goto line 225 and change the image for the url. The background images should be in the same folder as your custom.css file i.e. in the 'styles' folder.

body {background-image: url(scribble_light.png);  background-position: inherit inherit; background-repeat: repeat repeat;}

For the Footer layout background open the custom.css file in Dreamweaver (code view) or Notepad++. Goto line 283 and change the image for the url. The background images should be in the same folder as your custom.css file i.e. in the 'styles' folder.

#divFooter{
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    background-color: rgb(122, 12, 12);
    color: rgb(211, 211, 211);
    font-family: Actor, sans-serif;
    text-transform: none;
    font-size: 12px;
    letter-spacing: 0px;
    line-height: 22px;
    background-image: url(tactile_noise.png);
    background-repeat: repeat repeat;
}
A good source of backgrounds is the site subtlepatterns.com

Editing Tabs on 'Services' page

The Content for the jQuery tabs can be found in the div class - #tab-content

<div class="tab-content">
  <div class="tab-pane fade in active" id="home">
    <img src="images/services-image-1.jpg" class="pull-left img-polaroid" />
	<p>This image uses the style class 'pull-left' to position to the left of any text.  It also uses the class 'img-polaroid' to place a frame around it.
	<a href="http://twitter.github.io/bootstrap/base-css.html#images" class="dropdown-toggle"> Read the doc file here.</a></p>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
	</p>
    </div>
    <div class="tab-pane fade" id="profile">
	<img src="images/services-image-2.jpg" class="pull-left img-polaroid" />
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
    <div class="tab-pane fade" id="settings">
	<img src="images/services-image-3.jpg" class="pull-left img-polaroid" />
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
</div>

To position an image either on the left side or right side of text use the class pull-left or pull-right just before a paragraph.

<img src="images/services-image-1.jpg" class="pull-left img-polaroid" />
	
<img src="images/services-image-2.jpg" class="pull-right img-polaroid" />

Editing Accordian on 'Services' page

The Content for the jQuery Accordians can be found in the div class - #accordion

<div class="accordion-group">
   <div class="accordion-heading">
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
     <i class="icon-plus"></i> Collapsible Group Item 1</a>
     </div>
     <div id="collapseOne" class="accordion-body collapse in">
     <div class="accordion-inner">
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s     standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to        make a type specimen book.
     </div>
     </div>
</div>

Editing Carousel

To edit the carousel on the '3-column.html' page content should be edited in the div id - #myCarousel

The thumbnail sizes are 240 pixels wide by 150 pixels in height. Place your carousel images in the folder named 'images/'.

Here's the sample code below to edit:

<div id="myCarousel" class="carousel slide">
     <div class="carousel-inner">                
     
     <div class="item active">
     <img src="images/5.jpg" class="img-polaroid">        
     </div>
				
     <div class="item">
     <img src="images/6.jpg" class="img-polaroid">      
     </div>
				
     <div class="item">
     <img src="images/7.jpg" class="img-polaroid">
     </div>
				
     </div>
			  
     <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
     <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>

Editing 'Portfolio' page

To edit the portfolio thumbnails and the large previews content should be edited in the div class - #yoxview

The thumbnail sizes are 300 pixels wide by 200 pixels in height. place your thumbnail images in the folder named 'portfolio/'.

The large previews linked to the thumbnails must also be placed in the 'portfolio/' folder. These larger prviews can be any size. Try and match the name similar to the associated thumbnail, e.g, thumbnail name could be 'holiday-paris.jpg' and the large preview for this thumbnail could be named as 'holiday-paris-large.jpg'.

Make sure that the code for the thumbnails and large previews follow the correct path to the 'portfolio/' folder. Here's the sample code below to edit.

<div class="thumbnail">
    <a href="portfolio/preview-300.png"><img src="portfolio/300x200.png" alt="Thumbnail Placeholder" title="Thumbna     il Placeholder"/></a>
    <div class="caption">
    <h3>Thumbnail label</h3>
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metu    s. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <p><a href="#" class="btn btn-primary">Read More...</a></p>
    </div>
</div>

Emphasis Classes

Convey meaning through color with a handful of emphasis utility classes.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

Setting up Bootstrap Contact Form page

To configure the Bootstrap contact form on the contact page to send the form query to your specified email address just open the file named 'index.php' located in the folder named 'email/' and edit line 8, by replacing the default email address for your own.

$to="your-email@your-domain.com";
Your webhost must support PHP in order for the form to work. PHP features are usually on Linux servers. If your hosting is not on Linux, request your host to change to it. Your Webhost should not charge you for the changeover.

Uploading your files to your remote server

Once you have completed your site. Upload all the files and folders from your main 'site/' folder to the 'public/' directory of your remote server. This 'public/' folder is the your root site folder where your default placeholder index.html file is held. When uploading you will get a prompt to ovewrite the exising default index.html file, click o'kay to overwrite it with the new one.

We recommend using Filezilla to upload your files. It is fast and easy to use.

You will need to use your FTP Host Name, Username and Password to logon using Filezilla. This information is sent to you when you first signup with a webhosting package. In case you don't know it, you can always request it from your webhost again.

Do not upload the folder named 'documentation/'.

Using third party scripts

You can use any third party scripts to enhance overall user experience, such as image preloaders, calendars, search scripts, animations, shopping carts, Html5 video players, hover effects etc...

We thoroughly recommend scripts from CodeCanyon.