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;
Related
I have two different layouts for desktop and mobile view. Here is how they look like
I have written this code so far, but it is not exactly how I need it to be. I don't know how to switch block C and D in mobile view
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-cols-lg-2 row-cols-1">
<div class="row col col-lg-10">
<div class="col-3 bg-secondary">A</div>
<div class="col-9 ">
<div class="row bg-success p-1"> B</div>
<div class="row bg-primary order-lg-2 p-1">D</div>
</div>
</div>
<div class="col col-lg-2">
<div class="col bg-warning p-1">C</div>
</div>
</div>
I need to use Bootstrap grids. Any idea on how to start?
You can use order-xx-N to reorder element at screen , bootstrap has mediaquerie built-in. https://getbootstrap.com/docs/5.0/layout/breakpoints/
Possible example
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-3 bg-secondary mb-auto">A
<p class="d-lg-none bg-light">Mobile layout</p>
<p class="d-none d-lg-block bg-info">Desktop layout</p>
</div>
<div class="row col-9">
<div class="col col-lg-9 bg-success p-1">B</div>
<div class="col order-1 p-1 bg-primary ">C</div>
<div class="col-12 bg-warning p-1 order-lg-2">D</div>
</div>
</div>
I have below text link list appearing in a col-md-3. I want to appear them as right-justified. See attached image below.
Current Coding is like below with "text-right" in the col-md-3, I tried text-justify too didn't seem to be working,
Any idea on how to make this the way i wanted as the image?Should i use a '<ul>' or '<li>' instead?
<div class="col-md-3 mt-2 text-right">
<div class="row mt-3">
<div class="col-md-12">
<b>View Profile</b>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<b>Send Message</b>
</div>
</div>
....
<div class="row mt-3">
<div class="col-md-12">
<b> View Proposal </b>
</div>
</div>
</div>
Don't use text-right on the container. Instead, turn the col-md-12 divs into col-md-6 and use an offset i.e. offset-6. Now the element takes up 6 columns and is offset 6 columns, which puts it to the right of it's parent element.
More information about offsets can be found about halfway down the Bootstrap Grid documentation.
Here's the code demonstrating how to do this:
<div class="col-md-3 mt-2 container">
<div class="row mt-3">
<div class="col-md-6 offset-6 inner">
<b>View Profile</b>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6 offset-6 inner">
<b>Send Message</b>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6 offset-6 inner">
<b> View Proposal </b>
</div>
</div>
</div>
Here it is on Codepen
I Just updated my Codepen: https://codepen.io/shnigi/pen/jOWmqLe
It really depends how you want to place your grids and how much content they are going to have.
<div class="col-md-12 row">
<div class="col-md-3 offset-9 text-right">
<b>View Profile</b>
</div>
</div>
<div class="col-md-12 row">
<div class="col-md-3 offset-9 text-right">
<b>Send Message</b>
</div>
</div>
<div class="col-md-12 row">
<div class="col-md-3 offset-9 text-right">
<b>View Proposal</b>
</div>
</div>
Here I have created three rows which all span 12 columns. Then inside the rows I have element which spans 3 columns and has offset of 9 totalling 12 columns. Then I have placed text-right to make the text float on right inside the 3 column element.
I'm using bootstrap 4 in my Angular 8 application. In my main page I have two components of size md-5 and md-6 and I want to separate them using offset-md-1. But the offset size is big and I don't want to have that much space between my components. How do I reduce the size of the offset? Will offset-md-0.5 work? Can you suggest any better way other than using bootstrap offset?
This is my code:
<div class="container-fluid padding">
<div class="row">
<div class="container1 col-xs-12 col-sm-12 col-md-5">
<app-projectstatus></app-projectstatus>
</div>
<div class="container2 col-xs-12 col-sm-12 col-md-6 offset-md-1">
<app-upcomingreleases></app-upcomingreleases>
</div>
</div>
</div>
Use ml-auto instead of offset-md-1 it works perfect for you.
try this code:
<div class="container-fluid padding">
<div class="row">
<div class="container1 col-xs-12 col-sm-12 col-md-5">
<app-projectstatus></app-projectstatus>
</div>
<div class="container2 col-xs-12 col-sm-12 col-md-6 ml-auto">
<app-upcomingreleases></app-upcomingreleases>
</div>
</div>
</div>
I hope this will works perfect for you.
Note: I Can't understand that how offset-md-1 size is big? the default css property for this class is fixed margin-left: 8.333333%; in bootstrap. you can use this class also but condition is that you do not have to make any kind of changes in col-**-* width.
Thank you...
There is no *-xs-* classes in bootstrap-4. Use col-12 instead.
`col-xs-*` not working in Bootstrap 4
Ther are three ways to add space between columns.
margin-x on .col-*
padding-x on .col-*
justify-content-between on .row
Margin is quite tricky since it affects the sum of width of total columns. The width + margin-x of the two columns should not exceed the width of .row. Otherwise, the columns breaks.
The total width of the two columns on md-screen is 91.667%. So you have 8.333% free sapce. You can control where to use this 8.333%.
offset-md-1,mr-auto, ml-auto and justify-content-between yeilds the same result: 8.333% space betwen the two columns.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid mt-5">
<div class="row justify-content-between">
<div class="container1 col-12 col-md-6 bg-primary">
</div>
<div class="container2 col-12 col-md-5 offset-md-1 bg-danger ">
offset-md-1
</div>
</div>
</div>
<div class="container-fluid mt-5">
<div class="row justify-content-between">
<div class="container1 col-12 col-md-6 mr-auto bg-primary">
mr-auto
</div>
<div class="container2 col-12 col-md-5 bg-danger ">
</div>
</div>
</div>
<div class="container-fluid mt-5">
<div class="row justify-content-between">
<div class="container1 col-12 col-md-6 bg-primary">
</div>
<div class="container2 col-12 col-md-5 bg-danger ">
ml-auto
</div>
</div>
</div>
<div class="container-fluid mt-5">
<div class="row justify-content-between">
<div class="container1 col-12 col-md-6 bg-primary">
justify-content-between
</div>
<div class="container2 col-12 col-md-5 bg-danger ">
justify-content-between
</div>
</div>
</div>
If you want to have 8.333% / 2 space betwen them. You can not do it in bootstrap-4. So you need to use css.
#media (min-width: 768px) {
.ml-md-0_5 {
margin-left: calc((100% / 12) / 2)
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid padding">
<div class="row">
<div class="container1 col-12 col-md-6 bg-primary">
</div>
<div class="container2 col-12 col-md-5 bg-danger ml-md-0_5">
ml-md-0_5
</div>
</div>
</div>
Now, the total width + margin of both of the columns is 95.833%. By default, the elements are left aligned. Therefore, 4.166% free sapce on the right side of the last column. You can use it on x-side of any of the columns if you wish so.
As said before, you can use padding-x also which i prefer because it does not affect the total width of the columns.
Column not splitting properly. I need the bottom picture to go under the same picture above.
Changed col and image size
<div class=" container mx-auto mt-5 p-0">
<div class="row m-0 ">
<div class="col-4 p-0"><a href="ourstory.html"><img src="Mainimages/Ourhistory.jpg" style="width:100%"
alt="Our History"></a>
</div>
<div class="col-8 p-0">
<img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions">
</div>
<div class="w-100"></div>
<div class="col-8 p-0">
<img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions">
</div>
</div>
</div>
In bootstrap col-6 is synonymous to 50% and col-12 is 100%
So technically to achieve your aim you do:
|--------------------div:col-12------------------------------|
|------div:col-6---------| |----------div:col-6-------------|
|---------------------------| |----------div:row--------------|
|---------img-------------| |-div:col-12-|-|-div:col-12-|
|---------------------------| |-----img----|-|----img--------|
Try the snippet below:
.s50{
height:50%;
}
.s50 img {
width:100%;
height:100%
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mx-auto mt-5 p-0">
<div class="row m-0 ">
<div class="col-6 p-0">
<a href="ourstory.html"><img src="https://pinimg.icu/wall/0x0/los-mejores-fondos-de-pantalla-para-hombres-tumblr-wallpaper-E7f21aa5c622192c35a8e92d039623fcc.jpg?t=5cf09dc88fee5" style="width:100%"
alt="Our History"></a>
</div>
<div class="col-6 p-0">
<div class="col-12 s50 p-0">
<img src="https://hackernoon.com/hn-images/1*lduEjOI-EQltoRbmKSICeA.jpeg" alt="Promotions">
</div>
<div class="col-12 s50 p-0">
<img src="https://d3n8a8pro7vhmx.cloudfront.net/3dna/pages/46410/meta_images/original/00-featured-bs4-bootstrap.jpg?1561992643" style="" alt="Promotions">
</div>
</div>
</div>
</div>
I'm not sure If you're looking for equal half's but you have to split the right hand side column into two rows again using divs to achieve this.
<div class="row">
<div class="col-md-6">
--First left image here--
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
-- second top right image here --
</div>
</div>
<div class="row">
<div class="col-md-12">
-- third bottom right image here --
</div>
</div>
</div>
</div>
We don't have your exact images sizes, but I've tried to put dummy images just show you example, If you want your page to display in the same alignment, you have to divide the div equally which sums up. You can set and divide the divs equally and make it responsive by inserting classes col-sm and col-md.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="feature-wrapper bg-primary pt-5 pb-5 mt-5 mt-lg-0">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 text-center mb-3 mb-md-0">
<a href="ourstory.html"><img src="https://dummyimage.com/100X40/000/fff" style="width:100%"
alt="Our History"></a> </div>
<div class="col-sm-12 col-md-4 text-center text-md-left text-uppercase mb-3 mb-md-0">
<img src="https://dummyimage.com/100X50/000/fff" style="width:100%" alt="Promotions">
</div>
<div class="col-sm-12 col-md-4 text-center mb-3 mb-md-0">
<img src="https://dummyimage.com/200X60/000/fff" style="width:100%" alt="Promotions">
</div>
</div>
</div>
</div>
What I try to achieve is to have a 2 divs that take over 6 columns bith with some space between them of 1px.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-dark text-light text-center mr-1"> Hello </div>
<div class="col-6 bg-danger text-light text-center"> Hello </div>
</div>
</div>
But for some reason when Ι try to achieveit, the other item goes underneath (wraps) instead being side to side. Do you know how I can make having 6-column with some space between items and still remain side to side?
The gutter (spacing between columns) is created with padding, not margins. When you adjust the margins it throws off the grid. You can use inner DIV's...
<div class="container-fluid px-0">
<div class="row no-gutters">
<div class="col-6 text-light text-center">
<div class="bg-dark mr-1">Hello</div>
</div>
<div class="col-6 text-light text-center">
<div class="bg-danger">Hello</div>
</div>
</div>
</div>
or, force the row no to wrap with flex-nowrap...
<div class="container-fluid">
<div class="row flex-nowrap">
<div class="col-6 bg-dark text-light text-center mr-1"> Hello </div>
<div class="col-6 bg-danger text-light text-center"> Hello </div>
</div>
</div>
or, simply use the padding utils to adjust the column spacing.
https://codeply.com/go/p4NpmmRxmb
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">50%</div>
<div class="col-sm-6" style="background-color:orange;">50%</div>
</div>
</div>