Make two div class in a row appear closer-CodePudding

I have a data card in the left and the search section in the right

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">
        <div class="card  border-info mb-3" style="max-width: 12rem; min-height: 200px;">
          .....
       </div>
    </div>
    <div class="col-md-9">
        <section class="search-sec">
            <div class="border border-info py-3 px-lg-5">
                <div class="container-fluid">
                    <form asp-action="Index" method="get">
                     ..............
                  </form>
                </div>
             </div>
         </section>
       </div>
   </div>
 </div>

The issue is these two this doesnot appear side by side. Is it possible to put them side by side

CodePudding user response：

The issue is that you limit the width of the left div when you use style="max-width: 12rem; along with Bootstrap classes <div > and <div >.

The <div > takes up 3 of 12 columns but the width of the content is limited so you get the gap.

Try taking off the max-width declaration and see if that suits your use case.

This will of course make the left div wider. You may want to try <div > and <div >.

EDIT: Bootstrap does add padding right and left of 15px to elements utilizing the col-* system. I added pr-0 to col-md-3 and pl-0 to col-md-9 to remove that padding which results in no gap between the left and right containers.

View the snippet in "full Page" mode to see the result.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 pr-0">
        <div class="card  border-info mb-3" style="min-height: 200px;">
          .....
       </div>
    </div>
    <div class="col-md-9 pl-0">
        <section class="search-sec">
            <div class="border border-info py-3 px-lg-5">
                <div class="container-fluid">
                    <form asp-action="Index" method="get">
                     ..............
                  </form>
                </div>
             </div>
         </section>
       </div>
   </div>
 </div>
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>

CodePudding user response：

Your inline style max-width: 12rem; is the problem. Removing it works. I think you can use col-md-2 instead of col-md-3

CodePudding user response：

If you want to remove spacing between two div have you tried this?

<div > and <div >.

Also removed inline css max-width: 12rem.

and If you want little spacing so you can use pr-1 instead of pr-0.

CodePudding user response：

Using a Flex box could do the trick, you could make a section, include the two divs into the section and then use :

 section{
  display:flex;
  flex-direction:row;
  justify-content:center;
}