The columns will automatically stack on top of each other when the screen is less than 768px wide. I want to, that than 991px wide but in bootstrap 4?
<!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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
</body>
</html>
Just chang scrips to bootstrap-4:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/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.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
Here is code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/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.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
Use media-query to 991px jsFiddle:https://jsfiddle.net/9p3nws1h/
#media only screen and (min-width: 991px) {
.col-sm-4{
width:33.333333%!important;
}
}
Please read the Bootstrap 4 Documentation. It shows that the lg breakpoint is 992 pixels ...
Therefore, the markup is simply:
<div class="row">
<div class="col-lg-4" style="background-color:lavender;">.col-lg-4</div>
<div class="col-lg-4" style="background-color:lavenderblush;">.col-lg-4</div>
<div class="col-lg-4" style="background-color:lavender;">.col-lg-4</div>
</div>
Working demo
Please refer Grid options section in bootstrap documentation for information on the breakpoints in grid.
https://getbootstrap.com/docs/4.0/layout/grid/#grid-options
You are using col-sm-4 in your code and the breakpoint for sm is 540px.
Other options are
md at 720px
lg at 960px
xl at 1140px
If you want to define your own breakpoints then write your own media css queries.
In bootstrap 4, 991px resolution is not defined in media queries but then too if you want to add it, then you need to add it manually like this:
Bootstrap provides 992px resolution which comes in ".col-lg-"
#media only screen (min-width:991px) {
// Here comes your code
}
This isn't bootstrap, but it's a demonstration of how straightforwardly you can achieve your desired effect, using CSS3 Flexbox and a single #media query.
Working Example:
.row {
display: flex;
flex-wrap: wrap;
}
.row div {
flex: 1 1 33%;
height: 100px;
}
.row div:nth-of-type(1) {
background-color: lavender;
}
.row div:nth-of-type(2) {
background-color: lavenderblush;
}
.row div:nth-of-type(3) {
background-color: lavender;
}
#media only screen and (max-width: 991px) {
.row div {
flex: 0 0 100%;
}
}
<main>
<p>The columns will automatically stack on top of each other when the screen is less than 991px wide.</p>
<div class="row">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>
</main>
Related
I have been trying to remove margin-left from col-md-6 from p tag for media query but it was not working
I have tried this
#media (min-width:320px) and (max-width:425px) {
.col-md-6 {
/* No Space */
margin-left: 0;
}
}
It is not taking margin. Col-md-6 always takes padding-left and padding-right of 15px.
Try this:
#media (max-width: 425px){
.col-md-6{ padding-left: 0; }
}
if you are using bootstrap col use padding just add class pl-0 for col-md-6 and if you want it on specific screen width just use bootstrap breakpoints like : pl-md-0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<section>
<div class="container">
<div class="row no-gutters">
<div class="col-6 bg-danger">
<p>Lorem Ipsum</p>
</div>
<div class="col-6 bg-primary">
<p>Lorem Ipsum</p>
</div>
</div>
</div>
</section>
</body>
</html>
The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns.
Then you can give your desired margin or padding to the divs. Hope it'll solve your problem
You need to switch your values:
#media (max-width:425px ) and (min-width:320px) {
.col-md-6{ margin-left:0;}
}
thats all...
I wanted to modify the grid system, add some borders to rows, columns etc. I know, that I should create separate folder (in my case it's custom.css) and write it there, but it looks like my site sees this file, but doesn't see changes in there.
I tried this in my custom.css
.row-custom {
border: 5px solid #42a5f5;
}
and just add row-custom to row class
Like this
<div class="row row-custom">
<div class="col s12 ">This div is 12-columns wide on all screen sizes</div>
<div class="col s6 ">6-columns (one-half)</div>
<div class="col s6">6-columns (one-half)</div>
</div>
If I add .row-custom into my header in layout.html it works properly.
Here's my custom.css file:
https://imgur.com/sNy6z9G
and here's my custom.css view in sources from the website:
https://imgur.com/zXKiHxG (these css I also had to put into header because otherwise it wasn't working, I deleted it earlier)
My header:
https://imgur.com/fAI72el
Also, my materialize.min.css works correctly.
I have no idea why there is no changes in sources custom.css, what I'm doing wrong?
I´ve made the same code and it worked, the question is, have you imported your custom.css into the file?
if not, try to import it, or chance the place for importation, as shown in the next example, the above code should work
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Portfolio Blog</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<style>
.row-custom {
border: 5px solid #42a5f5;
}
</style>
</head>
<body>
<div class="row row-custom">
<div class="col s12">This div is 12-columns wide on all screen sizes</div>
<div class="col s6 ">6-columns (one-half)</div>
<div class="col s6">6-columns (one-half)</div>
</div>
</body>
</html>
Have you tried adding !important to the line in your css file so that you override the materializecss.css defaults?
.row-custom {
border: 5px solid #42a5f5 !important;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="row row-custom">
<div class="col s12">This div is 12-columns wide on all screen sizes</div>
<div class="col s6 ">6-columns (one-half)</div>
<div class="col s6">6-columns (one-half)</div>
</div>
</body>
</html>
In materialize CSS there is a problem with overriding the CSS so use!important like below.
.row-custom { border: 5px solid #42a5f5 !important; }
I am working on this Text and button over an Html5 Video, and I am trying not to use any media query to fix the mobile issue I am having. The problem is I am using the car-image-overlay class of bootstrap 4 to display the div that contains the text over the video. Using other bootstraps 4 classes to align centre left and all. But in Mobile (ex: iphone 5e) everything breaks, the button, h1 and p seem to not adjust so it covers the whole video an getting out of frame like this picture. I thought bootstrap would take care of this, but maybe i am not doing this the right way. I am using col-lg and xs as well, still no use
.cta-video-section .cta-video-container {
position: relative;
}
.cta-video-section .cta-video-container video {
height: auto;
vertical-align: middle;
width: 100%;
}
.cta-video-section .cta-video-container h2 {
color: white;
}
.cta-video-section .cta-video-container p {
color: white;
font-family: "Open Sans", sans-serif;
font-size: 1.1rem;
}
.cta-video-section .cta-video-container button {
white-space: normal;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="cta-video-section">
<div class="cta-video-container">
<video id="cta-video" autoplay loop muted>
<source src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4"> Your
browser does not support the video tag.
</video>
<div class="card-img-overlay d-flex align-items-center" id="cta-video-texts">
<div class="row">
<div class="text-left col-xs-1 col-lg-4 ">
<h2 class="card-title ">H2 Locations Headline</h2>
<p class="card-text ">This is a wider card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
<div class="">
<button class="btn btn-danger btn-lg " id="cta-video-button">
Watch Video CTA
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Why don't you want to use a media query?
I think you can solve that if you will change the title the paragraph and the button text and size as well on the mobile version.
Reduce the Font size or line height of the content you had used in media queries. The Only problem is bigger font size for smaller devices
I'am learning Bootstrap and after some search on stackoverflow i would like to know if it's possible to get a div col into multiple row easily.
here is what i've done so far :
HTML :
<html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/bootstrap.css">
<title>testing</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">1st level with 12 col
<div class="row">
<div class="col-md-8">2nd level with 8 col
<div class="row">
<div class="col-md-4">3rd level with 4 col</div>
<div class="col-md-6 col-md-offset-2">3rd level with 6 col
<div class="row">
<div class="col-md-3 col-md-offset-1">4th level with 3 col</div>
<div class="col-md-5 col-md-offset-1">4th level with 5 colonnes</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">2nd level with 4 col</div>
</div>
</div>
</div>
</div><!-- /.container -->
<script src="js/boostrap.js" charset="utf-8"></script>
<script src="js/jquery.js" charset="utf-8"></script>
</body>
</html>
</html>
CSS :
body{
padding-top: 10px;
}
[class*="col-"], footer{
background-color: lightgreen;
border: 2px solid black;
border-radius: 6px;
line-height: 40px;
text-align: center;
}
.container{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
/*--------------------------------------- Responsive ---------------------------------------*/
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
and i've got this :
i would like to understand why the 3rd level with 6 col, 4th level with 3col andthe 4th level with 5 col are displayed in two rows and how i could reproduce this to integrate a psd. ( For example get a div with 3col and 4rows)
Thanks you
EDIT : Answer :
Here is what i've understand, if i want to have multiple a col with multiple row i have to subdivise my template like this :
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8">
<div class="row" id="top-row"></div>
<div class="row" id="bottom-row"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4" id="quote-2-high"></div>
</div>
</div>
in one row i make two div, each in separate row, to have the main div sized with two row.
Thanks to Jeremy, and Mustapha Aoussar i know right now how to use this and i also know that there is an usefull tools who can help me to see clearly the bootstrap's grid system : http://shoelace.io/
I have two rows in two containers, but I can't figure out how to reduce the bottom and top margin/padding to bring the content closer.
The bottom content is way too far and I would like to bring it closer to the first row/container.
I tried to apply padding and margin to the rows and containers with no luck.
Here's a fiddle of the html below.
<html lang="en">
<head>
<title></title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<ul id="top-nav" class="nav">
<li data-current-nav="Home">Home</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
bottom content
</div>
</div>
</div>
</body>
</html>
Try removing the margin-bottom on ul#top-nav:
#top-nav {
margin-bottom: 0 !important;
}
See the updated jsFiddle for a demonstration > http://jsfiddle.net/6pbPd/1/
You should remove the bottom margin of ul.nav (20px) and the rule applied to the min-height of the container div (30px):
.row-fluid [class*="span"] {
min-height: 20px;
}
#top-nav {
margin-bottom: 0;
}
Demo: http://jsfiddle.net/6pbPd/4/