So I am trying to teach myself how to use bootstrap and for some reason I can not get the website to format correctly when displaying on a mobile device. The website is formatting correctly when the browser is resized but not when emulating a mobile device.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap.min.css" rel="stylesheet" >
</head>
<body>
<div class="container-fluid">
<h1>HERE IS WHERE THE CONTAINER IS. </h1>
<div class="row-fluid">
<div class="col-lg-4 col-md-4 col-sm-4">
<h2>Paragraph 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum leo ut posuere suscipit. Suspendisse sed ex venenatis, tempus quam sit amet, porta sapien. Maecenas in nibh leo. In elementum eleifend odio, id pellentesque justo. Cras vitae placerat mauris. Aliquam erat volutpat. Integer faucibus eget nulla eget mollis. Pellentesque interdum vitae purus ut venenatis. Fusce hendrerit ultricies dignissim.</p>
</div><!--col-lg-4 col-md-4 col-sm-4-->
<div class="col-lg-4 col-md-4 col-sm-4">
<h2>Paragraph 2</h2>
<p>Duis elementum quam sit amet ante imperdiet, id bibendum nunc finibus. Donec et semper quam, et tempus tellus. Nullam quis nisl eu sem sodales consectetur. Donec ornare urna elit, in euismod leo feugiat eget. In eu placerat tellus. Nullam et tristique purus. Sed ut accumsan ipsum, nec semper mauris.</p>
</div><!--col-lg-4 col-md-4 col-sm-4-->
<div class="col-lg-4 col-md-4 col-sm-4">
<h2>Paragraph 3</h2>
<p>Mauris euismod massa a gravida posuere. Etiam placerat euismod est. Nam sed scelerisque elit. Mauris id ultrices enim. Nulla eu justo eget tellus vestibulum lacinia non eu augue. Maecenas porta purus vitae vehicula mattis. Nam auctor euismod ornare. Morbi eleifend luctus varius. Sed non nisl porta, vehicula elit sed, rhoncus felis. Aliquam ac elementum nunc. Integer blandit porta nisi, et venenatis nibh. Donec velit lorem, aliquet vel lorem in, efficitur tempus leo. Nulla facilisi. Nam vel malesuada mauris. Vivamus leo libero, finibus ut justo eget, tristique lobortis lectus. Etiam luctus urna eget leo lobortis blandit.</p>
</div><!--col-lg-4 col-md-4 col-sm-4-->
</div><!--row-->
</div><!--container-->
</body>
</html>
I have been unable to figure out why this would be. Any help would be appreciated.
It looks like your using Bootstrap 2 here, take a look at this tutorial on configuring Bootstrap 3 to work on mobile devices.
Related
I was given a test to replace all the div tags in an Html file with semantic Html5 tags. After replacing all the tags, my test failed in 2 places; I'll point them out below. In the test, it was also stated that the classes and id of the tags might give you a little context about the Tag that might be used the replace them.
Here is the initial code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 semantic codility task</title>
<meta name="description" content="HTML5 semantic codility task" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="top-menu">
<div class="menu-element" id="logo">
<a href="#">
<img alt="Codility" src="images/logo.png" />
</a>
</div>
<div class="menu-element">
About us
</div>
<div class="menu-element">
References
</div>
<div class="menu-element">
Contact
</div>
</div>
<div id="content-container">
<div id="sidepanel">
<h2 class="sidepanel-title">Integer a placerat arcu.</h2>
<p class="sidepanel-content">
Aenean elementum posuere feugiat. Nulla faucibus pharetra commodo. Integer eu nisi quis diam ullamcorper gravida
quis vel augue. Ut urna dui, venenatis vel dictum sit amet, lacinia ut massa. Nullam nec magna nisi. Donec sagittis
sem ligula, blandit fringilla arcu dictum vitae. Nam eget fermentum leo. Proin fermentum nibh sit amet quam
ultricies hendrerit. Integer sed neque tincidunt, volutpat sapien vel, pellentesque augue. Nullam quis velit eget
leo molestie lobortis et eu magna. Fusce leo augue, blandit sed purus vitae, tincidunt consectetur velit. Ut at
nibh augue. Nunc viverra laoreet interdum. Nunc mattis libero et diam dictum viverra. Nulla id odio mi. Sed eu ante
non nisl aliquet interdum at ut enim.
</p>
<p class="sidepanel-content">
Curabitur eleifend elementum tincidunt. Phasellus sit amet elit a massa sodales condimentum. Proin in lorem eu est
ornare volutpat. Donec nec turpis in eros pretium maximus. Curabitur pellentesque rutrum vehicula. Etiam eu
ultrices lorem, ac scelerisque lacus. Vivamus vestibulum mi eget nunc tincidunt mattis. Nam feugiat at diam sed
facilisis. Quisque bibendum, ante quis scelerisque pharetra, diam sem aliquam diam, a hendrerit dui orci eu ante.
Vestibulum volutpat augue sit amet bibendum commodo. Pellentesque convallis tincidunt dapibus. Sed imperdiet
tincidunt tortor vitae congue.
</p>
<p class="sidepanel-content">
Praesent eleifend massa velit, ut aliquet purus pretium quis. Vivamus euismod, arcu a varius euismod, arcu urna
lacinia nibh, quis eleifend lacus nibh a ligula. In efficitur et nisl in tristique. Vestibulum rutrum finibus
vulputate. Integer pharetra congue tortor ut luctus. Vivamus tempor, massa eu convallis rhoncus, orci dolor porta
velit, vel viverra tellus sapien id erat. Vivamus accumsan blandit neque, in viverra lorem pharetra in. Quisque nec
arcu euismod, mollis augue sed, porttitor dui. Proin sed iaculis odio. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Nam bibendum felis sit amet erat ornare fringilla.
</p>
</div>
<div id="content">
<div id="main-block">
<h1 id="main-title">Duis varius venenatis nulla et.</h1>
<p id="main-description">
Pellentesque nec dolor gravida, porta metus et, dignissim tellus. Vivamus facilisis erat eget condimentum
volutpat.
</p>
</div>
<div class="site-block">
<h2 class="subtitle">Aenean feugiat tellus vitae finibus laoreet.</h2>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultrices laoreet nisi, vitae commodo erat malesuada
quis. Etiam vitae libero euismod, commodo massa in, luctus nisi. Pellentesque aliquam leo mi, pulvinar porttitor
orci auctor vitae. Quisque sagittis, velit ac consequat sollicitudin, enim est varius ligula, sed vulputate odio
libero sit amet nunc. Nunc urna mauris, porttitor a vestibulum ac, fringilla aliquam dui. Sed fringilla venenatis
erat quis consectetur. Nam id sapien et massa dapibus dapibus. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Nam scelerisque nibh a risus ullamcorper, nec faucibus lectus gravida.
Vivamus id est purus. Donec imperdiet interdum auctor. Nunc in ante velit. Phasellus dictum et lectus ut
malesuada. Nullam eget ante sodales, elementum sem et, porta mi. Aliquam accumsan arcu at eros sagittis accumsan
nec non urna. Phasellus at diam non urna congue tempus in sit amet eros.
</p>
</div>
<div class="site-block">
<div class="image-container">
<img alt="article related image" id="main-image" src="images/image.png" />
<div class="image-caption">Mauris eget risus ullamcorper, facilisis lectus eget.</div>
</div>
</div>
</div>
</div>
<div id="copyright-container">
<div id="copyright-content">
<p class="copyright">Copyright 1999-2020.</p>
<p>by Codility ® All Rights Reserved.</p>
</div>
</div>
</body>
</html>
Here is the layout image :
Here is my final code with semantic changes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 semantic codility task</title>
<meta name="description" content="HTML5 semantic codility task" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<nav id="top-menu">
<span class="menu-element" id="logo">
<a href="#">
<img alt="Codility" src="images/logo.png" />
</a>
</span>
<span class="menu-element">
About us
</span>
<span class="menu-element">
References
</span>
<span class="menu-element">
Contact
</span>
</nav>
<main id="content-container">
<aside id="sidepanel">
<h2 class="sidepanel-title">Integer a placerat arcu.</h2>
<p class="sidepanel-content">
Aenean elementum posuere feugiat. Nulla faucibus pharetra commodo. Integer eu nisi quis diam ullamcorper gravida
quis vel augue. Ut urna dui, venenatis vel dictum sit amet, lacinia ut massa. Nullam nec magna nisi. Donec sagittis
sem ligula, blandit fringilla arcu dictum vitae. Nam eget fermentum leo. Proin fermentum nibh sit amet quam
ultricies hendrerit. Integer sed neque tincidunt, volutpat sapien vel, pellentesque augue. Nullam quis velit eget
leo molestie lobortis et eu magna. Fusce leo augue, blandit sed purus vitae, tincidunt consectetur velit. Ut at
nibh augue. Nunc viverra laoreet interdum. Nunc mattis libero et diam dictum viverra. Nulla id odio mi. Sed eu ante
non nisl aliquet interdum at ut enim.
</p>
<p class="sidepanel-content">
Curabitur eleifend elementum tincidunt. Phasellus sit amet elit a massa sodales condimentum. Proin in lorem eu est
ornare volutpat. Donec nec turpis in eros pretium maximus. Curabitur pellentesque rutrum vehicula. Etiam eu
ultrices lorem, ac scelerisque lacus. Vivamus vestibulum mi eget nunc tincidunt mattis. Nam feugiat at diam sed
facilisis. Quisque bibendum, ante quis scelerisque pharetra, diam sem aliquam diam, a hendrerit dui orci eu ante.
Vestibulum volutpat augue sit amet bibendum commodo. Pellentesque convallis tincidunt dapibus. Sed imperdiet
tincidunt tortor vitae congue.
</p>
<p class="sidepanel-content">
Praesent eleifend massa velit, ut aliquet purus pretium quis. Vivamus euismod, arcu a varius euismod, arcu urna
lacinia nibh, quis eleifend lacus nibh a ligula. In efficitur et nisl in tristique. Vestibulum rutrum finibus
vulputate. Integer pharetra congue tortor ut luctus. Vivamus tempor, massa eu convallis rhoncus, orci dolor porta
velit, vel viverra tellus sapien id erat. Vivamus accumsan blandit neque, in viverra lorem pharetra in. Quisque nec
arcu euismod, mollis augue sed, porttitor dui. Proin sed iaculis odio. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Nam bibendum felis sit amet erat ornare fringilla.
</p>
</aside>
<section id="content">
<section id="main-block">
<h1 id="main-title">Duis varius venenatis nulla et.</h1>
<p id="main-description">
Pellentesque nec dolor gravida, porta metus et, dignissim tellus. Vivamus facilisis erat eget condimentum
volutpat.
</p>
</section>
<section class="site-block">
<h2 class="subtitle">Aenean feugiat tellus vitae finibus laoreet.</h2>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultrices laoreet nisi, vitae commodo erat malesuada
quis. Etiam vitae libero euismod, commodo massa in, luctus nisi. Pellentesque aliquam leo mi, pulvinar porttitor
orci auctor vitae. Quisque sagittis, velit ac consequat sollicitudin, enim est varius ligula, sed vulputate odio
libero sit amet nunc. Nunc urna mauris, porttitor a vestibulum ac, fringilla aliquam dui. Sed fringilla venenatis
erat quis consectetur. Nam id sapien et massa dapibus dapibus. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Nam scelerisque nibh a risus ullamcorper, nec faucibus lectus gravida.
Vivamus id est purus. Donec imperdiet interdum auctor. Nunc in ante velit. Phasellus dictum et lectus ut
malesuada. Nullam eget ante sodales, elementum sem et, porta mi. Aliquam accumsan arcu at eros sagittis accumsan
nec non urna. Phasellus at diam non urna congue tempus in sit amet eros.
</p>
</section>
<section class="site-block">
<figure class="image-container">
<img alt="article related image" id="main-image" src="images/image.png" />
<figcaption class="image-caption">Mauris eget risus ullamcorper, facilisis lectus eget.</figcaption>
</figure>
</section>
</section>
</main>
<footer id="copyright-container">
<article id="copyright-content">
<p class="copyright">Copyright 1999-2020.</p>
<p>by Codility ® All Rights Reserved.</p>
</article>
</footer>
</body>
</html>
I was getting error with id main-block and class copyright, The error was like this :
AssertionError: xpath for id: main-block is incorrect: {'/html/body/main/article/section[1]'}, this means that html5 DOM structure with this tag is not correct for SEO rules (xpath algorithm code: https://gist.github.com/ergoithz/6cf043e3fdedd1b94fcf)
and same for copyright.
What do I need to replace main-block and copyright tags? Thanks for reading.
Honestly not sure, this seems like a very specific issue with the class you're in, but it may serve you to look at this page not from the viewpoint of changing the old version, but how you would write it from scratch so it's semantic from the getgo.
It looks like you have a <section> tag around two other sections, which is unnecessary, though not incorrect. You also have your <aside> inside your main, which doesn't make much sense as the stuff that goes in aside is meant to be not main content.
the problem with this is that semantics are meant to create more meaning in an html document, so it's hard to say when they are being used incorrectly, excluding obvious misuses. Obviously, the footer doesn't go in the body. Obviously, the header doesn't go below the footer. But who's to say that an article needs to go in a section? Or that an article can't have a section? No one. In fact, both layouts are correct.
The real answer is going to come from the class you're taking, not a stranger unfamiliar with the specifics of this class.
I am creating a Mostly Fluid pattern in Bootstrap. In the row below the main row, the background colors are extending to fill the gutter area. How can i prevent this? Tried many things bit can't figure out a way.
image
body {
float: left;
overflow-x: hidden;
overflow-y: hidden;
}
.up {
font-size: 1.2em;
background-color: #64B5F6;
width: 100%;
}
.down-l {
font-size: 1em;
background-color: #1976D2;
}
.down-r {
font-size: 1em;
background-color: #42A5F5;
}
<!DOCTYPE html>
<html>
<head>
<title>Mostly Fluid by Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="MostlyFluid.css">
</head>
<body>
<div class="container-fluid">
<div class="up">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sollicitudin, risus ac porta hendrerit, urna mauris malesuada dui, sed finibus justo justo vitae libero. Etiam placerat rutrum bibendum. Proin luctus sagittis lorem, in suscipit
dui placerat ut. Maecenas finibus mollis metus, non tristique nibh pretium vitae. Praesent laoreet lacus in mollis viverra. Mauris nec metus a lorem venenatis malesuada in eu mi. Quisque vel eros augue. Praesent at nisl nec eros tempus pretium
sit amet id justo. Nunc purus justo, dictum vel nisl a, convallis viverra enim. Pellentesque ac lectus vel orci gravida finibus. Suspendisse ac sollicitudin justo. Donec ut dui quam. Nullam vulputate, dui eget consectetur ultricies, justo
nulla consectetur orci, nec vulputate mauris dui ut nunc. Phasellus molestie dui vitae ante sodales ultrices. Aenean non ullamcorper purus. Aliquam lacinia, justo at gravida tristique, sem sem rutrum ex, non fermentum erat neque sed ex. Fusce
dolor libero, rutrum nec elit sit amet, eleifend mollis dui. Praesent at dignissim purus, id mattis elit. Duis et finibus nunc. Donec mi mi, posuere eu est at, gravida imperdiet ligula. Nam eleifend ut mauris id viverra. Ut sollicitudin tortor
non justo dictum pharetra. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi eu ornare nisi. Aenean accumsan egestas ultrices. Suspendisse finibus quam sed consequat hendrerit. Nunc non ultricies
ligula. Aenean et arcu vel lectus lobortis varius. Vivamus pretium neque metus, sed rutrum ipsum iaculis in. Praesent molestie metus sed fermentum sollicitudin. Sed tempus massa ac malesuada cursus. Nunc dapibus orci id libero egestas vehicula.
Maecenas semper bibendum facilisis. Ut a nulla consectetur, sagittis orci eget, sollicitudin neque. Maecenas tortor diam, porttitor ut urna egestas, tempor aliquet dolor. Nulla luctus aliquam dolor at imperdiet. Aliquam lobortis turpis fringilla
sapien eleifend eleifend.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 down-l">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sollicitudin, risus ac porta hendrerit, urna mauris malesuada dui, sed finibus justo justo vitae libero. Etiam placerat rutrum bibendum. Proin luctus sagittis lorem, in suscipit dui
placerat ut. Maecenas finibus mollis metus, non tristique nibh pretium vitae. Praesent laoreet lacus in mollis viverra. Mauris nec metus a lorem venenatis malesuada in eu mi. Quisque vel eros augue. Praesent at nisl nec eros tempus pretium sit
amet id justo. Nunc purus justo, dictum vel nisl a, convallis viverra enim. Pellentesque ac lectus vel orci gravida finibus. Suspendisse ac sollicitudin justo.</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 down-r">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sollicitudin, risus ac porta hendrerit, urna mauris malesuada dui, sed finibus justo justo vitae libero. Etiam placerat rutrum bibendum. Proin luctus sagittis lorem, in suscipit dui
placerat ut. Maecenas finibus mollis metus, non tristique nibh pretium vitae. Praesent laoreet lacus in mollis viverra. Mauris nec metus a lorem venenatis malesuada in eu mi. Quisque vel eros augue. Praesent at nisl nec eros tempus pretium sit
amet id justo. Nunc purus justo, dictum vel nisl a, convallis viverra enim. Pellentesque ac lectus vel orci gravida finibus. Suspendisse ac sollicitudin justo.</p>
</div>
</div>
</div>
</body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>
Create a class called .row--no-margin or any name. and make it
.row--no-margin{margin-left:0px; margin-right: 0px;}
now apply this class on your second row.
Here is the screenshoot: http://take.ms/QVoIa
Apply this in the row where you don’t want to fill the gutter area
<div style="margin-left: 0px; margin-right: 0px;" class="row"> </div>
i have this code
<html lang='es'>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap337/css/normalize.css">
<script src="bootstrap337/js/jquery-3.2.0.min.js"></script>
<script src="bootstrap337/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
padding:0.5%;
}
</style>
</head>
<body>
<div class='col-md-12' style='background-color:#DDD'>
<h1 class='text-center'>Sea bienvenido a la web</h1><hr/>
</div>
<hr/>
<div class='col-md-3' style='background-color:#DDD'>
<p class='text-justify'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt dictum lacus sed pellentesque. Suspendisse dignissim eros eget lacus commodo, nec congue ante sollicitudin. Ut consequat metus at metus volutpat congue sit amet facilisis turpis. Fusce vitae eros lectus. Nullam blandit massa ac erat tempor fermentum. Aenean tristique eu neque at sagittis. Curabitur sed dui ut orci rutrum fringilla. Phasellus suscipit lacus ut iaculis interdum. Nunc vehicula lacus at risus luctus, non malesuada urna tempor. In eget massa ligula..</p>
</div>
<div class='col-md-6' style='background-color:#EEE'>
<div class='col-md-6' style='background-color:#AAA'>
<p class='text-justify'>Vivamus sit amet cursus diam, non aliquet urna. Mauris viverra commodo fringilla. Donec rutrum sodales ex a tincidunt.</p>
</div>
<p class='text-justify'>Nam ac fermentum nulla. Donec nibh lacus, feugiat vitae magna sit amet, mollis ornare lorem. Etiam a auctor enim. Nam sed egestas est. Vivamus sit amet cursus diam, non aliquet urna. Mauris viverra commodo fringilla. Donec rutrum sodales ex a tincidunt. Integer volutpat mauris eget dictum tristique. Suspendisse quis sagittis nisl. In purus lorem, volutpat in eros cursus, porta faucibus ligula. Sed non dolor convallis, efficitur urna a, congue velit. Pellentesque nec ante sit amet leo ultricies fringilla efficitur sit amet est. Proin ut ullamcorper felis. Quisque eget iaculis arcu.</p>
</div>
<div class='col-md-3' style='background-color:#DDD'>
<p class='text-justify'>Nunc suscipit augue iaculis, facilisis ex a, tristique tellus. Nullam vel tellus libero. Nulla facilisi. Suspendisse potenti. Mauris in varius diam. Aliquam non malesuada tellus. Nullam pulvinar tellus id aliquet fermentum. Quisque sed dictum justo, id mollis ante. In hac habitasse platea dictumst. Donec eu nisi facilisis metus porta consectetur id id nisi.</p>
</div>
</body>
</html>
But the problem is the following: i want the text outside the div (thereis a div inside a div)
mid div dont get right text padding, as i mark in the image
How to solve the text right padding?
Image with the code
Give that element a right/bottom margin.
.in-text-block {
margin: 0 1em 1em 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html lang='es'>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap337/css/normalize.css">
<script src="bootstrap337/js/jquery-3.2.0.min.js"></script>
<script src="bootstrap337/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
padding:0.5%;
}
</style>
</head>
<body>
<div class='col-md-12' style='background-color:#DDD'>
<h1 class='text-center'>Sea bienvenido a la web</h1>
<hr/>
</div>
<hr/>
<div class='col-md-3' style='background-color:#DDD'>
<p class='text-justify'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt dictum lacus sed pellentesque. Suspendisse dignissim eros eget lacus commodo, nec congue ante sollicitudin. Ut consequat metus at metus volutpat congue sit amet facilisis turpis.
Fusce vitae eros lectus. Nullam blandit massa ac erat tempor fermentum. Aenean tristique eu neque at sagittis. Curabitur sed dui ut orci rutrum fringilla. Phasellus suscipit lacus ut iaculis interdum. Nunc vehicula lacus at risus luctus, non malesuada
urna tempor. In eget massa ligula..</p>
</div>
<div class='col-md-6' style='background-color:#EEE'>
<div class='col-md-6 in-text-block' style='background-color:#AAA;'>
<p class='text-justify'>Vivamus sit amet cursus diam, non aliquet urna. Mauris viverra commodo fringilla. Donec rutrum sodales ex a tincidunt.</p>
</div>
<p class='text-justify'>Nam ac fermentum nulla. Donec nibh lacus, feugiat vitae magna sit amet, mollis ornare lorem. Etiam a auctor enim. Nam sed egestas est. Vivamus sit amet cursus diam, non aliquet urna. Mauris viverra commodo fringilla. Donec rutrum sodales ex a tincidunt.
Integer volutpat mauris eget dictum tristique. Suspendisse quis sagittis nisl. In purus lorem, volutpat in eros cursus, porta faucibus ligula. Sed non dolor convallis, efficitur urna a, congue velit. Pellentesque nec ante sit amet leo ultricies
fringilla efficitur sit amet est. Proin ut ullamcorper felis. Quisque eget iaculis arcu.</p>
</div>
<div class='col-md-3' style='background-color:#DDD'>
<p class='text-justify'>Nunc suscipit augue iaculis, facilisis ex a, tristique tellus. Nullam vel tellus libero. Nulla facilisi. Suspendisse potenti. Mauris in varius diam. Aliquam non malesuada tellus. Nullam pulvinar tellus id aliquet fermentum. Quisque sed dictum justo,
id mollis ante. In hac habitasse platea dictumst. Donec eu nisi facilisis metus porta consectetur id id nisi.</p>
</div>
</body>
</html>
You have a lot of problems in your code.
Using bootstrap you should always put everything in a "container".
Then inside the container have a "row", then inside rows you have a "column".
example:
<div class="container">
<div class="row">
<div class="col-xs-12">
Some text
</div>
</div>
</div>
If you want to add more rows and coloumns you still have to keep it "in order" and always only put columns inside of rows and rows inside of columns (or inside containers).
This will make your page work better because in Bootstrap there are paddings and margins that even each other out.
Then if you want to add padding to a specific div, it's better not to override the bootstrap classes, nor add padding to * which effects everything.
Instead- add a class to the div you want to add padding to and add padding for that class only.
example
`<style>
.extra-padding {
padding: 20px;
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-3">
</div>
<div class="col-xs-9 extra-padding">
</div>
</div>
</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 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/