Twitter Bootstrap Question posted in

Twitter Bootstrap 4: how to prevent border from having gaps when using margin between two rows?

I’m trying to create a table-like layout using bootstrap 4 and having difficulties understanding how to properly use borders.

Please take a look at the code extract:

<div class="row">
    <div class="col-4 border-right border-primary">Name</div>
    <div class="col ml-1">Alice</div>
</div>
<div class="row mt-3">
    <div class="col-4 border-right border-primary">Surname</div>
    <div class="col ml-1">Smith</div>
</div>

It creates a table-like layout but due to second row having top margin the right border has a gap between the rows.

1

What are the possible ways to resolve this issue?

Tags:

2

Answers


  1. 0

    You can use pt-3 to inner col class inside row for padding-top

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="container">
  <div class="row">
      <div class="col-4 border-right border-primary">Name</div>
      <div class="col ml-1">Alice</div>
  </div>
  <div class="row">
      <div class="col-4 border-right border-primary pt-3">Surname</div>
      <div class="col ml-1 pt-3">Smith</div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Use padding instead of margin:

    .p-3 {
  padding: .5rem 0 !important;
}
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-4 border-right border-primary p-3">Name</div>
    <div class="col ml-1 p-3">Alice</div>
</div>
<div class="row">
    <div class="col-4 border-right border-primary p-3">Surname</div>
    <div class="col ml-1 p-3">Smith</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search