How can I remove space on bootstrap grid - css

Question

I've created 3 div tags according to the grid rules
<div class="row">
<div class="col-md-3" style=" border:1px solid;"><uc1:ucretsizilan runat="server" ID="ucretsizilan" /></div>
<div class="col-md-9" style=" border:1px solid red;"><uc1:seriVitrin runat="server" ID="seriVitrin" /></div>
<div class="col-md-3" style=" border:1px solid blue;"><uc1:nobetciBox runat="server" ID="nobetciBox" /></div>
</div>
Div = Black
Div = Red
Div = Blue
Ranking musn't change and i would like to remove space between black and blue.
How can I remove it, So that black and blue divs should stand one under the other ?

Answer 1

<div class="left">
<div class="col-md-3" style=" border:1px solid;"><uc1:ucretsizilan runat="server" ID="ucretsizilan" /></div>
<div class="col-md-3" style=" border:1px solid blue;"><uc1:nobetciBox runat="server" ID="nobetciBox" /></div>
</div>
<div class = "right> <div class="col-md-9" style=" border:1px solid red;"><uc1:seriVitrin runat="server" ID="seriVitrin" /></div> </div>

Answer 2

Or you can do this, this will remove space in bootstrap grid.
Example
HTML
<div class="no-pad>
<div class="col-lg-12>
/*--Content--*/
</div>
</div>
CSS
.no-pad [class*="col-"] {
padding:0;
margin: 0;
}

Answer 3

You can acomplish this behavior with only 2 columns: left column (col-xs-3) and right column (col-xs-9).
Then you create 2 additional div elements in the left column, one for each element. Since the div is a block element, you will end up with one div bellow the other.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-3">
<div style=" border:1px solid black;">
black
</div>
<div style="border:1px solid blue;">
blue
</div>
</div>
<div class="col-xs-9" style="border:1px solid red;">
red
</div>
</div>
Since you don't want to change the order of the elements, you could try something like the snippet bellow.
However i would recommend you reading more about the grid system. You're supposed to have a maximum of 12 columns in every row.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-3" style="border: 1px solid #000">
black
</div>
<div class="col-xs-9 pull-right" style="border: 1px solid #f00">
<div>red</div>
<div>red</div>
<div>red</div>
<div>red</div>
<div>red</div>
<div>red</div>
<div>red</div>
<div>red</div>
</div>
<div class="col-xs-3" style="border: 1px solid #00f">
blue
</div>
</div>

Answer 4

According with the grid that provided bootstrap-grid you have to made some modifications like this:
<div class="row">
<div class="col-md-3" style=" border:1px solid;">
<uc1:ucretsizilan runat="server" ID="ucretsizilan" />
<div class="row">
<div class="col-md-12" style=" border:1px solid blue;"><uc1:nobetciBox runat="server" ID="nobetciBox" /></div>
</div>
</div>
<div class="col-md-9" style=" border:1px solid red;"><uc1:seriVitrin runat="server" ID="seriVitrin" /></div>
</div>