How to Do a Line Break in Bootstrap 3.3.7
How Can I Do a Line Break in Bootstrap? , I Could Just Use but I Would Like to Know If I Can Do This with Boostrap and Avoid Insert in My Code. I Would Like a...
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:
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>
4 Answers
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:
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:
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
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>
Alexander Ross has covered the video game industry for a decade, writing deep dives on game design, esports tournaments, VR developments, and gaming culture.
