Bootstrap: Panel Codes

HTML

<!-- Created by Ситникова Варвара -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <title>Panels</title>
    </head>
    <body>
        <div class="container">
            <div class="panel">
                <div class="panel-heading">Heading</div>
                <div class="panel-body">Body</div>
                <div class="panel-footer">Footer</div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">Heading</div>
                <div class="panel-body">Body</div>
                <div class="panel-footer">Footer</div>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">Heading</div>
                <div class="panel-body">Body</div>
                <div class="panel-footer">Footer</div>
            </div>
            <div class="panel panel-success">
                <div class="panel-heading">Heading</div>
                <div class="panel-body">Body</div>
                <div class="panel-footer">Footer</div>
                </div>
                <div class="panel panel-info">
                <div class="panel-heading">Heading</div>
                <div class="panel-body">Body</div>
                <div class="panel-footer">Footer</div>
                </div>
                <div class="panel panel-warning">
                <div class="panel-heading">Heading</div>
                <div class="panel-body">Body</div>
                <div class="panel-footer">Footer</div>
                </div>
                <div class="panel panel-danger">
                <div class="panel-heading">Heading</div>
                <div class="panel-body">Body</div>
                <div class="panel-footer">Footer</div>
        </div>
    </body>
</html>

CSS

/* Created by Ситникова Варвара */

body {
    background-color:black;
}

JS

Resources

Bootstrap: List Groups

HTML

<!-- Created by Ситникова Варвара -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <title>List group</title>
    </head>
    <body>
        <div class="container">
            <br /><br />
            <ul class="list-group">
                <li class="list-group-item">Normal</li>
                <li class="list-group-item disabled">Disabled</li>
                <li class="list-group-item active">Active</li>
                <li class="list-group-item list-group-item-info">Info</li>
                <li class="list-group-item list-group-item-success">Success</li>
                <li class="list-group-item list-group-item-warning">Warning</li>
                <li class="list-group-item list-group-item-danger">Danger</li>
            </ul>
        </div>
    </body>
</html>

CSS

JS

Resources

Bootstrap: Button Groups

HTML

<!-- Created by Ситникова Варвара -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <title>Button groups</title>
    </head>
    <body>
        <div class="container">
            <br />
            <div class="btn-group">
                <button class="btn btn-default">Normal</button>
                <button class="btn btn-primary">Style</button>
                <button class="btn btn-success">.</button>
            </div>
            <br />
            <br />
            <div class="btn-group-vertical">
                <button class="btn btn-warning">Btn</button>
                <button class="btn btn-danger">Group</button>
                <button class="btn btn-info">Vertical</button>
            </div>
            <br/>
            <br />
            <div class="btn-group btn-group-xs">
                <button class="btn btn-warning">Btn</button>
                <button class="btn btn-danger">Group</button>
                <button class="btn btn-primary">Xs</button>
            </div>
            <br />
            <br />
            <div class="btn-group btn-group-ms">
                <button class="btn btn-success">Btn</button>
                <button class="btn btn-default">Group</button>
                <button class="btn btn-warning">Ms</button>
            </div>
            <br />
            <br />
            <div class="btn-group btn-group-lg">
                <button class="btn btn-danger">Btn</button>
                <button class="btn btn-primary">Group</button>
                <button class="btn btn-default">Lg</button>
            </div>
            <br />
            <br />
            <div class="btn-group btn-group-justified">
                <button class="btn btn-info">Btn</button>
                <button class="btn btn-danger">Group</button>
                <button class="btn btn-watning">Justified</button>
            </div>
        </div>
    </body>
</html>

CSS

JS

Resources

Bootstrap: icons in form elements

HTML

<!-- Created by Email Not Activated -->

<!DOCTYPE html>
<html>
<!--MADE BY ROCK STAR-->
    <head>
    <meta charset="utf-8">
    <!-- Responsive -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div id="container" class="table-responsive">
        
            <h1 id="title">How to add icons beside the input elements</h1>
            
            <span>     Hello programmers! Today I'm gonna teach you how to put icons beside the <code>input</code> tags. It is used to give hints to the user and make your form look more elegant and neat. <br /><br />
            <div class="alert alert-warning">
            <span>NOTE: Before you do what's on the tutorial, You must be familiar with Bootstrap.</span>  
            </div>
            So these are the examples: <br />
            </span>
            
            <div class="input-group">
                <span class="input-group-addon">
                <i class="glyphicon glyphicon-user"></i>
                </span>
                <input type="text" placeholder="Username" class="form-control"/>
            </div><br />
            
            <div class="input-group">
                <span class="input-group-addon">
                <i class="glyphicon glyphicon-lock"></i>
                </span>
                <input type="password" placeholder="Password" class="form-control"/>
            </div><br />
            
            <span>     The example above shows an
            <code>input</code> tag with an icon 
            embedded to the left. Now I'm gonna show you the codes of these two input fields below and elaborate after.
            </span>
            
                <pre>
<tag><</tag><tag>div</tag> <class>class</class>=<value>"input-group"</value><tag>></tag>
  <tag><</tag><tag>span</tag> <class>class</class>=<value>"input-group-addon"</value><tag>></tag>
     <tag><</tag><tag>i</tag> <class>class</class>=<value>"glyphicon glyphicon-user"</value><tag>></tag><tag><</tag><tag>/i></tag>
  <tag><</tag><tag>/span></tag>
     <tag><</tag><tag>input</tag> <tag></tag> <class>type</class>= <value>"text"</value> <class>placeholder</class>=<value>"Username"</value> 
     <class>class</class>=<value>"form-control"</value><tag>/</tag><tag>></tag>
<tag><</tag><tag>/div></tag>

<tag><</tag><tag>div</tag> <class>class</class>=<value>"input-group"</value><tag>></tag>
  <tag><</tag><tag>span</tag> <class>class</class>=<value>"input-group-addon"</value><tag>></tag>
     <tag><</tag><tag>i</tag> <class>class</class>=<value>"glyphicon glyphicon-lock"</value><tag>></tag><tag><</tag><tag>/i></tag>
  <tag><</tag><tag>/span></tag>
     <tag><</tag><tag>input</tag> <tag></tag> <class>type</class>= <value>"text"</value> <class>placeholder</class>=<value>"Password"</value> 
     <class>class</class>=<value>"form-control"</value><tag>/</tag><tag>></tag>
<tag><</tag><tag>/div></tag>
                </pre>
        <span>     The <code>.input-group</code> class from the <code>div</code> tag is used as a container for combining or appending icons, text or buttons to the <code>input</code> element.</span><br /><br />
        <span>     Next is the <code>.input-group-addon</code> class on the <code>span</code> tag. This will serve as the container of the icon, text or buttons to be appended with the <code>input</code> element.</span> <br /><br />
        <span>     Next is the <code>i</code> element which is declared inside the <code>span</code> element. This is where you put your icons. You can also change this as a text, <code>button</code>, <code>radio</code>, <code>select</code> or <code>checkbox</code> depends on what you desire.</span><br /><br />
        
            <div class="input-group">
                <span class="input-group-addon">
                <span>email@example.com</span>
                </span>
                <input type="email" placeholder="Email" class="form-control"/>
            </div><br />
            
            <div class="input-group">
                <span class="input-group-addon">
                <input type="checkbox" class="btn btn-primary" value="Button" />
                </span>
                <input type="text" placeholder="Checkbox" class="form-control"/>
            </div><br />
            
            <div class="input-group">
                <span class="input-group-addon">
                <input type="radio" />
                </span>
                <input type="text" placeholder="Radio button" class="form-control"/>
            </div><br />
            
            <div class="input-group">
                <span class="input-group-addon">
                <select>
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>
                </span>
                <input type="text" placeholder="Dropdown" class="form-control"/>
            </div><br />
        
        <span>     Now that you have the icon, you can now add the <code>input</code> elements outside the <code>span</code> tag. You can use any <code>input</code> type you need  in this section. Just don't forget to add <code>.form-control</code> class inside the <code>input</code> tag in order to work perfectly.</span> <br /><br />
        
        <div class="alert alert-warning">NOTE: You can also append your icons to the right. Just put the <code>input</code> tag first followed by the icons or text or button codes like the image example below.</span>
        </div>
        
        
            <div class="input-group">
                <input type="text" placeholder="Username" class="form-control"/>
                <span class="input-group-addon">
                <i class="glyphicon glyphicon-user"></i>
                </span>
            </div><br />
            
            <div class="input-group">
                <input type="password" placeholder="Password" class="form-control"/>
                <span class="input-group-addon">
                <i class="glyphicon glyphicon-lock"></i>
                </span>
            </div><br />
        
        <span>     Now that's how you add icons at the side of the <code>input</code> tags. Always remember, think twice code once! Enjoy!</span>
        <br /><br />
        
        <span>Credits to: <br /> <a href="https://getbootstrap.com" target="_parent">Get Bootstrap</a><br />
        <a href="https://w3schools.com" target="_parent">W3Schools</a>
        </span><br /><br />
        
        
        <center>
            <span>Made by: <code>Rock Star</code></span>
        </center>
        </div>
    </body>
</html>

CSS

/* Created by Email Not Activated */

body {
    background-color: slategray;
    text-align: justify;
}

#container{ 
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    border-radius: 5px;
    padding: 10px;
    background-color: white;
}

#container{
    width: 96%;
}

#container2{
    width: 100%;
    border-radius: 5px;
}

#title{
    color: steelblue;
    font-weight: bold;
    font-size: 23px;
    text-align: center;
}

pre{
    padding-bottom: 0px;
    background-color: darkslategray;
    color: white;
}

tag{color: salmon;}
class{color:tomato;}
value{color:cadetblue;}

JS

Resources

CSS: justify-content

HTML

<!-- Created by Chris C. -->

<!--justify example-->

<div id="container">
  <p>justify-content: flex-start</p>
  <div id="flex-start">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: flex-end</p>
  <div id="flex-end">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: center</p>
  <div id="center">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: space-between</p>
  <div id="space-between">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: space-around</p>
  <div id="space-around">
    <div></div>
    <div></div>
    <div></div>
  </div>

<p>justify-content: space-evenly</p>
  <div id="space-evenly">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS

/* Created by Chris C. */

#container > div {
  display: flex;
  font-family: "Courier New", "Lucida Console", monospace;
}

#container > div > div {
  width: 50px;
  height: 50px;
  background: linear-gradient(-45deg, blue, yellow);
}

#flex-start {
  justify-content: flex-start;
}

#center {
  justify-content: center;
}

#flex-end {
  justify-content: flex-end;
}

#space-between {
  justify-content: space-between;
}

#space-around {
  justify-content: space-around;
}

#space-evenly {
  justify-content: center;
}

JS

Resources