Hello friends I have one question about bootstrap, this is my html I have the following structure
<div class="container-fluid">
<div class="col-md-4">
</div>
<div class="col-md-8">
</div>
How could I get that only "col-md-8" can scroll down? I want that col-md-4 can be shown always and doesn´t scroll down like a fixed menu but I haven´t a fixed menu in col-md-4
Thanks
A simplest way to get it is follow:
.frm {
overflow: auto;
max-height: 100vh;
}
.content {
height: 200vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
col-sm-4
</div>
<div class="col-sm-8 frm">
<div class="content">some content</div>
</div>
</div>
</div>
You may not fix height of .content. It will work anyway
Related
I'm having some issues trying to make an overflowed container I've created in Divi draggable.
After researching I found a few templates that related to what I was looking for. However, wouldn't work due to the way the container has to be created within the theme.
I've added a link to the website development below so you are able to see the way the container has been set-up. Any advise on how I can achieve my desired outcome would be appreciated.
Example of what I'm trying to achieve
https://codepen.io/toddwebdev/pen/yExKoj
Development website
https://snapstaging.co.uk/thesnapagency/about/
Container layout
<div class="section">
<div class="row">
<div class="column">
<div class="module">
<div class="container">
<div class="items">
<div class="project-item">
<img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
<h1>Project</h1>
</div>
<div class="project-item">
<img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
<h1>Project</h1>
</div>
<div class="project-item">
<img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
<h1>Project</h1>
</div>
<div class="project-item">
<img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
<h1>Project</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Should be fine if you changed the styling a bit.
give the container (div with draggable on your webpage )
overflow-x: auto;
width: 100%;
and set the width of it's child (row)
width: 2500px;
Then whenever you use that codepen you should be good.
<div class="et_pb_row et_pb_row_7 draggable" style="
overflow-x: auto;
width: 100%;
">
<div class="et_pb_column et_pb_column_4_4 et_pb_column_17 et_pb_css_mix_blend_mode_passthrough et-last-child" style="
width: 2500px;
">
Items here
</div>
</div>
This code is a part of the website which i am making and this section keeps overlapping images. How do I correct this?
<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.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid" style="background-color:white; height:700px;">
<div class="row">
<div class="col-md-6">
<img src="images/team/app2.jpg" style="height:180px;width:180px;">
</div>
<div class="col-md-6">
<img src="images/team/website.png" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/designer1.jpg" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/content.png" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/marketing2.jpg" style="height:180px;width:180px;">
</div>
</div>
</div>
Image of the same:
Because you set image to be always 180x180 if the width will be lower than 540 (+some margins) they will overlap. You can disable it by setting overflow: hidden; on each column. But in your case this should not appear as you are using md columns.
So I think your problem is that you have too much columns. There should be next row each time you exceed row column limit in bootstrap default is 12.
<div class="container-fluid" style="background-color:white; height:700px;">
<div class="row">
<div class="col-md-6">
<img src="images/team/app2.jpg" style="height:180px;width:180px;">
</div>
<div class="col-md-6">
<img src="images/team/website.png" style="height:180px;width:180px;">
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="images/team/designer1.jpg" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/content.png" style="height:180px;width:180px;">
</div>
<div class="col-md-4">
<img src="images/team/marketing2.jpg" style="height:180px;width:180px;">
</div>
</div>
</div>
Make sure your css of the images is position: static;
If you want them in-line with one and other, add: display: inline-block; or if you want it just downwards: display: block;
Refer to positioning: https://developer.mozilla.org/en-US/docs/Web/CSS/position
I'm trying to make the navigation sidebar on my website move down with the browser view via Bootstrap's Affix plugin however it refuses to follow the view and just stays at the top.
This is the structure I have for my HTML:
<div id="page-wrapper">
<div class="container">
<div class="row">
<div id="navigation-affix" data-spy="affix" data-offset-top="20" data-offset-bottom="200">
<div class="col-xs-2" id="navigation-wrapper">
<div class="inner">
<div class="row">
<div class="col-xs-12">
<img src="images/me.png" alt="Liam Potter" id="picture-me" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div id="navigation">
Home
Portfolio
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-10" id="content-wrapper">
<div class="inner">
</div>
</div>
</div>
</div>
<div id="page-push"></div>
</div>
<footer>
<div class="container">
</div>
</footer>
Source: https://jsfiddle.net/tbejd5en/1/
Any thoughts?
You can just add a position:fixed to your id #navigation-affix and add col-xs-offset-2 to your id #content-wrapper
div#navigation-affix {
position: fixed !important;
}
Here is fiddle: https://jsfiddle.net/tbejd5en/5/
You can just add a position:fixed to your id #navigation
HTML
<div class="row">
<div class="col-xs-12">
<div id="navigation">
Home
Portfolio
</div>
</div>
</div>
CSS
div#navigation {
text-align: right;
padding-top: 10px;
position: fixed;
}
DEMO
https://jsfiddle.net/tbejd5en/2/
I am using bootstrap 3.3.5, jquery 1.11.3 and the affix script to try to keep my navigation bar at the top of my screen at all times. It has been working well except when I try to add columns with the col-xs-* and col-md-* classes.
For example it scrolls fine with multiple containers in rows like this:
<div id="container" class="container-fluid">
<div id="about" class="container-fluid">
<!--some information here, it scrolls fine-->
</div>
<div id="resume" class="container-fluid">
<div class="container-fluid">
<!--seemingly the problem has to do with using the xs and md tags-->
<div class="row" style="background-color:lavender;">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row" style="background-color:lavenderblush;">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row" style="background-color:lightcyan;">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
</div>
</div>
</div>
<div id="projects_sidescroller" class="container-fluid">
<!--this one scrolls fine as well-->
</div>
I have set up a jsfiddle link with the problem present. When you scroll down to the coloured table, it's text will display on top the navbar instead of hiding below it. https://jsfiddle.net/mhjyw37d/
Add z-index to your affix class.
Like:
.affix {
top: 0;
width: 100%;
z-index: 999;
}
I am trying to create a layout like this :
I wrote html like this :
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<!-- Left side -->
<div class="col-lg-3 col-md-3">
<div class="row">
<div style="height:400px">
container of menu item, which should be fix on top
<div>
</div>
</div>
<!-- Right side -->
<div class="col-lg-9 col-md-">
<div class="row">
<div class="row">
<div style="height:900px">
Div Scrollable <div>
</div>
</div>
</div>
</div>
</div>
How could i achieve this ?? please help me
The Bootstrap Affix may be what you are looking for. It's what the Bootstrap documentation itself uses to keep the menu fixed to the top while the page scrolls.
One of the possible way:
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<!-- Left side -->
<div class="col-xs-3 clearfix" style="height:400px; background: #f00; position: fixed;">
container of menu item, which should be fix on top
</div>
<!-- Right side -->
<div class="col-xs-offset-3 col-xs-9">
<div style="height:900px">
Div Scrollable
<div>
</div>
</div>
</div>
</div>
</div>
+Fiddle
EDIT
I made just simple demo to keep bootstrap padding you need to add one more container inside of left column.