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>`
Related
I'd like to get non-scrolling background div on page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="back"/>
<div class="front">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus turpis tortor, semper id suscipit vel, bibendum eu magna. Nullam a libero nisi. Fusce eget elementum augue. Ut tellus leo, dignissim varius finibus a, aliquet ut turpis. Proin non elit luctus, maximus nunc ac, auctor elit. Nullam erat ante, faucibus ac viverra eget, finibus nec ipsum. Vivamus sit amet purus accumsan justo finibus rutrum eu nec nunc.</p>
<p>Suspendisse eros lorem, luctus vitae volutpat ultricies, egestas et risus. Morbi fermentum iaculis nunc, ac tincidunt elit tristique sed. Aenean efficitur velit elit, vitae efficitur ex lobortis non. Etiam in orci ut libero lobortis laoreet. Suspendisse efficitur et sem non bibendum. Nam iaculis, mi in pharetra auctor, diam tellus commodo eros, eget volutpat ipsum enim vitae justo. Sed non ullamcorper odio, ac euismod ligula. Proin euismod eleifend convallis. Vivamus maximus accumsan dignissim. Morbi interdum magna sit amet tempor lacinia. Vivamus nec mi ligula. Donec tortor ex, commodo a est sit amet, volutpat gravida risus. Mauris vitae malesuada est. Curabitur blandit posuere ligula sit amet feugiat. Sed est tellus, cursus eget laoreet et, imperdiet eget dui. Donec facilisis, leo at mollis maximus, sapien purus lacinia mauris, ut fringilla turpis nibh finibus nunc.</p>
<p>Maecenas eget lorem posuere, tincidunt massa sit amet, vehicula diam. Nunc vel consequat nulla. Etiam volutpat volutpat fringilla. Suspendisse potenti. In mattis ex non ex iaculis, eu gravida nulla ultrices. Curabitur ut sem purus. Donec quis tempor lorem, faucibus condimentum eros. Donec massa dui, euismod non tincidunt sed, tempor id nisl. Pellentesque varius mollis nibh.</p>
</div>
<script src="script.js"></script>
</body>
</html>
My style.css looks like:
.back {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: lightblue;
}
.front {
position: relative;
}
What I expect - my long text scrolled over lightblue background (first div).
Whit I've seen - scrolling locked, I see just on-screen portion of long-text. So, div.back seems to be at top of z-index stack, when I expect opposite.
Why it's happen?
Thanks to #Alohci:
<div class="back"/> is invalid.
Correct is <div class="back"></div>
I created a website which basically consists of a button and everytime that you click on the button a sentence appears above it.
As Background I´ve set a picture. On Mobile I have the Problem that when a long sentence appears the content gets stretched so much that you have to scroll to reach the bottom of the page and at the bottom of the page appears a blank space underneath the picture. This whitespace doesnt appear in the developer tool though, just on my real phone.
So far I´ve been searching quite some time looking for a solution but i didnt find one. I though about disabling background-repeat: no-repeat; in media query but this would have unnice side effects.
html, body{
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow-x:hidden;
}
body {
background-image: url('../Images/BG.jpg');
background-repeat: no-repeat;
background-size:cover;
color: #FFF;
font-size: 125%;
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: center;
}
This is the HTML
<!DOCTYPE html>
<html lang="de">
<head>
<title>Generator</title>
<link rel="stylesheet" type="text/css" href="Css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0>
</head>
<body >
<div id="main">
<header class="header">
<h1> Generator<span style="color:red">.com</span> </h1>
</header>
<div class="mainContent">
<article id="spruchErstellen">
</article>
</div>
<div class="mainButton">
<button class="button" onclick="neuerSpruch()">Go!</button>
</div>
</div>
<div id="space">
</div>
<footer id="mainFooter">
<p>Copyright © 2019; All Rights Reserved</p>
</footer>
<script src="javascript.js"></script>
</body>
</html>
I want the background-picture to allways fill the whole screen and to have no white spaces.
Greetings and thanks for your help.
The problem as i guess is happening because of your content overflowing its container block, so the body shows the white extra space on the bottom because text took more space than it should,one of the solutions that i found to your problem is by setting your vertical overflow to auto using overflow-y:auto
html, body{
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow-y:auto;
}
body {
background-image: url('https://image.freepik.com/vector-gratis/fondo-abstracto-acuarela-efecto-grunge_1340-4291.jpg');
background-repeat: no-repeat;
background-size:cover;
color: #FFF;
font-size: 125%;
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: center;
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Generator</title>
<link rel="stylesheet" type="text/css" href="Css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0>
</head>
<body >
<div id="main">
<header class="header">
<h1> Generator<span style="color:red">.com</span> </h1>
</header>
<div class="mainContent">
<article id="spruchErstellen">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas justo sit amet cursus tempus. Ut nec ligula vestibulum, aliquet tellus ac, pellentesque dolor. Fusce egestas congue nibh vel ultrices. Duis mollis arcu at sollicitudin tempus. Nam sed felis quis ligula dictum fermentum. Sed eget arcu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo tellus, tempus faucibus arcu sit amet, tempor dignissim purus. Etiam rutrum fermentum accumsan. Sed interdum libero in laoreet aliquam. Integer sed dolor enim. Fusce aliquam ullamcorper dictum. Sed vehicula euismod felis, ornare condimentum metus dictum vel. Nam vestibulum ante eget ipsum efficitur pellentesque. Aliquam ac facilisis magna, eget rutrum erat. Pellentesque at quam ut metus pellentesque vulputate in ut eros.
Nam varius fermentum felis vel fringilla. Aliquam et sapien accumsan, viverra leo vel, iaculis nunc. Nullam vehicula cursus orci in malesuada. Quisque lacinia metus non lectus elementum, vel commodo augue blandit. Mauris dictum odio ut purus mattis rhoncus. Nam auctor consequat risus auctor euismod. Morbi aliquam eros nisl, in egestas tortor feugiat a. Morbi viverra nec mauris sed tempus. Cras blandit sagittis eros.
Aenean tempor risus odio, ut pretium massa mollis sed. Duis finibus justo non sem volutpat convallis. Donec rutrum nec lectus vitae iaculis. Aenean vitae tellus tristique, porta turpis nec, volutpat sem. Aliquam molestie scelerisque arcu in auctor. Nam suscipit est at est dictum maximus. Nulla facilisi. Phasellus eget mattis mauris, nec bibendum arcu. Cras ornare egestas eleifend. Integer semper elementum euismod. Sed a ligula risus. Fusce commodo sem sit amet malesuada blandit. Donec at justo et metus viverra aliquam eget sit amet turpis.
Integer ligula tellus, accumsan volutpat risus vitae, suscipit accumsan neque. Quisque sed efficitur urna. Nullam mollis ultricies enim, vitae interdum ipsum consequat consectetur. Phasellus tincidunt nunc ut nisi ullamcorper, in laoreet erat mollis. Vivamus a semper orci, sed vestibulum risus. Aenean ultrices quam tristique vestibulum vulputate. Praesent rutrum tempor libero, vitae sollicitudin tellus iaculis sit amet. Proin vulputate tellus tellus, sit amet dignissim sem venenatis sed. Pellentesque cursus lorem eu mauris malesuada scelerisque. Integer quis pulvinar urna. Aenean vitae porta ex, sit amet hendrerit lorem. Mauris dictum magna vitae imperdiet placerat.
Duis consectetur nec sem et hendrerit. Fusce ut porttitor arcu. Curabitur condimentum volutpat congue. Phasellus mauris dolor, commodo id felis sit amet, ornare imperdiet ante. Integer dignissim elit sit amet magna rutrum, vitae interdum dolor dignissim. Phasellus vulputate ac quam non porta. Nam viverra sapien vel metus consequat, vitae rutrum risus posuere. Fusce nec pellentesque sapien. Curabitur non efficitur nunc, at sodales sapien. Donec vulputate, tellus id rhoncus euismod, mauris lacus imperdiet urna, non ornare risus quam a diam. Maecenas sit amet libero ante. Aliquam non mauris a risus vehicula imperdiet. Donec volutpat euismod vulputate. Morbi nec egestas lectus, a aliquet nisi.
</article>
</div>
<div class="mainButton">
<button class="button" onclick="neuerSpruch()">Go!</button>
</div>
</div>
<div id="space">
</div>
<footer id="mainFooter">
<p>Copyright © 2019; All Rights Reserved</p>
</footer>
<script src="javascript.js"></script>
</body>
</html>
PS: the background image and the text are just for demonstration.
I started to learn bootstrap a few days ago and now i'm trying to build my own website but i'm stuck with the layout.
I'm trying to get something like this :
But i'm stuck with this :
Here is my code :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class = "row">
<div class="col-md-4 h-50" style="background:blue;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lac</p>
</div>
<div class="col-md-8" style="background:red;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lacus. Aenean eu elit id tortor porttitor vehicula. Etiam ac risus pretium, lacinia nibh sed, posuere orci. Nam consequat orci sed pharetra condimentum. Morbi ultricies viverra lorem, ac pellentesque ante aliquet sed. Duis iaculis interdum quam vitae tincidunt. Suspendisse volutpat euismod varius.
Aliquam erat volutpat. Mauris imperdiet condimentum accumsan. Aliquam mollis turpis diam, et congue est imperdiet sed. Morbi sed tellus ut justo eleifend condimentum. Quisque dignissim cursus lectus. In a condimentum justo. Phasellus auctor quam at leo mollis faucibus. Integer rhoncus luctus accumsan.
In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut luctus luctus tortor, a dignissim ante luctus at. Nunc ac turpis ullamcorper, semper ipsum nec, tincidunt est. Donec nec fringilla dolor. Quisque sed neque semper, convallis massa a, sollicitudin dui. Donec id ipsum justo. Quisque a porttitor eros, eu ullamcorper purus. Maecenas euismod massa mattis dignissim tempus. Mauris non turpis magna. Nulla accumsan suscipit ipsum quis varius. Phasellus nec sapien fermentum, aliquet arcu sed, lobortis nunc.
Integer et nisl ut nisi venenatis rutrum in nec elit. Sed a sem vitae metus ultricies commodo. Praesent ultricies, diam id tempus consequat, justo lacus sodales metus, ac ornare dolor odio ut nisi. Proin in mi ornare, hendrerit nulla sed, porta metus. Curabitur ac quam posuere, tempus nunc a, varius libero. Quisque nec enim pharetra, pulvinar ligula et, vestibulum elit. Integer enim dui, laoreet sit amet aliquam vitae, viverra ut enim. Morbi in dignissim felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus lobortis nisl sit amet risus venenatis pellentesque. Donec ultricies aliquam purus, vitae venenatis mauris sagittis congue. Sed vehicula iaculis lacinia. Pellentesque maximus elit quis arcu imperdiet ornare. Donec nec nisl id velit laoreet tempus ac id nisl.
Phasellus pulvinar erat ac quam pellentesque pellentesque. Vestibulum nec porta dui. Curabitur nec ligula at nunc blandit tristique vitae ac elit. Phasellus finibus vulputate arcu eget malesuada. Nunc nec massa ullamcorper tellus ullamcorper vulputate. Vestibulum et vestibulum ante. Quisque vulputate sed lacus quis ornare. </p>
</div>
</div>
<div class="row">
<div class="col-md-4 h-50" style="background:green;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lac</p>
</div>
</div>
</div>
</body>
</html>
How can I achieve this result ? I do not ask for a direct answer but some advice to help me.
Thank you guys.
<div class="row">
<div class="col-md-4">
<div> Blue div</div>
<div> Green div</div>
</div>
<div class="col-md-8">
<div> Red div</div>
</div>
</div>
The logic here is, you have to split your container into two columns. The 1st column takes, 4 medium columns as its width and the 2nd one takes 8 medium columns.
And you need to break the first column block into two rows.
Make a single row class and warp every thing into that ,Like to learn Bootstrap first Understand the Grid system strongly Then its easy to create Layouts
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class = "row">
<div class="col-md-4 col-sm-4 ">
<div style="background:blue;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lac</p>
</div>
<div style="background:green;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lac</p>
</div>
</div>
<div class="col-md-8 col-sm-8" style="background:red;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lacus. Aenean eu elit id tortor porttitor vehicula. Etiam ac risus pretium, lacinia nibh sed, posuere orci. Nam consequat orci sed pharetra condimentum. Morbi ultricies viverra lorem, ac pellentesque ante aliquet sed. Duis iaculis interdum quam vitae tincidunt. Suspendisse volutpat euismod varius.
Aliquam erat volutpat. Mauris imperdiet condimentum accumsan. Aliquam mollis turpis diam, et congue est imperdiet sed. Morbi sed tellus ut justo eleifend condimentum. Quisque dignissim cursus lectus. In a condimentum justo. Phasellus auctor quam at leo mollis faucibus. Integer rhoncus luctus accumsan.
In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut luctus luctus tortor, a dignissim ante luctus at. Nunc ac turpis ullamcorper, semper ipsum nec, tincidunt est. Donec nec fringilla dolor. Quisque sed neque semper, convallis massa a, sollicitudin dui. Donec id ipsum justo. Quisque a porttitor eros, eu ullamcorper purus. Maecenas euismod massa mattis dignissim tempus. Mauris non turpis magna. Nulla accumsan suscipit ipsum quis varius. Phasellus nec sapien fermentum, aliquet arcu sed, lobortis nunc.
Integer et nisl ut nisi venenatis rutrum in nec elit. Sed a sem vitae metus ultricies commodo. Praesent ultricies, diam id tempus consequat, justo lacus sodales metus, ac ornare dolor odio ut nisi. Proin in mi ornare, hendrerit nulla sed, porta metus. Curabitur ac quam posuere, tempus nunc a, varius libero. Quisque nec enim pharetra, pulvinar ligula et, vestibulum elit. Integer enim dui, laoreet sit amet aliquam vitae, viverra ut enim. Morbi in dignissim felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus lobortis nisl sit amet risus venenatis pellentesque. Donec ultricies aliquam purus, vitae venenatis mauris sagittis congue. Sed vehicula iaculis lacinia. Pellentesque maximus elit quis arcu imperdiet ornare. Donec nec nisl id velit laoreet tempus ac id nisl.
Phasellus pulvinar erat ac quam pellentesque pellentesque. Vestibulum nec porta dui. Curabitur nec ligula at nunc blandit tristique vitae ac elit. Phasellus finibus vulputate arcu eget malesuada. Nunc nec massa ullamcorper tellus ullamcorper vulputate. Vestibulum et vestibulum ante. Quisque vulputate sed lacus quis ornare. </p>
</div>
</div>
</div>
</body>
</html>
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>
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.