I cannot figure out why this bootstap code is overlapping the containers on top of each other. I have looked at some of the other people having this issue and I dont think my code has the same error. I think I might be writing css when I should be using bootstrap.
jsfiddle: http://jsfiddle.net/qqxudtst/1/
code:
<section class="section" id="homeHeader">
<div class="container-fluid">
<div class="background-img">
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="text-center">
<div class="row">
<div class='text-justify content-spacing col-lg-7 col-md-12 col-sm-12'>
<h2>SomeContest:</h2>
<h1>Before and After: A Story</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat orci. Nulla vulputate erat turpis, eget convallis augue tincidunt eu. Cras bibendum diam purus, sit amet commodo ante tincidunt ut. Mauris sed tempus neque. Ut efficitur dui ut eros pulvinar scelerisque. Nullam a sagittis ipsum. Morbi eu pretium dui. Etiam non diam in ex commodo finibus in eget lacus. Curabitur tempus lacinia arcu ac ultricies. Donec bibendum lectus enim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat orci. Nulla vulputate erat turpis, eget convallis augue tincidunt eu. Cras bibendum diam purus, sit amet commodo ante tincidunt ut. Mauris sed tempus neque. Ut efficitur dui ut eros pulvinar scelerisque. Nullam a sagittis ipsum. Morbi eu pretium dui. Etiam non diam in ex commodo finibus in eget lacus. Curabitur tempus lacinia arcu ac ultricies. Donec bibendum lectus enim.</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<a class="btn btn-default btn-block" id="submitVideo">Submit Video</a>
</div>
<div class="col-sm-6">
<p id="contactSupport">Questions? Contact support</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="tabContent">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat orci. Nulla vulputate erat turpis, eget convallis augue tincidunt eu. Cras bibendum diam purus, sit amet commodo ante tincidunt ut. Mauris sed tempus neque. Ut efficitur dui ut eros pulvinar scelerisque. Nullam a sagittis ipsum. Morbi eu pretium dui. Etiam non diam in ex commodo finibus in eget lacus. Curabitur tempus lacinia arcu ac ultricies. Donec bibendum lectus enim.</p>
</div>
</section>
Any help/ideas would be appreciated, thanks.
-AA
Remove all of your position:absolute attributes. You're positioning all of these elements on top of each other.
Related
Deleted all the extra stuff, all I want is the row to float left so there is some text next to the image, but it only moves over one line. Using bootstrap if that helps, along with my own CSS file.
example
<!--main body container -->
<div class="container">
<div class="col-sm-6">
<div class="row">
<h1>About Me</h1>
</div>
<div id="bio" class="row">
<img src= "assets/images/linkedin-logo.png" alt="default photo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur.
</div>
</div>
<!--Main Container End-->
</div>
css code:
#bio {
float: left;
}
Float your image to the left
#bio img {
float: left;
}
Example: https://jsfiddle.net/L75dhtny/
you can try this one:
<!--main body container -->
<div class="container">
<div class="col-sm-6">
<div class="row">
<h1>About Me</h1>
</div>
<div id="bio" class="row">
<img src= "assets/images/linkedin-logo.png" alt="default photo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur.
</div>
</div>
<!--Main Container End-->
</div>
DEMO HERE
You can try this -
/* css code */
img {
float: left;
padding:2px;
margin-right:4px;
}
<!--main body container -->
<div class="container">
<div class="col-sm-6">
<div class="row">
<h1>About Me</h1>
</div>
<div id="bio" class="row">
<img src="http://placehold.it/350x150">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur.
</div>
</div>
<!--Main Container End-->
</div>
Add
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
I am using Bootstrap 3. I have text on the left of the page and an image on the right. I am trying to get the text to wrap around an image. I've seen example of this for left aligned images, but I can't seem to get the opposite to work.
To show the error, I have created an example on JSFiddle.
There is a TITLE, then a banner, that should be half the page. They hockey player image should be to the right of the banner and the tops of the 2 images should be aligned, the text should start immediately under the banner, then wrap under the hockey player image. Like a newspaper layout.
<div class="row">
<div class="col-xs-12 col-sm-7">
<h2>My Title</span></h2><!-- should be left aligned-->
<img src="/img/title_image.png" class="img-responsive"/><!--Should be left aligned-->
</div>
<div class="col-xs-12 col-sm-5 pull-right">
<h2> </h2>
<img src="/image_on_right_text_to_wrap_around.png" class="img-responsive"/>
</div>
<div class="col-xs-12">
<!-- This text should be under the title image and wrap underneath the larger image on the right-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
</div>
<div class="col-xs-12">
MORE TEXT HERE
Example Layout here
This may be what you want:
<div class="media">
<div class="media-body">
<h4 class="media-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.</h4>
...
</div>
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
</div>
Is this what you want?I made couple of divs and made it looks simple, you haven't added specific row to your header image, becausse of that both images started to stack inline.And i changed the columns divs.
CODEPEN exapmle
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="row">
<div class="col-xs-12 col-sm-7">
<h2>My Title</span></h2><!-- should be left aligned-->
<img src="http://paradigmmedia.co.uk/wp-content/uploads/header-b88d930b520c523ef8a53abfb86d7523.png" class="img-responsive"/><!--Should be left aligned-->
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-5 pull-right">
<img src="https://lh3.googleusercontent.com/nhzkOTPaoWAYfO-LeklB_kPd5bAqm43D87Q3eHlK3alIse8rgrYPE74epbbbZ2b4EsY=w300" class="img-responsive"/>
</div>
<div class="col-xs-7">
<!-- This text should be under the title image and wrap underneath the larger image on the right-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
</div>
</div>
</div>
</div>
Basically, any UI Framework(Bootstrap) depend on a grid. So you have to do separation of each block and put text different column and image have to put in different column.
.bg-img{
height:200px;
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL");
background-repeat: no-repeat;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-5 col-sm-5">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia</p>
</div>
<div class="col-xs-7">
<p>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL" class="img-responsive"/>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-5">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL" class="img-responsive"/>
</div>
<div class="col-xs-7">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia.
</p>
</div>
</div>
<div class="row">
<div class=" col-sm-6">
<div class="bg-img">
<h4> Lorem ipsu6 dolor sit amet</h4>
</div>
</div>
<div class="col-sm-6">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
In above snippet I have taken 3 rows. In first row I am setting image in left side, In second row image set in right side and third row image set into first row with text on image. you can run my snippet. Good luck. happy to help.
I have solved with with bootstrap 3, it now behaves correctly:
https://jsfiddle.net/cec9086a/
<div class="container">
<div class="jumbotron">
<div class="row">
<h2>
My Title
</h2>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 pull-left">
<img src="http://cliparts.co/cliparts/piq/rGa/piqrGaGyT.png" class="img-responsive"/>
</div>
<div class="col-xs-12 col-sm-6 pull-right">
<img src="http://www.legendsofhockey.net/LegendsOfHockey/members/splash/P197702S.jpg" class="img-responsive pull right"/>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
</div>
</div>
</div>
Ok. I am trying to achieve a "Medium.com style" image alignment, making it larger than it's container and full width. I did what I knew I had to do with the CSS:
img {
position: relative;
left: 50%;
height: auto;
margin: 0px 0 0 -50vw;
width: 100vw;
max-width: 100vw;
}
It almost do what I want it to do, except that, when I use all the 12 grids of Bootstrap, for some reason, it adds a border on the left, as you can see in this fiddle: https://jsfiddle.net/35f4ntqq/
If I change the col-sm-11 to col-sm-10 (making it 11 cols in total), though, it works perfectly fine.
What am I missing here? Or doing wrong...? :/
I think you can changies margin property for img tag:
Like this:
img {
position: relative;
left: 52%;
height: auto !important;
margin: 0px 0 0 -55vw;
width: 100vw;
max-width: 100vw !important;
height: auto !important;
}
See Updated Bootply
You can use container-fluid to achieve the desired result.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
img {
height: auto;
width: 100%;
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-1">
Boo
</div>
<div class="col-sm-11">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ligula nec erat dapibus ullamcorper. Aliquam egestas, justo nec dictum vestibulum, dui eros ullamcorper mauris, non facilisis lorem ligula ut ex. Mauris scelerisque libero nulla, eget luctus velit fringilla ut. Etiam ut magna eget elit gravida ultrices. Quisque a enim id leo tincidunt lobortis. Pellentesque nulla mi, aliquet non mauris et, aliquam egestas leo. Nulla convallis tincidunt gravida. Suspendisse aliquam lacinia eros sit amet pretium. Nam eu ipsum sit amet velit suscipit consectetur vel sit amet dolor. Sed ac aliquam est, dictum gravida est. Donec pellentesque condimentum est at bibendum. Aliquam erat volutpat. Nulla id urna non mauris faucibus fermentum. Phasellus quam ante, bibendum eget orci a, aliquam fringilla tortor. In vitae nulla nec leo tincidunt convallis. Integer ac ipsum a lorem sagittis pretium tincidunt id erat.</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<img src="http://www.lpzoo.org/sites/default/files/images/multimedia/kapukikingnosetonose1200.jpg">
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-11">
<p>Duis maximus est nec eros euismod, quis volutpat magna pellentesque. Maecenas orci sapien, gravida quis commodo a, pharetra at sapien. Etiam scelerisque nunc sit amet ligula volutpat convallis. Nam egestas commodo tortor at pellentesque. Pellentesque vitae dictum urna. Etiam tincidunt magna et aliquam tincidunt. Vestibulum blandit arcu a pulvinar auctor. Phasellus malesuada, tortor sit amet mollis pulvinar, felis felis lacinia tellus, tempus ultricies urna magna et augue. Fusce ut ipsum eget odio sodales viverra. Morbi sit amet hendrerit purus, sit amet porttitor sapien. Quisque ut quam eu erat elementum lobortis. Proin sit amet nisl eget est feugiat vulputate. Morbi eu orci semper, rhoncus lacus eget, fringilla lorem.</p>
</div>
</div>
</div>
https://jsfiddle.net/glebkema/pn8jbk8p/
try this.
"medium.com style"
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-1">
Boo
</div>
<div class="col-xs-11">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ligula nec erat dapibus ullamcorper. Aliquam egestas, justo nec dictum vestibulum, dui eros ullamcorper mauris, non facilisis lorem ligula ut ex. Mauris scelerisque libero nulla, eget luctus velit fringilla ut. Etiam ut magna eget elit gravida ultrices. Quisque a enim id leo tincidunt lobortis. Pellentesque nulla mi, aliquet non mauris et, aliquam egestas leo. Nulla convallis tincidunt gravida. Suspendisse aliquam lacinia eros sit amet pretium. Nam eu ipsum sit amet velit suscipit consectetur vel sit amet dolor. Sed ac aliquam est, dictum gravida est. Donec pellentesque condimentum est at bibendum. Aliquam erat volutpat. Nulla id urna non mauris faucibus fermentum. Phasellus quam ante, bibendum eget orci a, aliquam fringilla tortor. In vitae nulla nec leo tincidunt convallis. Integer ac ipsum a lorem sagittis pretium tincidunt id erat.</p>
</div>
<div class="col-sm-12">
<img class="img-responsive" src="http://www.lpzoo.org/sites/default/files/images/multimedia/kapukikingnosetonose1200.jpg">
</div>
<div class="col-sm-12">
<p>Duis maximus est nec eros euismod, quis volutpat magna pellentesque. Maecenas orci sapien, gravida quis commodo a, pharetra at sapien. Etiam scelerisque nunc sit amet ligula volutpat convallis. Nam egestas commodo tortor at pellentesque. Pellentesque vitae dictum urna. Etiam tincidunt magna et aliquam tincidunt. Vestibulum blandit arcu a pulvinar auctor. Phasellus malesuada, tortor sit amet mollis pulvinar, felis felis lacinia tellus, tempus ultricies urna magna et augue. Fusce ut ipsum eget odio sodales viverra. Morbi sit amet hendrerit purus, sit amet porttitor sapien. Quisque ut quam eu erat elementum lobortis. Proin sit amet nisl eget est feugiat vulputate. Morbi eu orci semper, rhoncus lacus eget, fringilla lorem.</p>
</div>
</div>
</div>
I'm trying to assign different anchors to different divs, but they don't seem to be taking effect. I've tried using <a name="anchor">, <a id="anchor">, and <div id="anchor"> (which worked with some divs, but not all).
This is my current HTML:
<div class="about">
<a name="nabout"></a>
<div class="section">
<div class="section-title job-section-header section-header section-subheader">
<div class="section-bar"></div>
<img src="images/about-photo.png" class="left-image" />
</div>
<div class="section-body jobs">
<p class="section-subtext-md section-subtext section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis nulla a eros porttitor, ut congue elit commodo. Nunc ut dapibus elit. Suspendisse euismod rhoncus felis, id vulputate mauris posuere vitae. Praesent bibendum maximus nibh, nec
tempor diam blandit in. Praesent non metus in odio vehicula cursus vulputate quis quam. Nulla varius massa ac libero commodo imperdiet. Fusce tincidunt metus sapien, sed fringilla nibh vulputate eget. Suspendisse sodales nisi quis hendrerit porttitor.
Morbi in augue sapien. Maecenas ultricies, nisl vitae vehicula vulputate, nunc tellus sagittis turpis, nec laoreet quam velit non nunc. In aliquam libero a tellus commodo, at aliquet risus imperdiet. Fusce finibus a nulla et facilisis. Maecenas
condimentum sit amet velit et sodales. Duis mauris augue, feugiat non ornare pharetra, convallis nec metus. Integer vitae consequat dolor, at tristique lorem.</p>
<p class="section-subtext-md section-subtext section-text">Cras libero massa, fringilla id condimentum ut, aliquam ut nisi. Vestibulum ullamcorper commodo elit at commodo. Nullam dignissim id lacus sed faucibus. Quisque sollicitudin quam sit amet est facilisis tempor. Morbi vehicula quam et mauris faucibus
semper. Etiam vel est eu magna viverra viverra. Donec venenatis, nisl eget rhoncus auctor, lorem est gravida magna, ac consectetur velit libero at turpis. Vivamus at quam sed arcu eleifend suscipit non id mauris. Pellentesque tempor ornare imperdiet.
Morbi ornare luctus imperdiet. Fusce sagittis lorem ut elementum fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div style="clear: both;"></div>
</div>
</div>
Why does <a name> not work sometimes and what should I be using in this case?
The way that HTML anchors works is as follows.
When you give a div or any other DOM object an id attribute, you can then "link" to that object by specifying that id, with a # in your href, to have an a tag link to that tag.
For example:
HTML
Testing
...
<div id="testing">
<h1>Testing DIV</h1>
</div>
By clicking on the above <a> tag, the user's browser will scroll until the very top of the #testing div is at the top of the page, assuming the browser has space to scroll.
Try this
Test
.........
<a name="test"></a>
<h1>Testing</h1>
or this
Test
.......
<div id="test">
<h1>Test</h1>
</div>
I'm not 100% sure why it's not jumping to the location on load, but if you add this javascript
window.location.href = window.location.hash;
to the bottom of the page, that should fix your problem.
I am working on a small project whose front-end is built with the latest version of Bootstrap. I have my sections of the homepage, but I am stuck on making them behave the way I want.
<body>
<div class="container-fluid max-height">
<div class="row max-height">
<div class="col-md-2 col-sm-12 col-xs-12 site-nav">
<div class="row">
<div class="brand">
<a href="index.html">
<img src="http://placehold.it/200x320" class="img-responsive" alt="logo" />
</a>
</div><!-- .brand -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem libero, vulputate vel tellus eu, suscipit facilisis metus. Nulla tempus cursus elit, eget pellentesque risus euismod ut. Fusce sed sodales mauris. In velit arcu, blandit sed tempor vitae, feugiat eu erat. Phasellus ligula odio, porta in libero non, ultrices mollis purus. Duis sollicitudin aliquet nunc, ut dictum turpis laoreet eget. Phasellus eu neque efficitur, bibendum odio vitae, sagittis libero. Proin commodo efficitur magna ac sollicitudin. Aenean bibendum urna at diam accumsan tincidunt. Proin ac elit vitae augue rutrum convallis. Donec magna ex, tempor at libero quis, mattis pharetra nunc. Maecenas sit amet nisi in odio interdum interdum.</p>
</div><!-- .row -->
</div><!-- .col-md-2 -->
<div class="col-md-10 col-sm-12 site-content">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 info-bar">
<h2>SOME TITLE</h2>
</div><!-- .col-md-12 -->
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem libero, vulputate vel tellus eu, suscipit facilisis metus. Nulla tempus cursus elit, eget pellentesque risus euismod ut. Fusce sed sodales mauris. In velit arcu, blandit sed tempor vitae, feugiat eu erat. Phasellus ligula odio, porta in libero non, ultrices mollis purus. Duis sollicitudin aliquet nunc, ut dictum turpis laoreet eget. Phasellus eu neque efficitur, bibendum odio vitae, sagittis libero. Proin commodo efficitur magna ac sollicitudin. Aenean bibendum urna at diam accumsan tincidunt. Proin ac elit vitae augue rutrum convallis. Donec magna ex, tempor at libero quis, mattis pharetra nunc. Maecenas sit amet nisi in odio interdum interdum.</p>
<p>Quisque ligula ex, pellentesque sit amet ligula non, ullamcorper egestas nulla. Sed in sapien ut velit finibus scelerisque ac quis purus. Etiam libero nibh, euismod id augue quis, condimentum aliquam diam. Integer faucibus vitae velit sed iaculis. Praesent laoreet neque est, at pharetra nunc scelerisque sit amet. Curabitur fringilla ex a quam commodo, quis hendrerit ipsum ullamcorper. Vestibulum pretium leo odio, feugiat tristique augue laoreet id. Aenean lobortis, mi sit amet pellentesque condimentum, lectus velit gravida diam, a consequat arcu magna eget diam. Phasellus in iaculis dolor, nec rhoncus dolor.</p>
</div><!-- .col-md-6 -->
<div class="col-md-6">
<div class="article-photo">
<img src="http://placehold.it/500x350" class="img-responsive" alt="article" />
</div>
</div>
</div><!-- .row -->
</div><!-- .col-md-10 -->
</div><!-- .row -->
</div><!-- .container-fluid -->
</body>
Here is a JSFiddle.
I would like the title bar and sidebar to stay where they are and not scroll with the content. The only thing I want scrolling is the content (in blue).
How can I achieve this purely with CSS in Bootstrap?
If that top section is to be part of a dynamic page I would read about the Bootstrap Navbar (http://getbootstrap.com/components/#navbar). A very powerful tool that will be more dynamic than simple scroll styling for your page.
For a simple answer to your current fiddle you'll need to set the scroll to overflow and set a fixed height on the div(s) that you want to scroll. Adding these css attributes to the scrolling divs does what you describe.
style="overflow: scroll; max-height: 100px"
Fiddle here: http://jsfiddle.net/xb6k5vth/1/