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/
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...
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'm attempting to create a grid using PureCSS and have discovered a behavior I don't understand. I want the left part of the grid to take up 1/3 of the page and the right the remaining 2/3:
# index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test PureCSS</title>
<link rel="stylesheet" href="http://yui-s.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="http://yui-s.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<div class="header">
<div class="home-menu pure-menu pure-menu-horizontal">
<a class="pure-menu-heading" href="#">Test Page</a>
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected">Home</li>
<li class="pure-menu-item">Tour</li>
<li class="pure-menu-item">Sign Up</li>
</ul>
</div>
</div>
<div class="pure-g">
<div class="l-box-lrg pure-u-1 pure-u-md-1-3">
<div class="content-wrapper">
<div class="content">
1-3
</div>
</div>
</div>
<div class="l-box-lrg pure-u-1 pure-u-md-2-3">
<div class="content-wrapper">
<div class="content">
2-3
</div>
</div>
</div>
</div>
</body>
</html>
Here's the CSS:
# base.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.home-menu {
padding: 0.5em;
text-align: center;
box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
}
.l-box-lrg {
padding: 2em;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.content-wrapper {
/* These styles are required for the "scroll-over" effect */
position: absolute;
top: 87%;
width: 100%;
min-height: 12%;
z-index: 2;
background: white;
}
#media (min-width: 48em) {
.content {
padding: 1em;
}
}
In Chrome, which uses Blink, this page renders as expected. But in Firefox, which is Gecko-based, the left 1-3 div gets stacked on top of the right 2-3 div. In the past, problems like this were caused by having a space at the end of a div. However, I've checked my code and it doesn't have any extra spaces. I read somewhere about how these rendering engines handle display:block versus display:inline-block differently so maybe that has something to do with it. But I would think that if PureCSS was developed by Yahoo, they would have factored any rendering engine differences into their framework so that this wouldn't happen.
Most probably its because of the user agent stylesheet try and check if the body doesnt have padding or margin applied to it
I am using media queries to remove indent on li when the screen size is 500 width here the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="row" style="margin-left: 2px; margin-right: 1px;">
<div class="media">
<div class="date pull-left">
<p>7<span>June</span></p>
</div>
<div class="media-body">
<p><strong>xxx</strong> xxxx/p>
<p>Key Points:</p>
<ol>
<li>xxx</li>
<li>xxx</li>
<li>xxxx.</li>
<li>sda</li>
<li>dasdaS</li>
<li>ASdaSDa</li>
<li>aSDas.</li>
</ol>
<img src="/static/images/YouTube-icon-full_color.gif">
</div>
</div>
</div>
</body>
</html>
and the corresponding css:
#media (min-width: 600px){
ul{
margin: 0px;
padding: 0px;
}
li{
margin: 0px;
padding: 0px;
}
}
Link to JS bin paste
http://jsbin.com/xoqufugo/9/
My issue is its not working.
you need to do below changes. Here is the demo
change min-width: 600px to max-width: 600px
0l to ol
I am a beginner to HTML and CSS. i have some knowledge of javascript, not jquery and also responsive design.
So I want to make a 3 column grid aligned to center and each with 33.33% width. Also a little space between each horizontally and some space on either side. but i can seem to align it to the center.
here is my html. I also want it to be Responsive. It should be reduced to two columns then to one and stuff like that. How could i achieve this?
Here is my HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="Home.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="layout" align="center">
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
</div>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
.success {
display:inline-block;
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center
}
.success li:last-child {
float: none;
width: auto;
}
.layout {
width:75%;
}
You need to start again.
Basically your html structure needs to reflect your 3 column layout. Usually this is achieved with <div> tags.
so something like:
<div id="content">
<div id="contentleft">
your first column content is here
</div>
<div id="contentcenter">
the stuff for the middle goes here
</div>
<div id="contentright">
etc. etc. etc.<br>
...
</div>
</div>
then your .css can do something along the following lines:
#content {
width: 900px;
}
#contentLeft {
width:33%;
float:left;
}
#contentcenter {
width:33%;
padding:1%;
float:left;
}
#contentright {
width: 33%;
float:right;
}