Introduction to Twitter Bootstrap Theme
https://www.zyxware.com/sites/default/files/styles/user_image/public/default_images/index.png?itok=2YmREnrP
BY sarika.k
4 years ago
Twitter-bootstrap
0
comments comment

Bootstrap, a powerful mobile-first front-end framework which incorporates faster and easier development features to the web development platform. Bootstrap is sleek, intuitive and it uses HTML, CSS and Javascript.

We can build responsive Drupal themes using Twitter Bootstrap V3. It gives a basic idea of implementing bootstrap theme.

Bootstrap files are available in Github. You can download the required files from there. In order to apply bootstrap theme first of all add the bootstrap.min.css to your themes folder in 'sites/all/themes/yourtheme/css' and bootstrap.min.js to your themes folder in 'sites/all/themes/yourtheme/js'.To modify or apply additional styling to your web page, add the custom style to your custom.css file. No need to edit any of the original Bootstrap styles directly.

Bootstrap provides fluid grid system that scales up to 12 columns as the device or viewport size increases. The scaling is more appropriate as it uses predefined classes as well as powerful mixins for generating easy and more semantic layouts. Bootstrap is designed as mobile-first in the sense that the code for Bootstrap initially targets smaller screens like mobile, tablets, and then "expands" components and grids for larger screens such as laptops and desktops.

Working of Bootstrap Grid System

Grid systems are used for creating web page layouts. It is achieved through a series of rows and columns that holds the content.

Here's how the Bootstrap grid system works:

  • Rows must be placed within a .container class for making proper alignment and padding.
  • Now, each row can be used to create horizontal groups of columns.
  • Content is placed within columns, and columns should be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first
    and last column via negative margin on .rows.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For
    example, three equal columns would use three .col-xs-4.

The basic grid structure is

<div class="container">
 <div class="row">
   <div class="col-*-*"></div>
   <div class="col-*-*"></div>
 </div>
 <div class="row">...</div>
</div>
<div class="container">....
</div>

RELATED ARTICLE

close

on 24th November 2014 / by tintu.manuel
Internet is overhauling every piece of human life. Drupal Responsive theming Twitter bootstrap Leave a reply Your email address will not be published. Required fields are marker * M S Labba (not verified) access_time 17 Jul 2019 - 13:42 Hi, It would be more helpful, if you write something about, how to change the tpl files, or try for a video and upload. Thanks in advance Add new comment
close

on 03rd July 2015 / by sarika.k
Bootstrap, a powerful mobile-first front-end framework which incorporates faster and easier development features to the web development platform. Bootstrap is sleek, intuitive and it uses HTML, CSS and Javascript. We can build responsive Drupal themes using Twitter Bootstrap V3. It gives a basic idea of implementing bootstrap theme. Twitter bootstrap Bootstrap Leave a reply Your email address will not be published. Required fields are marker *
close

on 03rd August 2015 / by deepak.r
While working on a Drupal website recently, I wanted to add a pop-up in some of the selected pages in a website with a delay of 15 seconds after page load. For all users, pop-up should be displayed only once in a day. Twitter bootstrap Javascript Drupal 7 Drupal Planet Leave a reply Your email address will not be published. Required fields are marker *
Leave a reply
Your email address will not be published. Required fields are marker *

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type='1 A I'> <li> <dl> <dt> <dd> <h2 id='jump-*'> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
The content of this field is kept private and will not be shown publicly.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.