CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
raduken
raduken

Reputation: 2129

how to do a line break in Bootstrap 3.3.7

How can I do a line break in bootstrap?, I could just use <br> but I would like to know if I can do this with boostrap and avoid insert <br> in my code.

I would like a empty space beetween the button and col-md-12

jsfiddle: https://jsfiddle.net/y9mznrna/

css:

.col-md-8 {
  border: 1px solid red;
}

.col-md-4 {
  border: 1px solid blue;
}

html:

<div class="col-md-12">
  <h2>test</h2>
  <div class="headline-date">Tuesday
    <button type="button" class="btn btn-primary pull-right">
      <i class="fa fa-user-plus " aria-hidden="true"></i>Call
    </button>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <!-- members table -->
    <div class="col-md-8">
      1
    </div>

    <div class="col-md-4">
      2
    </div>

  </div>
</div>

Upvotes: 3

Views: 69168

Answers (4)

PinguinoSod
PinguinoSod

Reputation: 85

You can use an empty col with a defined height, like this:

HTML:

<div class="row">
  <div class="col-md-12 bs-linebreak">
  </div>
</div>

CSS:

.bs-linebreak {
  height:10px;
}

Example: https://jsfiddle.net/cyo5xbef/2/

Upvotes: 3

Haque
Haque

Reputation: 185

add a margin-top:10px; in side your button style.

<button style="margin-top:10px;" type="button" class="btn btn-primary pull-right">
      <i class="fa fa-user-plus " aria-hidden="true"></i>Call
</button>

you can change 10px to anything you like the gap to be

Upvotes: 1

DavidG
DavidG

Reputation: 119186

First of all, the button should be inside it's own row. Right now you just have an orphaned col-xs-12 which violates the Bootstrap standards. So doing that will separate them better. After that you need some margin between them

<div class="row">
<div class="col-md-12">
  <h2>test</h2>
  <div class="headline-date">Tuesday
    <button type="button" class="btn btn-primary pull-right">
      <i class="fa fa-user-plus " aria-hidden="true"></i>Call
    </button>
  </div>
</div>
</div>
<div class="row">
  <div class="col-md-12 ">
    <!-- members table -->
    <div class="col-md-8">
      1
    </div>

    <div class="col-md-4">
      2
    </div>

  </div>
</div>

And styling:

.col-md-8 {
  border: 1px solid red;
}

.col-md-4 {
  border: 1px solid blue;
}

.headline-date { 
  margin-bottom: 30px;
}

Example: https://jsfiddle.net/y9mznrna/1/

Upvotes: 6

Michael
Michael

Reputation: 140

Wrap the first column in a row like you did at the last content, like this:

<div class="row">
<div class="col-md-12">
content
</div>
</div>

Upvotes: 1

Related Questions