I'm using bootstrap 4.4.1.
I've been loking for a responsive list group that will be same height with other components. In the image I want both columns on second row to be same height of image and to hide other list items behind an scrolling group.
Here is the html file : https://jsbin.com/jaqacoq/edit?html,output
<div class="col-md-8 my-col p-4">
<img class="img-fluid" src="img3.jpg" alt="Image not Found">
</div>
<div class="col-md-4 p-2 my-col">
<div class="container">
<div class="row my-row">
<div class="col my-container">
Col 1
</div>
<div class="col my-col">
Col 2
</div>
</div>
<div class="row my-row">
<div class="col">
<div class="overflow-auto">
<div class="">Item 1</div>
<div class="">Item 1</div>
<div class="">...</div>
</div>
</div>
</div>
</div>
</div>
Expected result, but without using fixed size :
What you need here is a bit of jQuery to calculate the height of your image so you can set the height of your list group based on that.
With jQuery you can calculate height with .height()
Here's an example on how to use it:
$('#div2').css('height', $('#div1').height()+'px');
And here's an example with your code that is working:
https://www.codeply.com/p/Pv1dwtjQ9E
Y-overflow don't work without either height or max-height option, so you should specify height of your .comments-block in any units besides percents.
Another approach I can think of: position: fixed all your interface elements and resize/scroll only the central element.
I have to make a User Page for our club website, but I am using Materialize CSS instead of Bootstrap. I am having a hard time making it responsive. My content gets displays weirdly, text goes out of the box and buttons get glued together.
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="container">
<div class="row">
<div class="col s12">
<div class="card horizontal hoverable" style="background: rgba(0, 0, 0, 0.3)">
<div class="card-image">
<img src="https://static.makeuseof.com/wp-content/uploads/2013/09/IE-automation8.png" style="width: 300px; height: 300px;">
</div>
<div class="card-stacked grey-text text-lighten-1">
<div class="row">
<div class="card-content" style="margin-top: -30px;">
<h3 class="light-blue-text"><b>Username</b></h4>
<p style="margin-top: -10px;">Developer</p>
<br>
<br>
<h5><b>Area of Interest</b></h4>
<p>HTML</p>
</div>
</div>
<div class="footer" style="margin-left: 5px; margin-bottom: 5px;">
<span><button class="btn #0d47a1 blue darken-4"><i class="fab fa-linkedin"></i> LinkedIn Profile </button></span>
<span><button class="btn #e65100 orange darken-4"><i class="fa fa-graduation-cap"></i>Profile </button></span>
</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/devarshirawal0111/oj3nxLat/8/
Above link I have removed all attempts I made to make it responsive.
There were quite a few parts in your code that strayed from the materialize suggested structure.
1) In general, until you are familiar with what component you're working with, stick to the code samples:
<div class="row">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-image">
<img src="https://lorempixel.com/100/190/nature/6">
</div>
<div class="card-stacked">
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
</div>
Cards live in cols, which live inside rows.
2) Use card-action as your card footer, not .footer
There is no .footer class for cards. It is called .card-action:
<div class="card-action">
This is a link
</div>
3) Use .btn to give any element a button style:
<a class="btn" href="#" target="_blank"><i class="fa fa-graduation-cap"></i>Profile</a>
You had span > button > a - this is not necessary. Keep it simple. Any element can be made to look like a button just by adding .btn. Also, if your button text is too long, it will spill out or cut off. Not good. Make sure you're not putting unnecessary extra text into buttons. I took out the word 'profile' from linked in, the other solution would be to decrease font size or switch to a standard card to give more room for the footer.
4) Be careful what restrictions you're putting on your images, and also a standard card (image up top) can often work better. To make your image work better responsively, I took off the 300x height and instead gave it height:100% and object-fit:cover, which will fill the space better (object-fit is not supported in IE)
5) Lastly, gave your a tags a little margin so they have spacing when stacked on mobile.
Updated codepen here.
EDIT:
Added a second card example using Card Image, which places the card image at the top of the card.
https://materializecss.com/buttons.html
https://materializecss.com/cards.html
How to make my code to use full width of the device? I am using bootstrap.
<section class="special-area bg-white section_padding_100" id="about">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Section Heading Area -->
<div class="section-heading text-center">
<h2>Why Is It Special</h2>
<div class="line-shape"></div>
</div>
</div>
</div>
<div class="row">
<!-- Single Special Area -->
<div class="col-12 col-md-4">
<div class="single-special text-center wow fadeInUp" data-wow-delay="0.2s">
<div class="single-icon">
<i class="ti-mobile" aria-hidden="true"></i>
</div>
<h4>Heading</h4>
<p>Some text here</p>
</div>
</div>
</div>
</section>
you have to use
class="container-fluid"
instead of container class because container class itself has paddings from the right and left...
From the docs:
Use .container-fluid for a full width container, spanning the entire width of the viewport.
Just make sure it is your outermost element.
You can include those parts of your code inside a pre-defined div whose class name is container-fluid. Here are the properties of container-fluid:
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
You can also add a 100% width style to any other container as well, but maybe that can collide with other style rules of your CSS.
Hope it helps.
i have the following:
"
<div class="container">
<div class="row">
<div class="col-md-3">
<h3><span class="label label-default">Current Job</span></h3>
</div>
<div class="col-md-offset-10">
<h6 id="dateTime">23/07/2015 12.00</h6>
</div>
</div>
</div>
</div>
<div class="panel-body">
</div>
<div class="panel-footer"></div>
"
Using only bootstrap, is it possible to center the two vertical labels of different dimensions (Current Job and Date) contained in Header panel (that contains a grid) and how to do it?
You need to alter the CSS for the following containers:
<div class="col-md-3"> and <div class="col-md-offset-10">
Giving both containers float: none; and margin: 0 auto will definitely center both. If you want the text to be centered as well, add some text-align: center
That should have you covered.
Sorry, forgot to mention that the container <div class="col-md-offset-10"> needs to match the width of the other container (25%).
You can do this by removing classes from your div tags for labels and giving text-center class to div with class row. This will make both labels appear in the middle of the page and one after another vertically. this is what your code container will look like:
<div class="container">
<div class="row text-center">
<div>
<h3><span class="label label-default">Current Job</span></h3>
</div>
<div>
<h6 id="dateTime">22/07/2015 12:00:00</h6>
</div>
</div>
</div>
I'm trying to put some extra margin/padding space between columns on my Bootstrap grid layout. I've tried this but I don't like the result. Here is my code:
<div class="row">
<div class="text-center col-md-6">
Widget 1
</div>
<div class="text-center col-md-6">
Widget 2
</div>
</div>
I want to add margin: 10px and padding:10px. Some people suggest to change their classes to col-md-5 with pull-left and pull-right, but the gap between them will be too large.
Simply add a div within col-md-6 that has the extra padding that you need. The col-md-6 is the 'backbone' to keep the column integrity, but you can add additional padding within it.
<div class="row">
<div class="text-center col-md-6">
<div class="classWithPad">Widget 1</div>
</div>
<div class="text-center col-md-6">
<div class="classWithPad">Widget 2</div>
</div>
</div>
CSS
.classWithPad { margin:10px; padding:10px; }
Bootstrap 5 (Update 2021)
Bootstrap 5 has still includes spacing utilities for padding. However, because of new RTL support "left" and "right" have been changed to "start" and "end". For example pl-2 is now ps-2.
pl-* => ps-* (padding-left)
pr-* => pe-* (padding-right)
ml-* => ms-* (margin-left)
mr-* => me-* (margin-right)
Additionally, Bootstrap 5 introduces new grid gutter classes that can be used to adjust the spacing between columns. The guttter is set on the row instead of each col-* inside the row. For example, use g-0 for no spacing between columns.
Bootstrap 5 column spacing demo
Bootstrap 4 (Update 2018)
Bootstrap 4 has spacing utilities that make adding (or substracting) the space (gutter) between columns easier. Extra CSS isn't necessary.
<div class="row">
<div class="text-center col-md-6">
<div class="mr-2">Widget 1</div>
</div>
<div class="text-center col-md-6">
<div class="ml-2">Widget 2</div>
</div>
</div>
You can adjust margins on the column contents using the margin utils such as ml-0 (margin-left:0), mr-0 (margin-right:0), mx-1 (.25rem left & right margins), etc...
Or, you can adjust padding on the columns (col-*) using the padding utils such as pl-0 (padding-left:0), pr-0 (padding-right:0), px-2 (.50rem left & right padding), etc...
Bootstrap 4 Column Spacing Demo
Notes
Changing the left/right margin(s) on col-* will break the grid.
Change the left/right margin(s) on the content of col-* works.
Change the left/right padding on the col-* also works.
I was facing the same issue; and the following worked well for me. Hope this helps someone landing here:
<div class="row">
<div class="col-md-6">
<div class="col-md-12">
Set room heater temperature
</div>
</div>
<div class="col-md-6">
<div class="col-md-12">
Set room heater temperature
</div>
</div>
</div>
This will automatically render some space between the 2 divs.
Just add 'justify-content-around' class. that would automatically add gap between 2 divs.
Documentation:
https://getbootstrap.com/docs/4.1/layout/grid/#horizontal-alignment
Sample:
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
You may use the padding and margin shorthand Bootstrap 4 classes as follows:
For extra small devices i.e. xs
{property}{sides}-{size}
For other devices/viewports (small, medium, large and extra large)
{property}{sides}-{breakpoint}-{size}
Where:
property = m for margin and p for padding
Following are sides shorthand meanings:
l = defines the left-margin or left-padding
r = defines the right-margin or right-padding
t = defines the top-margin or top-padding
b = defines the bottom-margin or right-padding
x = For setting left and right padding and margins by the single call
y = For setting top and bottom margins
blank = margin and padding for all sides
The breakpoint = sm, md, lg, and xl.
Combining all the above, the left padding complete code can be (for example):
For left padding in extra small devices
pl-2
or for medium to extra large
pl-md-2
Try This:
<div class="row">
<div class="text-center col-md-6">
<div class="col-md-12">
Widget 1
</div>
</div>
<div class="text-center col-md-6">
<div class="col-md-12">
Widget 2
</div>
</div>
</div>
I would keep an extra column in the middle for larger displays and reset to default when the columns collapse on smaller displays. Something like this:
<div class="row">
<div class="text-center col-md-5 col-sm-6">
Widget 1
</div>
<div class="col-md-2">
<!-- Gap between columns -->
</div>
<div class="text-center col-md-5 col-sm-6">
Widget 2
</div>
</div>
Super easy with flexbox. Leave room for some space by changing the columns to col-md-5
<div class="row widgets">
<div class="text-center col-md-5">
Widget 1
</div>
<div class="text-center col-md-5">
Widget 2
</div>
</div>
CSS
.widgets {
display: flex;
justify-content: space-around;
}
For those looking to control the space between a dynamic number of columns, try:
<div class="row no-gutters">
<div class="col">
<div class="inner">
<!-- content here -->
</div>
</div>
<div class="col">
<div class="inner">
<!-- content here -->
</div>
</div>
<!-- etc. -->
</div>
CSS:
.col:not(:last-child) .inner {
margin: 2px; // Or whatever you want your spacing to be
}
A solution for someone like me when cells got background color
HTML
<div class="row">
<div class="col-6 cssBox">
a<br />ba<br />ba<br />b
</div>
<div class="col-6 cssBox">
a<br />b
</div>
</div>
CSS
.cssBox {
background-color: red;
margin: 0 10px;
flex-basis: calc(50% - 20px);
}
In the otherside if you like to remove double padding between columns just add class "nogap" inside row
<div class="row nogap">
<div class="text-center col-md-6">Widget 1</div>
<div class="text-center col-md-6">Widget 2</div>
</div>
and create additional css class for it
.nogap > .col{ padding-left:7.5px; padding-right: 7.5px}
.nogap > .col:first-child{ padding-left: 15px; }
.nogap > .col:last-child{ padding-right: 15px; }
Thats it, check here: https://codepen.io/michal-lukasik/pen/xXvoYJ
I had the same issue and worked it out by nesting a div inside bootstrap col and adding padding to it. Something like:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="custom-box">Your content with padding</div>
</div>
<div class="col-md-4">
<div class="custom-box">Your content with padding</div>
</div>
<div class="col-md-4">
<div class="custom-box">Your content with padding</div>
</div>
</div>
</div>
I have just found a solution that works for me, although it doesnt actually create a space between the boxes so may not be exactly what you are looking for.
border border-white
Doesn't actually create a space but gives the effect of space between cols. Only works if you have a bg-color obviously.
Try this:
<div class="row">
<div class="col-md-5">
Set room heater temperature
</div>
<div class="col-md-2"></div>
<div class="col-md-5">
Set room heater temperature
</div>
</div>
For the more curious, I have also found that adding
border: 5px solid white
or any other variant of your liking, to make it blend in, works superbly.