CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Saurabh Mahajan
Saurabh Mahajan

Reputation: 2969

How can I apply a continuous border between rows in Bootstrap?

In large desktop four divs should appear in one row. In medium size three divs should appear and in small devices two divs and in mobile only one dive should appear in one row. I achieved it. But I need all divs to have border and between two continuous div one px gap should be there.

I added border it works fine and as I add margin 1px to div then in large desktop the fourth div will move to next line. My Html code is - 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Basic Bootstrap Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="BootstrapFiles/css/bootstrap.min.css">
    <style type="text/css">
    .bgcolor{
        background-color:orange;
        }
        .divCustom{
                border:solid 1px black;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3 divCustom">
            Personal Information
            <div class="row">
                <div class="col-xs-12">
                    <label class="control-label" for="txtName">Name</label>
                    <input id="txtName" class="form-control" />
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <label class="control-label" for="txtDepartment">Department</label>
                    <input id="txtDepartment" class="form-control" />
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-3 divCustom">
        Physical Information
            <div class="row">
                <div class="col-xs-12">
                    <label class="control-label" for="txtName">Name</label>
                    <input id="txtName" class="form-control" />
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <label class="control-label" for="txtDepartment">Department</label>
                    <input id="txtDepartment" class="form-control" />
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3 divCustom">
        Extra Information
            <div class="row">
                <div class="col-xs-12">
                    <label class="control-label" for="txtName">Name</label>
                    <input id="txtName" class="form-control" />
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <label class="control-label" for="txtDepartment">Department</label>
                    <input id="txtDepartment" class="form-control" />
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3 divCustom">
        Other Information
            <div class="row">
                <div class="col-xs-12">
                    <label class="control-label" for="txtName">Name</label>
                    <input id="txtName" class="form-control" />
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <label class="control-label" for="txtDepartment">Department</label>
                    <input id="txtDepartment" class="form-control" />
                </div>
            </div>
        </div>
    </div>
</div>
    <script src="BootstrapFiles/js/jquery.min.js"></script>
    <script src="BootstrapFiles/js/bootstrap.min.js"></script>
</body>
</html>

Upvotes: 4

Views: 2828

Answers (1)

isherwood
isherwood

Reputation: 61063

You shouldn't apply margin, borders, etc. to grid elements directly. That would require corresponding adjustments to the sizing in Bootsrap's CSS, which makes maintenance and updating more challenging.

Instead, apply your styles to elements inside the grid containers.

http://jsfiddle.net/isherwood/gQere/

.bordered {
    border:solid 1px black;
}

<div class="col-sm-6 col-md-4 col-lg-3 divCustom">
    <div class="bordered">Personal Information
        <div class="row">
            <div class="col-xs-12">
                <label class="control-label" for="txtName">Name</label>
                <input id="txtName" class="form-control" />
            </div>
       ...

Adjust margins on .bordered according to your preference. You may use negative margins to extend outside the grid elements and get the 1px gap you mentioned (or maybe 2px, since it's easier).

http://jsfiddle.net/isherwood/gQere/5/

http://jsfiddle.net/isherwood/gQere/5/embedded/result/

Upvotes: 8

Related Questions