Bootstrap Grids:

Grid Division Removal with Bootstrap

On many websites, you have seen that different information is presented variously. You can use a feature on your website to design all data regularly. This post shows the best code with outstanding performance to add data to your website. The Grid Division Removal with Bootstrap is the best code with an attractive design. This Free Grids Division Code allows you to increase the beauty of your website and helps the audiences not to be confused. The best part of this code is that when you want to add text to your website, you can use the Bootstrap Div Grid, and if you don’t need some, it is possible to remove unnecessary sections.

This Bootstrap Grid Removal System has a red background, and the titles are darker with an underline. There is a white line under this headline, and then you can see the text, and these details are black. If you don’t need some divisions, click on the last part to remove them. “Click Me to Hide” is placed in a dark field with white writing. You can download the Grids with Removable Divs from the link below and use this code functionally to be successful.

Free Grids Division Code

Bootstrap Div Grid

Grids with Removable Divs

Bootstrap Grid Removal System

<!-- This script got from frontendfreecode.com -->
<div class="div2">
    <div class="d1" id="one">
        <h3 class="h3">First Division</h3>
        <hr color="black" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <br />
        <button class="btn" id="Button1" runat="server" ClientIDMode="Static">Click Me to Hide</button>
    </div>
    <div class="d1" id="two">
        <h3 class="h3">Second Division</h3>
        <hr color="black" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <br />
        <button class="btn" id="Button2" runat="server">Click Me to Hide</button>
    </div>
    <div class="d1" id="three">
        <h3 class="h3">Thrid Division</h3>
        <hr color="black" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <br />
        <button class="btn" id="Button3" runat="server">Click Me to Hide</button>
    </div>
    <div class="d1" id="four">
        <h3 class="h3">Fourth Division</h3>
        <hr color="black" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <br />
        <button class="btn" id="Button4" runat="server">Click Me to Hide</button>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
    background-color: azure;
}
.h1 {
    text-align: center;
    color: grey;
    font-style: oblique;
}
div.center {
    margin: auto;
    width: 1100px;
    height: 50px;
    padding-top: 1px;
    background-color: chocolate;
    border-radius: 30px;
    display: block;
}
li {
    display: inline;
    float: left;
}
a {
    margin-right: 15px;
    margin-left: 15px;
    color: #000000;
    height: 70px;
    width: 300px;
    padding: 25px 25px 25px 25px;
    background-color: #6dd0bb;
    text-decoration: none;
    font-size: 20px;
    border-radius: 50px;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
}
a:hover {
    font-size: x-large;
    background-color: lightgreen;
}
.div2 {
    position: static;
    width: auto;
    margin-top: 10px;
}
.d1 {
    text-align: center;
    margin: 30px;
    float: left;
    background-color: #f3b595;
    display: inline;
    padding: inherit;
    border-radius: 20px;
    width: 250px;
    padding: 10px;
}
.h3 {
    text-align: center;
    color: brown;
    font-style: italic;
    text-decoration-line: underline;
}
p {
    margin-top: 15px;
    margin-bottom: 15px;
    display: inline;
    padding: inherit;
}
.btn {
    margin-top: 5px;
    text-align: center;
    font-size: large;
    resize: both;
    font-style: italic;
    color: white;
    background-color: #926262;
    border-radius: 20px;
}
.text-green {
    color: #468847;
}
.text-green:hover {
    color: #356635;
}
.text-red {
    color: #b94a48;
}
.text-red:hover {
    color: #953b39;
}
.text-blue {
    color: #236698;
}
.text-blue:hover {
    color: darkblue;
}
.text-yellow {
    color: #dae54c;
}
.text-yellow:hover {
    color: #cf9a2c;
}

$(document).ready(function () {
    $("#Button1").click(function () {
        $("#one").hide("slow");
    });
    $("#Button2").click(function () {
        $("#two").hide("slow");
    });
    $("#Button3").click(function () {
        $("#three").hide("slow");
    });
    $("#Button4").click(function () {
        $("#four").hide("slow");
    });
});

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
body {
    background-color: azure;
}
.h1 {
    text-align: center;
    color: grey;
    font-style: oblique;
}
div.center {
    margin: auto;
    width: 1100px;
    height: 50px;
    padding-top: 1px;
    background-color: chocolate;
    border-radius: 30px;
    display: block;
}
li {
    display: inline;
    float: left;
}
a {
    margin-right: 15px;
    margin-left: 15px;
    color: #000000;
    height: 70px;
    width: 300px;
    padding: 25px 25px 25px 25px;
    background-color: #6dd0bb;
    text-decoration: none;
    font-size: 20px;
    border-radius: 50px;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
}
a:hover {
    font-size: x-large;
    background-color: lightgreen;
}
.div2 {
    position: static;
    width: auto;
    margin-top: 10px;
}
.d1 {
    text-align: center;
    margin: 30px;
    float: left;
    background-color: #f3b595;
    display: inline;
    padding: inherit;
    border-radius: 20px;
    width: 250px;
    padding: 10px;
}
.h3 {
    text-align: center;
    color: brown;
    font-style: italic;
    text-decoration-line: underline;
}
p {
    margin-top: 15px;
    margin-bottom: 15px;
    display: inline;
    padding: inherit;
}
.btn {
    margin-top: 5px;
    text-align: center;
    font-size: large;
    resize: both;
    font-style: italic;
    color: white;
    background-color: #926262;
    border-radius: 20px;
}
.text-green {
    color: #468847;
}
.text-green:hover {
    color: #356635;
}
.text-red {
    color: #b94a48;
}
.text-red:hover {
    color: #953b39;
}
.text-blue {
    color: #236698;
}
.text-blue:hover {
    color: darkblue;
}
.text-yellow {
    color: #dae54c;
}
.text-yellow:hover {
    color: #cf9a2c;
}
</style>

</head>
<body>
<div class="div2">
    <div class="d1" id="one">
        <h3 class="h3">First Division</h3>
        <hr color="black" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <br />
        <button class="btn" id="Button1" runat="server" ClientIDMode="Static">Click Me to Hide</button>
    </div>
    <div class="d1" id="two">
        <h3 class="h3">Second Division</h3>
        <hr color="black" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <br />
        <button class="btn" id="Button2" runat="server">Click Me to Hide</button>
    </div>
    <div class="d1" id="three">
        <h3 class="h3">Thrid Division</h3>
        <hr color="black" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <br />
        <button class="btn" id="Button3" runat="server">Click Me to Hide</button>
    </div>
    <div class="d1" id="four">
        <h3 class="h3">Fourth Division</h3>
        <hr color="black" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <br />
        <button class="btn" id="Button4" runat="server">Click Me to Hide</button>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(document).ready(function () {
    $("#Button1").click(function () {
        $("#one").hide("slow");
    });
    $("#Button2").click(function () {
        $("#two").hide("slow");
    });
    $("#Button3").click(function () {
        $("#three").hide("slow");
    });
    $("#Button4").click(function () {
        $("#four").hide("slow");
    });
});
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS