Bootstrap Grid Configurator

Developer
Alyssa
Size
3,860 Kb
Views
36,432
  1. Bootstrap Grid Configurator Previews
  2. Bootstrap Grid Configurator HTML Codes
  3. Bootstrap Grid Configurator CSS Codes
  4. Bootstrap Grid Configurator JS Codes

How do I make an bootstrap grid configurator?

Http://getbootstrap.com/css/#grid-lesshttp://scotch.io/bar-talk/understanding-the-bootstrap-3-grid-system. What is a bootstrap grid configurator? How do you make a bootstrap grid configurator? This script and codes were developed by Alyssa on 08 September 2022, Thursday.

Bootstrap Grid Configurator Previews
IQ Test

Bootstrap Grid Configurator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bootstrap Grid Configurator</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content=""> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <style>
.container { padding-right: 15px; padding-left: 15px;
}
.row { margin-bottom: 20px;
}
.row .row { margin-top: 10px; margin-bottom: 0;
}
[class*="col-"] { padding-top: 15px; padding-bottom: 15px; background-color: #eee; background-color: rgba(86,61,124,.15); border: 1px solid #ddd; border: 1px solid rgba(86,61,124,.2);
}
hr { margin-top: 40px; margin-bottom: 40px;
}
pre { margin-top: 20px; margin-bottom: 40px;
}
.container { background-color: #eee;
}
.container > div { background-color: #ddd;
}
[class*="col-"] > span { display: block; background: rgba(86,61,124,.25);
}
</style>
<div class="container"> <div class="page-header"> <h1>Bootstrap grid configurator</h1> <!--<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>--> </div> <hr> <form> <div> <label for="name">Columns:</label> <input type="text" name="columns" id="columns" placeholder="12" /> <pre id="column-output">
.col-xs-1 { width: 8.33%; /*(100/12)*/
} </pre> </div> <div> <label for="name">Grid Margins:</label> <input type="text" name="margins" id="margins" placeholder="15px" /> <pre id="margin-output">
.container,
.container-fluid,
.row .col,
.row [class*="col-"] { padding-right: 15px; padding-left: 15px;
}
.row { margin-right: -15px; margin-left: -15px; } </pre> </div> <button class="btn btn-lg">Update</button </form> <hr> <div class="row"> <div class="col-xs-1"><span>1</span></div> <div class="col-xs-1"><span>2</span></div> <div class="col-xs-1"><span>3</span></div> <div class="col-xs-1"><span>4</span></div> <div class="col-xs-1"><span>5</span></div> <div class="col-xs-1"><span>6</span></div> <div class="col-xs-1"><span>7</span></div> <div class="col-xs-1"><span>8</span></div> <div class="col-xs-1"><span>9</span></div> <div class="col-xs-1"><span>10</span></div> <div class="col-xs-1"><span>11</span></div> <div class="col-xs-1"><span>12</span></div> <div class="col-xs-1"><span>13</span></div> <div class="col-xs-1"><span>14</span></div> <div class="col-xs-1"><span>15</span></div> <div class="col-xs-1"><span>16</span></div> <div class="col-xs-1"><span>17</span></div> <div class="col-xs-1"><span>18</span></div> <div class="col-xs-1"><span>19</span></div> <div class="col-xs-1"><span>20</span></div> <div class="col-xs-1"><span>21</span></div> <div class="col-xs-1"><span>22</span></div> <div class="col-xs-1"><span>23</span></div> <div class="col-xs-1"><span>24</span></div> </div> <div class="row"> <div class="col-xs-2"><span>1</span></div> <div class="col-xs-2"><span>2</span></div> <div class="col-xs-2"><span>3</span></div> <div class="col-xs-2"><span>4</span></div> <div class="col-xs-2"><span>5</span></div> <div class="col-xs-2"><span>6</span></div> <div class="col-xs-2"><span>7</span></div> <div class="col-xs-2"><span>8</span></div> <div class="col-xs-2"><span>9</span></div> <div class="col-xs-2"><span>10</span></div> <div class="col-xs-2"><span>11</span></div> <div class="col-xs-2"><span>12</span></div> <div class="col-xs-2"><span>13</span></div> <div class="col-xs-2"><span>14</span></div> <div class="col-xs-2"><span>15</span></div> <div class="col-xs-2"><span>16</span></div> </div> <div class="row"> <div class="col-xs-3"><span>1</span></div> <div class="col-xs-3"><span>2</span></div> <div class="col-xs-3"><span>3</span></div> <div class="col-xs-3"><span>4</span></div> <div class="col-xs-3"><span>5</span></div> <div class="col-xs-3"><span>6</span></div> <div class="col-xs-3"><span>7</span></div> <div class="col-xs-3"><span>8</span></div> <div class="col-xs-3"><span>9</span></div> <div class="col-xs-3"><span>10</span></div> <div class="col-xs-3"><span>11</span></div> <div class="col-xs-3"><span>12</span></div> </div> <div class="row"> <div class="col-xs-4"><span>1</span></div> <div class="col-xs-4"><span>2</span></div> <div class="col-xs-4"><span>3</span></div> <div class="col-xs-4"><span>4</span></div> <div class="col-xs-4"><span>5</span></div> <div class="col-xs-4"><span>6</span></div> <div class="col-xs-4"><span>7</span></div> <div class="col-xs-4"><span>8</span></div> </div> <div class="row"> <div class="col-xs-5"><span>1</span></div> <div class="col-xs-5"><span>2</span></div> <div class="col-xs-5"><span>3</span></div> <div class="col-xs-5"><span>4</span></div> <div class="col-xs-5"><span>5</span></div> <div class="col-xs-5"><span>6</span></div> </div> <div class="row"> <div class="col-xs-6"><span>1</span></div> <div class="col-xs-6"><span>2</span></div> <div class="col-xs-6"><span>3</span></div> <div class="col-xs-6"><span>4</span></div> </div> <div class="row"> <div class="col-xs-7"><span>1</span></div> <div class="col-xs-7"><span>2</span></div> <div class="col-xs-7"><span>3</span></div> </div> <div class="row"> <div class="col-xs-8"><span>1</span></div> <div class="col-xs-8"><span>2</span></div> </div> <div class="row"> <div class="col-xs-9"><span>1</span></div> </div> <div class="row"> <div class="col-xs-10"><span>1</span></div> </div> <div class="row"> <div class="col-xs-11"><span>1</span></div> </div> <div class="row"> <div class="col-xs-12"><span>1</span></div> </div> <div class="row"> <div class="col-xs-13"><span>1</span></div> </div> <div class="row"> <div class="col-xs-14"><span>1</span></div> </div> <div class="row"> <div class="col-xs-15"><span>1</span></div> </div> <div class="row"> <div class="col-xs-16"><span>1</span></div> </div>
</div> <!-- /container --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Bootstrap Grid Configurator - Script Codes CSS Codes

/* PASTE CUSTOM CSS HERE */
/* ------------ for testing...
.container,
.container-fluid { padding-right: 25px; padding-left: 25px;
}
.row { margin-right: -25px; margin-left: -25px; }
.row .col,
.row [class*="col-"] { padding-right: 25px; padding-left: 25px;
} */
/* ------------ for testing... (16cols)
.col-xs-1 { width: 6.25%;
}
.col-xs-2 { width: 12.5%;
}
.col-xs-3 { width: 18.75%;
}
.col-xs-4 { width: 25%;
}
.col-xs-5 { width: 31.25%;
}
.col-xs-6 { width: 37.5%;
}
.col-xs-7 { width: 43.75%;
}
.col-xs-8 { width: 50%;
}
.col-xs-9 { width: 56.25%;
}
.col-xs-10 { width: 62.5%;
}
.col-xs-11 { width: 68.75%;
}
.col-xs-12 { width: 75%;
}
.col-xs-13 { width: 81.25%;
}
.col-xs-14 { width: 87.5%;
}
.col-xs-15 { width: 93.75%;
}
.col-xs-15 { width: 100%;
} */

Bootstrap Grid Configurator - Script Codes JS Codes

// all of this can be done with vanilla JS,
// but I chose jQuery since it is usually tied in with Bootstrap.
var columns = 12, margins = '15px';
$('#margins').keyup(function(){ var $this = $(this), margins = $this.val() // console.log( margins ) $('#margin-output').html( '.container, \n' + '.container-fluid, \n' + '.row .col, \n' + '.row [class*="col-"] { \n' + ' padding-right: '+margins+';\n' // could use /t but I don't like how much + ' padding-left: '+margins+';\n' // space it is using (8 spaces instead of 4) + '} \n' + ' \n' + '.row { margin-right: -'+margins+'; margin-left: -'+margins+'; } \n' ) // if there is no unit, warn the user or auto-add 'px'
}); // #margins.keyup()
// If the input is somehow modified without typing into it (copy/paste?),
// this will trigger our keyup function. might need to trigger on 'blur' as well...
$('#margins').change(function(){ $("#margins").keyup();
});
function isInt(n) { //stackoverflow.com/a/3886106 return n % 1 === 0;
}
$('#columns').keyup(function(){ var $this = $(this), columns = $this.val(), output = ''; // console.log( columns ) // value must be an integer (should also be positive, will deal with that later) if ( isInt(columns) ) { for( i = 1; i <= columns; i++ ) { width = (100/columns) * i; output += '.col-xs-'+i+' { \n'; output += ' width: '+width+'%; /*(100/'+columns+')*/ \n'; output += '} \n'; } $('#column-output').html(output); } else { // give user an error message }
}); // #columns.keyup()
$('#columns').change(function(){ $("#columns").keyup();
});
$('form').submit(function(e){ e.preventDefault(); var marginOutput = $('#margin-output').text(), columnOutput = $('#column-output').text(); //console.log( marginOutput ) //console.log( columnOutput ) $('head').find('style').append(marginOutput) $('head').find('style').append(columnOutput) //console.log( $('head').find('style').text() )
})
Bootstrap Grid Configurator - Script Codes
Bootstrap Grid Configurator - Script Codes
Home Page Home
Developer Alyssa
Username alyda
Uploaded September 08, 2022
Rating 3
Size 3,860 Kb
Views 36,432
Do you need developer help for Bootstrap Grid Configurator?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alyssa (alyda) Script Codes
Name
Wire up a Backend
Photo Gallery
CSS Patterns
ScrollMagic Reveal
Evolve Media Gallery
Evolve Error Pages
Huddle Grid-Detail View
Evolve Logo SVG animation
Evolve Patterns
Evolve Game
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!