CODEWITHSUNDEEP
csstwitter-bootstrap
Kaan Öztürk
Kaan Öztürk

Reputation: 33

How can I remove space on bootstrap grid

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>

Print Image

  1. Div = Black
  2. Div = Red
  3. 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 ?

Upvotes: 0

Views: 147

Answers (4)

yamitrvg12
yamitrvg12

Reputation: 19

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>

Upvotes: 0

Romulo
Romulo

Reputation: 5104

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>

Upvotes: 1

Fiido93
Fiido93

Reputation: 1978

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;
}

Upvotes: 1

Vinny
Vinny

Reputation: 865

<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>

Upvotes: 1

Related Questions