Home > twitter bootstrap > My Grid system using bootstrap is not working properly

My Grid system using bootstrap is not working properly

January 25Hits:0
Advertisement

I wrote simple grid system using bootstrap and compiled in chrome. but those grid system is not displaying properly.

code:-

<!doctype html> <html> <head> <title>Gris system</title> <link rel="stylesheet" href="bootstrap.min.css"> <script src="bootstrap.min.js"></script> <style> {margin:0px;padding:0px;} </style> </head> <body> <div class="container"> <div class="row"> <div class=" col-md-1" style="background-color:lavender;">col-md-1</div> <div class="col-md-3" style="background-color:skyblue;">col-md-3</div> <div class="col-md-1" style="background-color:lavender;">col-md-1</div <div class="col-md-3" style="background-color:skyblue;">col-md-3</div> <div class="col-md-1" style="background-color:lavender;">col-md-1</div <div class="col-md-3" style="background-color:skyblue;">col-md-3</div> </div> </div> </body> </html> 

And my output is :-

My Grid system using bootstrap is not working properly

working code:-

<!doctype html> <html> <head> <title>Gris system</title> <link rel="stylesheet" href="bootstrap.min.css"> <script src="bootstrap.min.js"></script> <style> {margin:0px; padding:0px;} </style> </head> <body> <div class="container"> <div class="row"> <div class=" col-md-1" style="background-color:lavender;">col-md-1</div> <div class="col-md-3" style="background-color:skyblue;">col-md-3</div> <div class="col-md-1" style="background-color:yellow;">col-md-1</div> <div class=" col-md-3" style="background-color:lavender;">col-md-1</div> <div class="col-md-1" style="background-color:blue;">col-md-3</div> <div class="col-md-3" style="background-color:skyblue;">col-md-1</div> </div> </div> </body> </html> 

My Grid system using bootstrap is not working properly

Answers

You seem to have some CSS in your <style> tags which does not point to anything specific. My guess would be that the margin and padding are affecting something they're not supposed to.

Try removing that styling, otherwise everything seems all right. If it does not work, you should double-check that the Bootstrap is in fact loaded with your page.

EDIT: Two of your columns are actually missing a closing > tag after div. Double-check your closing </div> tags.

Related Articles

  • My Grid system using bootstrap is not working properly

    My Grid system using bootstrap is not working properlyJanuary 25

    I wrote simple grid system using bootstrap and compiled in chrome. but those grid system is not displaying properly. code:- <!doctype html> <html> <head> <title>Gris system</title> <link rel="stylesheet" href=&qu

  • Grid System Comparison: Bootstrap 3 vs. Foundation 5

    Grid System Comparison: Bootstrap 3 vs. Foundation 5January 6

    Bootstrap and Foundation are two of my favorite front-end frameworks, especially for rapid website prototyping. Both come with ready-to-use components that speed up my workflow. Beyond their small differences, most of their fundamental features look

  • How I can use grid system of bootstrap in views-exposed-form.tpl.php?November 6

    I have a form with filters exposed and I want to apply the bootstrap grid system for each input to adapt to different devices, but in the views-exposed-form.tpl.php I don't know how to access each generated input.

  • Bootstrap's Grid System vs. Susy: A Comparison

    Bootstrap's Grid System vs. Susy: A ComparisonAugust 29

    There are a lot of grid frameworks for us the to choose from while developing websites nowadays. Of the many frameworks, one of most loved and yet most hated framework is definitely Bootstrap. Today, I'll like to introduce you to a slightly lesser kn

  • Understanding Bootstrap's Grid System

    Understanding Bootstrap's Grid SystemNovember 11

    Bootstrap is undoubtedly one of the most popular front-end frameworks. With more than 73k stars and 27k forks, Bootstrap is also one of the most popular GitHub repositories. In my last article, Responsive Web Design Tips from Bootstrap's CSS, I expla

  • Border each item without padding in Bootstrap Grid System while keeping distance between themJanuary 14

    I want to border each item in Bootstrap Grid System while keeping distance between them but struggle to achieve so. Here is a simple Codepen to illustrate what I'm trying to achieve: http://codepen.io/anon/pen/xZLNqY .card-box .image img { width: 100

  • Bootstrap cards/thumbnails not lining up side by side correctly in the grid system & card deckFebruary 6

    I'm having a problem with getting Boostrap's thumbnails & cards to line up side by side in their grid system. Basically, this is an assignment & I have to follow certain parameters: -must use Bootstrap grid system sm-size columns -these squares of

  • Custom bootstrap like grid system with HTML and CSS February 7

    How to implement Custom bootstrap like grid system with HTML and CSS? Or how does bootstrap internally implement grid system ? --------------Solutions------------- As Won Jun Bae suggested, the best way to learn it to check out Bootstrap CSS files. H

  • Bootstrap Grid System on mobiles?February 11

    See the following JSFIDDLE <div class="row"> <div class="col-md-3 col-xs-6"> <div style="background: blue;"> test & test & </div> </div> <div class="col-md-3 col-xs-6"> &l

  • Recommended grid systems or layouts for large display and responsive designs

    Recommended grid systems or layouts for large display and responsive designsJune 16

    I've been working with 960 layout for years – but was wondering if there are other grid systems that are strongly supported by the design and development community and also have blank or starter pages to work with. --------------Solutions------------

  • Blocks and CSS Grid Systems

    Blocks and CSS Grid SystemsSeptember 12

    How do I achieve the following in Drupal: <div class="row"> <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div> <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div> <div class="col-xs-4

  • SASS grid system improvementsJune 3

    I've got this own made grid system made in SASS: @import "../mixins/cross-browser-elements/box"; $columns: 12 !default; $gutter-width-px: 20px !default; @function calculate-column-width($index) { @return percentage($index / $columns); } .row { o

  • Creating a Responsive Grid System with Susy and BreakpointDecember 9

    The big appeal behind CSS frameworks (like Bootstrap and Foundation) is that they come with a responsive grid system all set and ready to go. The downside is that you have to be content with their column count, the width of their gutters, and all the

  • Should I use a CSS grid system for this template?

    Should I use a CSS grid system for this template? February 13

    This might be the wrong place to ask but... I want to convert the following template to HTML and CSS. Should I use a grid system such as bootstrap or skeleton? Seeing as it's already a grid it seems to make sense. I get the feeling that bootstrap wou

  • Understanding CSS Grid Systems from the Ground UpMarch 11

    Over the past few years CSS grid systems have grown a lot in popularity, quickly becoming considered best practice for rapid layout scaffolding. As a result, there has been no shortage of frameworks popping up offering their own grid systems trying t

  • How to create interfaces in a graphics editor for responsive grid systems considering that they aren't pixel-perfect? September 7

    Any responsive CSS grid system uses long decimal point percentage values for columns' width (e.g. "16.66666667%"). I don't understand how to lay out the grid in Photoshop, because elements of the interface will either be longer, or shorter than

  • Introducing sGrid: A Stylus-based Flexbox Grid SystemDecember 2

    After reading the title of this post, you might ask: Why another grid system? This is a good question. Basically there are plenty of grids out there and many of them are flexbox grids too. So why have I built another tool that's similar? The short an

  • A grid system (Photoshop/Pixelmator) for designing for the iPadSeptember 24

    I am designing an iPad app, so I could really use a grid template. I could probably just work with the 960 grid system; however, I'd love to find a solution that is tailor-made for the purpose (that is, takes into account such things as the iPad's re

  • My 960 grid system has wider columns that standard. 55px instead 40px for 16 columnsOctober 27

    I was surprised to discover my website is wider than is supposed to be. I am using Drupal + Omega Theme that uses 960 grid system. The total width of the site is 1180 instead 960. The columns are wider: On 16 columns options: they are supposed to be

  • Mixing the classic type size scale, grid systems and modular scalesNovember 25

    I'm coming from a programmers background and just trying to understand how sizes should relate. I read in the book "designing for the web" that these are the classic type sizes and text set in these size should look better if typeset correctly.

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.449 s.