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...
Related
I'm creating a view but my CSS is not displaying except if I put it inside a <style> I already tried using !important but didn't work too, also tried .container-fluid > .row > .d-flex > .out_profile
The class out_profile is not working the CSS inside that class is not displayed. To see the snippet you have to put it on small devices using the responsive
#media (min-width: 576px) {
.container-fluid{
display: none;
}
.container-fluid > .row > .d-flex > .out_profile {
color: #662483 !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" TYPE="text/css">
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav class="d-flex align-items-center justify-content-center navbar navbar-light bg-light col-12">
<div class="out_profile">
X
</div>
<span class="navbar-brand mb-0"><h3 style="color: #662483 !important;">Profile</h3></span>
</nav>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
I took out the display: none and it seems to do exactly what you'd expect -- the text is purple (see example below).
Having said that, I don't think
.container-fluid > .row > .d-flex > .out_profile
is a very elegant css selector. Perhaps you are new to css, but except in very limited circumstances would you need the > selector. In most cases, you would simple write:
.container-fluid .row .d-flex .out_profile
and you can probably even leave a few of the middle elements out, but depends on your situation.
And, as HereticMonkey has pointed out, a !important in css code rarely necessary, so it most likely isn't here either. I left it in below just to show that the only thing I changed was to remove the display: none.
#media (min-width: 576px) {
.container-fluid > .row > .d-flex > .out_profile {
color: #662483 !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" TYPE="text/css">
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav class="d-flex align-items-center justify-content-center navbar navbar-light bg-light col-12">
<div class="out_profile">
X
</div>
<span class="navbar-brand mb-0"><h3 style="color: #662483 !important;">Profile</h3></span>
</nav>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
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; }
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>
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/