0

I am currently experiencing the below issue where I do not want the word Samples wrapped in a border, I would like it to say Samples (no border around it) with a <hr below it and then a list of divs below it that DOES have a border. I am not sure why Samples is being bordered here as it is outside of my bordered div. Note I am sure that there is no other bordered div wrapping this html. Screenshot and HTML below:

HTML:

<div class="col-md-12" style="margin-top: 75px"> <h3 class="pull-left" style="font-size: 45px">Samples</h3> </div> <div class="col-md-12"> <hr> </div> <div ng-controller="SamplesQueryController"> <div style="border: 1px solid #000000"> <div ng-repeat="item in data" style="margin-left: 14px"> <a href="#/sample/{{item.id}}" style="font-size: 34px; text-decoration: underline">{{item.name}}</a> <br> <span style="font-size: 20px">{{item.description}}</span><br> <hr> </div> </div> </div>
Improve this question
2
  • complete the demo here jsfiddle.net/3uLcc72b and fork it. then add the link to the demo in your Q. Commented Mar 10, 2016 at 21:20
  • It would be helpful if you provided the CSS and probably the HTML for the parent container or just reproduce the issue in a js.fiddle. Commented Mar 10, 2016 at 21:21

2 Answers 2

Reset to default
1

Behavior comes from bootstraps style. to avoid this, wrap each row inside a class="row" div

html {padding:2em; /*demo*/}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-md-12" style="margin-top: 75px"> <h3 class="pull-left" style="font-size: 45px">Samples</h3> </div> <div class="col-md-12"> <hr> </div> </div> <div class="row"> <div ng-controller="SamplesQueryController"> <div style="border: 1px solid #000000"> <div ng-repeat="item in data" style="margin-left: 14px"> <a href="#/sample/{{item.id}}" style="font-size: 34px; text-decoration: underline">{{item.name}}</a> <br> <span style="font-size: 20px">{{item.description}}</span><br> <hr> </div> </div> </div> </div>

your html :

 html {padding:2em; /*demo*/}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-md-12" style="margin-top: 75px"> <h3 class="pull-left" style="font-size: 45px">Samples</h3> </div> <div class="col-md-12"> <hr> </div> <div ng-controller="SamplesQueryController"> <div style="border: 1px solid #000000"> <div ng-repeat="item in data" style="margin-left: 14px"> <a href="#/sample/{{item.id}}" style="font-size: 34px; text-decoration: underline">{{item.name}}</a> <br> <span style="font-size: 20px">{{item.description}}</span><br> <hr> </div> </div> </div>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks! this worked perfectly. but do you know what bootstrap styles caused this to happen in the first place?
@peggy not really, i did not go through the whole css files of bootstrap, i never use it cause it is not flexible enough. as soon as you do not follow class and structure or want to modify the look you have to overwrite bootstrap rules or delete some parts of it
1

At first glance it seems like this might be a basic clearfix issue. I noticed you are using the bootstrap's "pull-left" helper class and adding a class of clearfix to the parent element should fix this. Documentation can be found here: http://getbootstrap.com/css/#helper-classes-clearfix

I'm not totally sure why you would need to float that title in the first place...maybe a better understanding of the bootstrap column system is required because that could be the root of your problems.

UPDATED ANSWER:

<div style="margin-top: 75px"> <h3 style="font-size: 45px">Samples</h3> </div>

http://codepen.io/wgallop99/pen/Myeppy

Removed pull-left class and col-md-12 fixed it partially but again, you may encounter more troubles down the line if you aren't utilizing the bootstrap column classes correctly.

Improve this answer

2 Comments

adding clearfix to the parent element of <div class="col-md-12" style="margin-top: 75px"> <h3 class="pull-left" style="font-size: 45px">Samples</h3> </div> ?
agreed, bootstrap is made to produce bootstrap layouts ;)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.