I created a custom-class CSS class which I applied in the col div. That column contains dynamic images, which is why I used a vertical scrollbar.
On a desktop, it displays correctly. However, in mobile view it is broken or exceeds a row or section.
How can I apply vertical scrollbar that will not affect col in mobile view?
In short my overflow floating over the screen in mobile view.
.custom-class {
position: absolute;
overflow-y: auto;
height: 350px;
-webkit-overflow-scrolling: touch;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="row">
<div class="col-xl-12">
<section class="py-5 header">
<div class="container py-4">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9">
<div class="tab-content">
<div class="col-md-12">
<div class="row">
<div class="col-sm-7"></div>
<div class="col-sm-5 p-0">
<div class="col-md-12 custom-class"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
Answer was so simple. removing absolute position worked for me. Absolute position disturb in mobile view.
Related
I'd like to be able to get a layout using Bootstrap that looks as follows:
My code is:
<div class="container">
<div class="row">
<div class="col-12">foo</div>
</div>
<div class="row">
<div class="col-6">bar</div>
<div class="col-6">baz</div>
</div>
Unfortunately, I'm getting something that looks like this (notice that "foo" in row 1 is aligned with "bar" in row 2):
How do I achieve the desired result?
Thanks!
It seems you want to only center the text on the .col-12 from the first .row which you can easily achieve by simply adding the text-center class to that .col-12 element.
Note: the class text-center is a Bootstrap class.
/** just to visually show the changes */
.col-6,
.col-12 {
border: 1px solid red
}
.col-12 {
margin-bottom: 20px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 text-center">foo</div>
</div>
<div class="row">
<div class="col-6">bar</div>
<div class="col-6">baz</div>
</div>
</div>
In case you have an img not a text on the .col-12 element, you might simply add the d-inline-block and your image should be centered thanks to text-ce,ter class that we already applied.
/** just to visually show the changes */
.col-6,
.col-12 {
border: 1px solid red;
}
.col-12 {
margin-bottom: 20px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<img src="https://via.placeholder.com/150" width="150" class="img-fluid d-inline-block">
</div>
</div>
<div class="row">
<div class="col-6">bar</div>
<div class="col-6">baz</div>
</div>
</div>
Note: the use of d-inline-block is not really required but i used it to ensure cross-browser behavior because each browser might treat the images in a different way. Most of the browsers already set the display property of an image to inline-block.
The class img-fluid is a Bootstrap class that allows to maintain a responsive image. Learn more about Bootstrap Responsive Images on Bootstrap Docs (BS v4.0).
Learn more about the display property on MDN.
According to your code to make it center, you can align the text center and that's all.
<div class="container">
<div class="row text-center">
<div class="col-12">foo</div>
</div>
<div class="row text-center">
<div class="col-6">bar</div>
<div class="col-6">baz</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 text-center">foo</div>
</div>
<div class="row">
<div class="col-6">bar</div>
<div class="col-6">baz</div>
</div>
I have a problem, all I want to do is at a certain width (using the #media) I want to change my left div to the right side under the one that is already there. I tried everything, including changing the display, positioning using left margin but due to the parent container it doesn't work. The only thing that I thought about is to make the same left div on the right side and to make the display to none, but I am pretty sure that's not the way to deal with it. I use Bootstrap 4.
This is the HTML:
.main{
background-color: #aaa;
box-shadow: 3px 3px 20px #000000;
border-radius: 20px;
margin-left: 20px;
margin-right: 20px
}
.left{
background-color: #aaa;
max-width: 200px;
height: 1%;
border-radius: 20px;
}
.right{
background-color: #aaa;
max-width: 200px;
height: 1%;
border-radius: 20px;
}
.right-content{
width: 100%;
text-align: center;
float: center;
margin-top: 10px;
}
.parent-container {
display: flex;
}
<div class="parent-container">
<div class="container left">
<div class="row">
Left content
</div>
</div>
<div class="container card main py-3">
<div class="container card">
<div class="card-body">
<div class="row">
<div class="col-lg-12 text-center">
<h2>TITLE2</h2>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<a href="#" class="link1">
<img src="2.jpg">
<h3>Title3</h3>
</a>
</div>
</div>
</div>
</div>
<div class="container right">
<div class="row">
<div class="right-content">
Right content here
</div>
</div>
</div>
</div>
To achieve the effect you want, you need to use Bootstrap 4 order-* classes. order-last in the code snippet below re-orders the column to come last by default but the order-md-first makes the column appear first on screens that are medium (md) or larger.
There are other ways of using the order classes to achieve the same result. This is just one of the possible options.
But there are many other and fundamental mistakes in your code. Here are a few pointers:
Do NOT nest containers inside other containers. Nest row-column pairs inside columns instead
Do NOT put any content directly into a .row. Bootstrap rows aren't designed for that. Put one or more columns (.col-*) into a row and put all your content inside that column(s).
Bootstrap 4 is flexbox-based by default and has classes to do almost everything you'll ever need in terms of positioning and spacing. Use those native Bootstrap classes instead of unnecessary custom css hacks.
Here's a working code snippet (click the "run code snippet" button below and expand to full page):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-3 col-xl-2 bg-light order-last order-md-first py-3">
Left div content <br>
Left div content <br>
Left div content <br>
</div>
<div class="col-12 col-md-9 col-xl-10 bg-primary py-3">
<div class="card py-3">
<div class="card-body">
<div class="row">
<div class="col text-center">
<h2>Right div TITLE</h2>
</div>
</div>
<div class="row">
<div class="col text-center">
<a href="#">
<img class="img-fluid" src="https://placeimg.com/888/88/tech">
<h3>Right div subtitle</h3>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col text-center">
Right div content here
</div>
</div>
</div>
</div>
</div>
</div>
Notice: That code doesn't contain any of your custom css. If you want to add some custom css to that, start adding it line by line to see where your custom css breaks Bootstrap.
Also, the background classes bg-light and bg-primary in the code snippet above are just for making things easier to see.
I have something like this
<div class="container">
<div class="row">
<div class="col-md-5 midOne">
//...some content here
</div>
</div>
</div>
I am new to bootstrap, i want this col with class midOne, to be centered inside Is there i way to make this midOne div centered, without making two new divs on each side of midOne to be centered?
When i make this
<div class="col-md-4 emptyone">
//...empty Div
</div>
<div class="col-md-4 midOne">
//...some content here
</div>
<div class="col-md-4 emptytwo">
//...empty div two
</div>
It is working, the content in midOne is centered in container div. with two empty divs on each side.
you have to use .col-md-offset-4 with .col-md-4
<div class="row">
<div class="col-md-4 col-md-offset-4">
</div>
</div>
documentation here: http://getbootstrap.com/css/#grid-offsetting
Try this.
.midOne {
width:41.6667%;
background-color:red;
height:100px;
margin:auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="midOne">
<div class="col-md-5 col-xs-5">
</div>
</div>
My goal is to achieve the following image on my page:
I managed to achieve this with the HTML and CSS you can find below, but it doesn't seem very viable, because the sidebar is losing it's physical height because of the position: absolute.
I'm wondering if it's possible to make one row with two columns on the left and a sidebar on the right, without having to use positioning.
I tried position: relative with a negative top, but since the top col-md-9 has a changing height (depending on what is entered), I can't give it a negative top. It'll simply be too static and impossible to maintain.
Changing the order in the HTML doesn't change anything, since the physical height of the sidebar will move the 2nd content down.
.sidebar {
position: absolute;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-9">
Changing content
</div>
<div class="col-md-3 sidebar">
Sidebar
</div>
<div class="col-md-9">
More content
</div>
</div>
I use xs columns for this example, but you can change to md in your page.
Firstly create a 9-column and a 3-column div. Then put two divs inside the 9-column one.
.content, .sidebar {
margin: 10px;
padding: 20px;
}
.content {
background-color: navy;
color: white;
}
.sidebar {
background-color: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row wrapper">
<div class="col-xs-9">
<div class="row">
<div class="col-xs-12">
<div class="content">Content</div>
</div>
<div class="col-xs-12">
<div class="content">Content</div>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="sidebar">Sidebar</div>
</div>
</div>
You can nest col-x-x inside other col-x-x
You just have to create 2 parents: content and sidebar, then add multiple contents into the content parent :
<div class="row">
<div class="col-md-9">
<div class="col-md-12">
Content
</div>
<div class="col-md-12">
More content
</div>
</div>
<div class="col-md-3 sidebar">
Sidebar
</div>
</div>
You cannot have more that 12 columns in a row unless it is not defined in your custom grid.
What you can try is this:
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-sm-12">
Changing content
</div>
<div class="col-sm-12">
More content
</div>
</div>
</div>
<div class="col-md-3" style="position: relative;">
<div class="row">
<div class="col-sm-12 sidebar">
Sidebar
</div>
</div>
</div>
</div
As a solution, you can make sidebar to stay at the right side of screen if you'll make left section overflow: auto.
.sidebar {
height: 100vh;
background: lightgreen;
}
.left-section {
height: 100vh;
background: lightblue;
overflow: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-9 left-section">
<div class="row">
<div class="col-sm-12">
Changing content
</div>
<div class="col-sm-12">
More content
</div>
</div>
</div>
<div class="col-sm-3 sidebar">
Sidebar
</div>
</div>
</div>
I have three divs like this:
<div class="container-fluid">
<div class="header">
Welcome
</div>
<div class="navbar">
Menu
</div>
<div class="content">
Website content
</div>
</div>
Now, the first div class="container-fluid" is stretched on all browser window. The next class="header has padding/margin of some pixels from his parent element. Now I´d like this div to stretch all browser window out. But I also don´t want next class="menu" or class="content" to be stretched out.
How may I solve this?
Use .container for navbar and content & .row for .header like this: Demo
<div class="row">
<div class="header col-xs-12 col-sm-12 ">Welcome</div>
</div>
<div class="row">
<div class="container">
<div class="navbar">Menu</div>
<div class="content">Website content</div>
</div>
</div>
This sounds like a two-column layout with a full-width header. You tagged Twitter Bootstrap so I'll explain how to use those styles to do what you want.
<div class="row container-fluid">
<div class="header">
Welcome
</div>
<div class="span3 navbar">
Menu
</div>
<div class="span9 content">
Website content
</div>
</div>
The row class is on the element that wraps the columns. span# is the class that gives each column its size. So for a 12-unit width, you could assign span3 to the navbar and span9 to the content area.
Without Bootstrap, this is still relatively simple. You can do this in CSS.
.navbar {
display: inline-block;
width: 25%;
}
.content {
display: inline-block;
width: 75%;
}
<div class="container-fluid">
<div class="header">
Welcome
</div>
</div>
<div class="container">
<div class="navbar">
Menu
</div>
<div class="content">
Website content
</div>
</div>
Use container class outside menu and content. Hope this will help you.
jsFiddle Demo