Hello Stackoverflow users,
I am creating a website and the start was going pretty well until I came to the point I will explain in a bit, I have already been trying and looking over my code for hours and Google'd all kinds of things but couldn't find anything similar to my issue. Here's an image of how the webpages currently look, the first obviously medium/large, the middle size small and the last one is extra small.
So, as you can tell from the images something is going wrong, I expected a div not being closed right or something but I can't find anything like that in my code! Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/duo-uniek/" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Home: Welkom - Duo-Uniek.nl</title>
<script src="javascript/jQuery.min.js"></script>
<script src="javascript/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="Javascript/banner.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link id="stylesheet" href="css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="fluid-container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding-horizontal border-bottom header">
<div class="list-group list-inline list-unstyled text-center">
<span class="list-group-item col-xs-3 col-sm-2 col-md-1 col-sm-push-2 col-md-push-4 active">Home</span>
<a class="list-group-item col-xs-3 col-sm-2 col-md-1 col-sm-push-2 col-md-push-4" href="page/media.html">Media</a>
<a class="list-group-item col-xs-3 col-sm-2 col-md-1 col-sm-push-2 col-md-push-4" href="page/info.html">Info</a>
<a class="list-group-item col-xs-3 col-sm-2 col-md-1 col-sm-push-2 col-md-push-4" href="page/contact.html">Contact</a>
</div>
</div>
<div class="row-fluid col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding">
<div class="banner hidden-xs hidden-sm col-md-12 border-bottom no-padding styling" style="height: 500px;">
<div class="innerBanner col-md-12">
</div>
</div>
<div class="banner visible-sm-block col-sm-12 border-bottom no-padding styling" style="height: 350px;">
<div class="innerBanner col-sm-12">
</div>
</div>
<div class="banner visible-xs-block col-xs-12 border-bottom no-padding styling" style="height: 200px;">
<div class="innerBanner col-xs-12">
</div>
</div>
</div>
<div class="col-sx-12 col-sm-12 col-md-12 col-lg-12 text-center padding-horizontal border-bottom styling">
<div class="col-sx-12 col-sm-4 col-md-2 col-md-push-3 padding-horizontal" style="background-color: black;">
<div class="col-sx-12 col-sm-12 col-md-12" style="background-color: white;">
<p>Test</p>
</div>
</div>
<div class="col-sx-12 col-sm-4 col-md-2 col-md-push-3 padding-horizontal" style="background-color: black;">
<div class="col-sx-12 col-sm-12 col-md-12" style="background-color: white;">
<p>Test</p>
</div>
</div>
<div class="col-sx-12 col-sm-4 col-md-2 col-md-push-3 padding-horizontal" style="background-color: black;">
<div class="col-sx-12 col-sm-12 col-md-12" style="background-color: white;">
<p>Test</p>
</div>
</div>
</div>
<div style="background-color: orange;">
<p>Home</p>
</div>
</div>
</body>
</html>
This code is from 'show page source' as my code is mostly being generated by PHP but unless I'm really stupid I checked everything and nothing was wrong. I really don't know what to do, everything I tried didn't help and I really have to get this fixed... I hope someone here can!
Best regards,
Jesse
You have a typo col-sx-12 it should be col-xs-12
Related
I have a problem:
I want to create a layout but a horizontal scrollbar appears as soon as i remove the padding at the following line of codes (p-0). Is there a chance that i can remove the padding and no scrollbar to appear? I dont know what to do, maybe you guys can help me. The problem is I want to have the col the full length without padding, but when I remove the padding the horizontal scrollbar appears.
...
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="row m-auto">
<div class="col-md-12 p-0">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}>
<input class="form-control mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style={{marginTop: "7.5px", marginBottom: "7.5px"}}>
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 ">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
Nachrichten
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
Eingabe
<div class="row">
Form
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Probably you've implemented your grid incorrectly. Avoid to add additional styles to bootstrap classes and use .row when needed. When you need custom styles use wrappers inside .container, .row and .col so you can manage them without altering bootstrap behavior.
In your case, I would remove the class row from the parent div of p-0, then remove the class col-md-12 from p-0, setting the p-0 width to 100% and removing the properties padding:0px. Anyway, I think you've additional issues in your nested elements so good lectures for you are:
How the Bootstrap 4 Grid Works
How Box model works
Just like your earlier question (with an ill-advised accepted answer to use m-auto), the actual problem is the grid isn't properly structured.
The grid must be container > row > col-*s > row > col-*s, etc...
Simple answer:
"How to remove horizontal scrollbar when using no padding"
Follow the correct grid structure...
<div class="container-fluid">
<div class="row">
<div class="col-12 bg-info p-0">
no padding
</div>
</div>
</div>
and, follow the correct grid structure when nesting columns...
<div class="container-fluid">
<div class="row">
<div class="col-12 p-0">
<div class="row">
<div class="col-12 bg-info p-0">
no padding
</div>
</div>
</div>
</div>
</div>
Then there will not be a horizontal scrollbar!
Demo
Complete answer (TL;DR)
Read the Bootstrap docs...
"Containers are the most basic layout element in Bootstrap and are
required when using our default grid system. "
"Rows are wrappers for columns.... In
a grid layout, content must be placed within columns and only columns
may be immediate children of rows."
1 - The grid requires a container -- choose container-fluid for full width
2 - Columns and only columns are the immediate children of .row, not other columns. Read about nesting.
3 - Rows are only used to wrap columns. Content should not be placed directly in the .row.
Comparing your code to the grid structure "rules"...
One problem is here....
<div class="col-md-8 ">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
</div>
</div>
</div>
</div>
</div>
</div>
You have a col-12 nested immediately in another col-12 which won't work. The correct structure is...
<div class="col-md-8">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
content here
</div>
</div>
</div>
</div>
</div>
Secondly, the columns and rows are being overused. There's no reason to have 12-unit columns inside more rows with 12-unit columns. There's also no reason to use the same size at every breakpoint...
col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12
is the same as:
col-12
Finally, there should only be one outer container fluid, not containers nested inside containers. There is a special no-gutters class if you want to remove the spacing around or between columns, which is the correct method of removing the gutters (padding) on an entire row.
The entire markup can be greatly simplified by just following the correct grid stucture. You'll save a lot of time by simply understanding how the grid works...
container > row > (columns with content) > row > (columns with content), etc...
In the div class=row with col-md-8, delete the margin-right and left with -15px;
I got this task using bootstrap my task
that's my code that I tried:
https://snipboard.io/aA8pfb.jpg
<body> <div class="container">
<div class="row" style="height: 300px">
<div class="col-lg-6 col-sm-8 h2 bg-primary">1</div>
<div class="mid w-50">
<div class="row ml-0 pb-2" style="height: 150px">
<div class="col-lg-4 col-sm-6 h2 bg-success">2</div>
<div class="col-lg-4 col-sm-6 h2 bg-danger">3</div>
</div>
<div class="row ml-0" style="height: 150px">
<div class="col-lg-4 col-sm-6 h2 bg-warning">4</div>
<div class="col-lg-4 col-sm-6 h2 bg-secondary">5</div>
</div>
</div>
</div>
</div>
and it didn't work that's the result I got using this code:
https://snipboard.io/YVRg84.jpg
What did I do wrong? How can I make it responsive like this picture? And why do my code got space that I can't get rid of between the two rows?
Thank you!
try this -
<div class="container">
<div class="row" style="height: 300px">
<div class="col-lg-6 col-12 h2 bg-primary">1</div>
<div class="mid w-50 col-12 col-lg-6 ">
<div class="row ml-0 pb-2" style="height: 150px">
<div class="col-lg-4 col-sm-6 h2 bg-success">2</div>
<div class="col-lg-4 col-sm-6 h2 bg-danger">3</div>
</div>
<div class="row ml-0" style="height: 150px">
<div class="col-lg-4 col-sm-6 h2 bg-warning">4</div>
<div class="col-lg-4 col-sm-6 h2 bg-secondary">5</div>
</div>
</div>
</div>
also to remove spacing you probably are using height incorrectly please inspect your code in the browser and experiment with the heights of the div , it will fix your spacing problem .
I'm currently new to bootstrap and still wondering on the Grid system, currently facing a problem where the height for both column is different, is there anyway to make it same ?
Refer to Pic 1
Also there is another problem when i reduce the size as im making it responsive, but when i reduce it to mobile size, the 2nd column did go down but the borders of the 2nd column does not match the first one.
Refer to Pic 2
Below is the Html code,
<h1 style="color:blue;">The History of Ice Cream</h1>
<div class="row bg-info" style="height: 200px;">
<div class="row col-md-6 bg-info" >
<img class="px-3" src="https://images.unsplash.com/photo-1601033402923-342909b0c151?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" width="100%" height="500px" alt="Nature of Mountain">
</div>
<div class="ml-5 col-md-6 bg-info">This is the beauty of nature</div>
Thanks
The height of the two columns was not the same because you defined the height of the row.
If you make it to show divs in two-column in mobile view then you should use col-sm and also col-xs
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<h1 style="color:blue;">The History of Ice Cream</h1>
<div class="row bg-info">
<div class="row col-md-6 col-sm-6 bg-info" >
<img class="px-3" src="https://images.unsplash.com/photo-1601033402923-342909b0c151?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" width="100%" height="500px" alt="Nature of Mountain">
</div>
<div class="ml-5 col-md-6 col-sm-6 bg-info">This is the beauty of nature</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row bg-info py-3">
<div class="col-12 col-md-6">
<img src="https://images.unsplash.com/photo-1601033402923-342909b0c151?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" width="100%" height="500px" style="object-fit: cover;" alt="Nature of Mountain">
</div>
<div class="col-12 col-md-6 pt-2 pt-md-0">This is the beauty of nature</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row bg-info py-3">
<div class="col-12 col-md-6">
<img src="https://images.unsplash.com/photo-1601033402923-342909b0c151?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" width="100%" height="500px" style="object-fit: cover;" alt="Nature of Mountain">
</div>
<div class="col-12 col-md-6 pt-2 pt-md-0">This is the beauty of nature</div>
</div>
</div>
When my page re-sizes from SM to XS it is adding a white line (almost like a margin space) and I don't know why. If I add a style="margin-top: -1px" it goes away but then messes up the rest of the grid structure. Any ideas as to what is causing this? Below is the code, if you run the snippet and shrink the window you'll see the line appear.
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<title>JPT Email Template Title</title>
</head>
<body>
<div class="container-fluid">
<div class="row" style="margin-top: 20px">
<div class ="col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
<div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 bg-primary text-center">
<img class="img-responsive center-block" src="http://pages.jerusalemprayerteam.org/rs/591-HWU-361/images/foz-logo.png" style="margin-top: 5px; margin-bottom: 5px">
</div>
<div class="col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
</div>
<div class="row">
<div class="col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
<div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 text-center bg-primary">
<a href="#">
<img class="img-responsive center-block" src="http://i.imgur.com/i131rzd.jpg" style="margin-bottom: 5px">
</a>
</div>
<div class"col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
</div>
This happens cause you do not use bootstrap properly, you have chosen an option of adding extra divs for offset and it's wrong. Bootstrap has offset for this cases:
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
Your content
</div>
Do not use those extra divs for offset, one of those is giving you this 1px
Columns have a min-height of 1px. So the below creates the white line. Try using .hidden-xs instead.
<div class="col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
in addition to previous answers, Bootstrap has not class "col-xs-0".
I am working on a grid layout for a website using bootstrap framework. I want a grid that displays 2 stacking divs that span the width of col-lg-4 next to one large div that spans the width of col-lg-8 and is equal in height to the two stacking div's.
<div class="mockups_wadels">
<div class="div_center">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 grid_padding">
<div class="wadels_dark">
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 grid_padding">
<div class="wadels_embroidery">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 grid_padding">
<div class="wadels_white">
</div>
</div>
</div><!--end of row-->
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="wadels_browser">
</div>
</div>
</div>
</div><!--container end-->
</div><!--end div center-->
</div><!--end of mockup-->
Here is a jsfiddle to help illustrate. My issue is that I do not know how to force the two col-lg-4 divs to stack on top of each other. Instead of stacking the second div simply starts a new row. http://jsfiddle.net/Dinkledine/0w2fppx6/
desire result
thanks for your help
Here is my solution with panel and col layout.If you need padding remove nopadding from class
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
</style>
</head>
<body>
<div class="container-fluid row-offcanvas nopadding">
<div class="col-sm-5 nopadding">
<!--Content 1-->
<div class="col-sm-12 col-md-12 nopadding">
<div class="panel panel-default nopadding">
<div class="panel-heading" style="background-color: lightblue; color: #000; font-weight:bold">content 1</div>
<div class="panel-body" style="height:270px;overflow:auto;"></div>
<div class="panel-footer" style="background-color: lightblue;"></div>
</div>
</div><!--Content 1 Ends-->
<!--Content 2-->
<div class="col-sm-12 col-md-12 nopadding" >
<div class="panel panel-default nopadding">
<div class="panel-heading" style="background-color: lightsteelblue; font-weight:bold">content 2</div>
<div class="panel-body" style="height:270px;overflow:auto;"></div>
<div class="panel-footer" style="background-color: lightsteelblue;"></div>
</div>
</div><!--Content 2 Ends-->
</div>
<div class="col-sm-7 nopadding">
<!--Content 3 -->
<div class="col-sm-12 col-md-12 nopadding">
<div class="panel panel-default nopadding">
<div class="panel-heading" style="background-color: lightsteelblue; font-weight:bold">Content 3</div>
<div class="panel-body" style="height:602px;overflow:auto;"></div>
<div class="panel-footer" style="background-color: lightsteelblue;"></div>
</div>
</div><!--Content 3 Ends -->
</div>
</div> <!--row-->
</body>
</html>
I dont think this is best solution but check it out http://jsfiddle.net/b4voqjud/2/
<div class="mockups_wadels">
<div class="div_center">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<div class="wadels_dark"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="wadels_dark"></div>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="wadels_dark"></div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="wadels_browser">
</div>
</div>
</div>
</div><!--container end-->
</div><!--end div center-->
</div><!--end of mockup-->
And if you want those two colums to always be same height i don't think you can do that with bootstrap and you have to use javascript, or flexbox, or just adjust padding on different device sizes
You could do something like this :
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-12 col-md-12 col-sm-12"></div>
<div class="col-lg-12 col-md-12 col-sm-12"></div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8">
<div class="col-lg-12 col-md-12 col-sm-12"></div>
</div>
</div>
Remember that rows are 12 column based so you think about the bigger layout.
You initially split your screen the way you want ( 4 + 8 ) , inside of those is where the magic happens !
Since a 12 col wide div is occupying the whole space ( it could be a container or any sized div ), the next div will stack below it.