CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Hanfei Sun
Hanfei Sun

Reputation: 47071

How to make borders for two columns as a whole in Bootstrap3?

My codes can be previewed here (Bootply)

The HTML part looks like this:

<div class="container">
  <div class="row">
    <a href="#a">
      <div class="my-border">
        <div class="col-md-3">A</div>
        <div class="col-md-3">A1</div>
      </div>
    </a>

    <div class="my-border">
      <a href="#b">
        <div class="col-md-3">B</div>
        <div class="col-md-3">B1</div>
      </a>
    </div>

  </div>

</div>

And the CSS part:

.my-border
{
  border: medium double rgb(250,0,255)
}

I want to make borders like this

-----------
|A A1|B B1|
-----------

But I found borders are not shown correctly.. enter image description here Moreover, I have another two questions:

  1. Is it ok to wrap a <div class="my-custom-class"> between <div class="col-xx"> and <div class="row">. If not, what is the preferred way?

  2. Is it ok to wrap a <a href="my-custom-link"> around serveral <div>s? If not, what might be the preferred way?

Thanks!

Upvotes: 1

Views: 1099

Answers (2)

Madhu
Madhu

Reputation: 2823

Try this: Solution

CSS

 .my-border
  {
  border: medium double rgb(250,0,255)
  }

HTML

 <div class="container">
 <div class="row">
 <center>
 <a href="#a">
 <div class="my-border">
 <div class="col-md-3">A</div>
 <div class="col-md-3">A1</div>
 <a href="#b">
 <div class="col-md-3">B</div>
 <div class="col-md-3">B1</div>
 </a>
 </div>
 </a>
 </center>
  </br>
 <div class="my-border">


 </div>

 </div>

 </div>

Upvotes: 0

rigobcastro
rigobcastro

Reputation: 1257

Because you miss write the point for my-border class, and you must write the content of columns inner in cols divs.

You can too extends the columns divs with your border class.

Look: http://www.bootply.com/73dXGqF2i5

Upvotes: 1

Related Questions