working on it ...

Filters

Explore Public Snippets

Sort by

Found 6,200 snippets matching: bootstrap

    public by ahmedraza  391591  2  6  0

    bootstrap - accordion

    <?xml version="1.0" encoding="utf-8"?>
    <CodeSnippets
    	xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
    	<CodeSnippet Format="1.0.0">
    		<Header>
    			<Title>Bootstrap 3.x accordion</Title>
    			<Author>Eric Lebetsamer</Author>
    			<Description>Using the collapse plugin, we built a simple accordion by extending the panel component.</Description>
    			<Shortcut>bs-accordion</Shortcut>
    			<SnippetTypes>
    				<SnippetType>Expansion</SnippetType>
    			</SnippetTypes>
    		</Header>
    		<Snippet>
    			<Declarations>
    				<Literal>
    					<ID>id</ID>
    					<ToolTip>ID of the modal</ToolTip>
    					<Default>collapse</Default>
    				</Literal>
    				<Literal>
    					<ID>heading1</ID>
    					<ToolTip>The heading for the first accordion object</ToolTip>
    					<Default>Accordion heading 1</Default>
    				</Literal>
    				<Literal>
    					<ID>content1</ID>
    					<ToolTip>The content for the first accordion object</ToolTip>
    					<Default>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Default>
    				</Literal>
    				<Literal>
    					<ID>heading2</ID>
    					<ToolTip>The heading for the second accordion object</ToolTip>
    					<Default>Accordion heading 2</Default>
    				</Literal>
    				<Literal>
    					<ID>content2</ID>
    					<ToolTip>The content for the second accordion object</ToolTip>
    					<Default>Morbi eget libero quis metus consectetur semper.</Default>
    				</Literal>
    				<Literal>
    					<ID>heading3</ID>
    					<ToolTip>The heading for the third accordion object</ToolTip>
    					<Default>Accordion heading 3</Default>
    				</Literal>
    				<Literal>
    					<ID>content3</ID>
    					<ToolTip>The content for the third accordion object</ToolTip>
    					<Default>Suspendisse ullamcorper massa eget eleifend iaculis.</Default>
    				</Literal>
    			</Declarations>
    			<Code Language="HTML">
    				<![CDATA[<div class="panel-group" id="$id$">
    	<div class="panel panel-default">
    		<div class="panel-heading">
    			<h4 class="panel-title">
    				<a data-toggle="collapse" data-parent="#$id$" href="#$id$-one">
    					$heading1$
    				</a>
    			</h4>
    		</div>
    		<div id="$id$-one" class="panel-collapse collapse in">
    			<div class="panel-body">
    				$content1$
    			</div>
    		</div>
    	</div>
    	<div class="panel panel-default">
    		<div class="panel-heading">
    			<h4 class="panel-title">
    				<a data-toggle="collapse" data-parent="#$id$" href="#$id$-two">
    					$heading2$
    				</a>
    			</h4>
    		</div>
    		<div id="$id$-two" class="panel-collapse collapse">
    			<div class="panel-body">
    				$content2$
    			</div>
    		</div>
    	</div>
    	<div class="panel panel-default">
    		<div class="panel-heading">
    			<h4 class="panel-title">
    				<a data-toggle="collapse" data-parent="#$id$" href="#$id$-three">
    					$heading3$
    				</a>
    			</h4>
    		</div>
    		<div id="$id$-three" class="panel-collapse collapse">
    			<div class="panel-body">
    				$content3$
    			</div>
    		</div>
    	</div>
    </div>]]>
    			</Code>
    		</Snippet>
    	</CodeSnippet>
    </CodeSnippets>

    public by anibal copitan  217714  1  3  0

    CSS para bootstrap

    CSS para bootstrap: css-bootstrap.css
    .nopadding {
       padding: 0 !important;
       margin: 0 !important;
    }
    /* good */
    .row-no-padding {
      [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }
    
    

    public by Geometry  1407  0  5  0

    Samplings: Draws the bootstrap samples from the population.

    Draws the bootstrap samples from the population. The size of the samples to be drawn. The number of samples to drawn. The size of the samples to be drawn. The indices of the samples in the original set.
    /// <summary>
    ///   Draws the bootstrap samples from the population.
    /// </summary>
    /// 
    /// <param name="size">The size of the samples to be drawn.</param>
    /// <param name="resamplings">The number of samples to drawn.</param>
    /// <param name="subsampleSize">The size of the samples to be drawn.</param>
    /// 
    /// <returns>The indices of the samples in the original set.</returns>
    /// 
    public static int[][] Samplings(int size, int resamplings, int subsampleSize)
    {
        // Create samples with replacement
        int[][] idx = new int[resamplings][];
    
        // For each fold to be created
        for (int i = 0; i < idx.Length; i++)
        {
            idx[i] = new int[subsampleSize];
    
            // Generate a random sample (with replacement)
            for (int j = 0; j < idx[i].Length; j++)
                idx[i][j] = Accord.Math.Random.Generator.Random.Next(0, size);
        }
    
        return idx;
    }

    public by bfranzoi  8452  1  5  0

    Bootstrap CDN

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>     
    

    public by JonahM  4827  11  6  2

    Full width header Image

    A great method for designing a full width responsive header image. Using Twitter Bootstrap also. Site: http://j.mp/1oilINn
    <div class="container-fluid" id="fit" style="background: url(header.png) no-repeat center center fixed;
    			-webkit-background-size: cover;
    			-moz-background-size: cover;
    			-o-background-size: cover;
    			background-size: cover;">
    		
    		<h1 class="container header strip-md" style="text-align:center; color:white;">
    				Header Title
    		</h1>
    		
    </div>

    public by JonahM  3368  3  7  4

    Multicolumn row with responsive images

    Here I've got 3 images, header text and paragraph text which all fit together, central and fully responsive. Because I'm using dimensions in percentages, they're responsive for any screen size. Using Bootstrap Site: http://j.mp/1oilINn
    <div class="col-sm-4">
    					<div class="text-center spacing always bottom little">
    						<img src="home.png" style="width:50%; height:50%">
    					</div>
    			<h3>The Temple of God</h3>
    			<p>...to this man will I look, even to Him that is poor and of a contrite spirit, and who trembles at my word</p>
    </div>

    public by JonahM  3132  1  7  6

    Fluid Responsive Rows

    Site: http://j.mp/1oilINn
    <section class="strip-sm row-fluid" style="background-color: #262626;" >
    	<div class="container">
    		<h4 style="color:white">This is copyrighted by Jonah McLachlan</h4>
    	</div>
    </section>
    
    
                

    public by nreyes  3618  3  5  1

    Simple bootstrap log-in form with visual length validation

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Practica 2</title>
    
    	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    	<!-- Latest compiled and minified CSS -->
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    
    	<style>
    		.jumbotron {
    			background: url("http://www.publicdomainpictures.net/download-picture.php?adresar=30000&soubor=yellow-green-blur-background.jpg") no-repeat center center;
    		}
    	</style>
    </head>
    <body>
    	<div class="jumbotron">
    		<div class="container">
    			<div class="row">
    				<div class="col-md-4 col-md-offset-4 form-container">
    					<form role="form">
    						<fieldset>
    							<legend>Formulario Simple</legend>
    							<div class="form-group" id="form-user">
    								<label for="usuario">Usuario</label>
    								<input type="text" class="form-control" id="usuario" placeholder="Naffer Reyes xD">
    								<span class="help-block">Minimo 4 caracteres, maximo 12</span>
    							</div>
    							<div class="form-group" id="form-password">
    								<label for="contrasena">Contraseña</label>
    								<input type="password" class="form-control" id="contrasena">
    								<span class="help-block">Minimo 6 caracteres en una combinacion de letras y numeros</span>
    							</div>
    							<div class="checkbox">
    								<label>
    									<input type="checkbox">Recuerdame
    								</label>
    							</div>
    							<button type="submit" class="btn btn-success">Registrarme</button>
    						</fieldset>
    					</form>
    				</div>
    			</div>
    		</div>
    	</div>
    	
    	<script type="text/javascript">
    		
    		$("#usuario").keyup(function(event) {
    			var texto = $(this).val();
    			if (texto.length < 4 || texto.length > 12) 
    				{
    					$("#form-user").addClass('has-error');
    					$("#form-user").removeClass('has-success');
    				} else
    				{
    					$("#form-user").removeClass('has-error');
    					$("#form-user").addClass('has-success');
    				};
    		});
    
    		$("#contrasena").keyup(function(event) {
    			var texto = $(this).val();
    			if (texto.length < 6) 
    				{
    					$("#form-password").addClass('has-error');
    					$("#form-password").removeClass('has-success');
    				} else
    				{
    					$("#form-password").removeClass('has-error');
    					$("#form-password").addClass('has-success');
    				};
    		});
    	</script>
    	
    
    	
    	<!-- Latest compiled and minified JavaScript -->
    	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    </body>
    </html>

    public by manolenso  3161  0  4  0

    HTML: Bootstrap model

    HTML: Bootstrap model: HTML: Bootstrap model
    <!DOCTYPE html>
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
            <title></title>
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width">
            <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
            <link rel="stylesheet" href="css/bootstrap.min.css">
            <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
            <link rel="stylesheet" href="css/main.css">
            <style>
                body {
                    padding-top: 60px;
                    padding-bottom: 40px;
                }
            </style>
            <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
            <link rel="stylesheet" href="css/main.css">
    </head>
    
     <body>
            <!--[if lt IE 7]>
                <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
            <![endif]-->
    
            <!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html save -->
    
    
     <div class="container"><!-- container -->
    
    
    
     </div><!-- container -->
    
    
                    <!-- Le javascript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
    
    
        <!-- config mfull library with both files-->
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/bootstrap-min.js"></script>
        <!-- that's all !    -->
    
    
        <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
        <script src="assets/js/jquery.js"></script>
        <script src="assets/js/bootstrap-transition.js"></script>
        <script src="assets/js/bootstrap-alert.js"></script>
        <script src="assets/js/bootstrap-modal.js"></script>
        <script src="assets/js/bootstrap-dropdown.js"></script>
        <script src="assets/js/bootstrap-scrollspy.js"></script>
        <script src="assets/js/bootstrap-tab.js"></script>
        <script src="assets/js/bootstrap-tooltip.js"></script>
        <script src="assets/js/bootstrap-popover.js"></script>
        <script src="assets/js/bootstrap-button.js"></script>
        <script src="assets/js/bootstrap-collapse.js"></script>
        <script src="assets/js/bootstrap-carousel.js"></script>
        <script src="assets/js/bootstrap-typeahead.js"></script>
        <script src="assets/js/bootstrap-affix.js"></script>
    
        <script src="assets/js/holder/holder.js"></script>
        <script src="assets/js/google-code-prettify/prettify.js"></script>
    
        <script src="assets/js/application.js"></script>
    
    </body>
        </html>
    
    
    

    public by creative3.eu  2957  1  5  0

    Bootstrap Container - Row - Col-md-3 inside a Section

    This snipet is a standard way to place your content in a bootstrap grid. Col-md-3 means that you will take 3 vertical grid places from the possible 12 in one Row.
    <section>
    	<div class="container">
    		<div class="row">
    			<div class="col-md-3">
    			
    			</div>
    		</div>
    	</div>
    </section>
    • Public Snippets
    • Channels Snippets