First of all, thanks to you all for helping a lot of people!
Second of all, sorry for posting images in Spanish but I have no time to translate it into English. Anyway, text in photos are not relevant.
In this time I'm trying to develop and interactive degree program. Right now, it looks like this:
My idea is to manage card to:
Get same size on all cards
Keep all content (top, middle and bottom) inside cards
Manage middle content (name of a course in Spanish) to resize in favor to preserve card size
For example if i put 150% zoom, everything turn into this:
And if I put 50% zoom it looks about what I'm looking for:
I put a minimize snippet where you can reproduce two courses in one year.
.row {
margin-bottom: 0px !important;
}
#yearHolder {
margin-left: 5px;
}
.col .s12 {
padding-left: 0px !important;
padding-right: 0px !important;
}
.card-content {
padding-left: 10px !important;
padding-right: 10px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.card.small {
height: 150px !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://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<title>Document</title>
</head>
<body>
<div id="malla" class="row">
<div id="1year" class="col l2 s6 offset-l1"><h6 class="center">First Year</h6>
<div id="yearHolder" class="row">
<div id="1semester" class="col s6">
<div class="col s12">
<div class="card horizontal red">
<div class="card-stacked ">
<div class="card-tabs">
<div class="col left">CBM-1000</div>
<div class="col right">8</div>
</div>
<div class="card-content">
<h6 class="black-text text-flow center-align">Algebra y GeometrÃa</h6>
</div>
<div class="card-tabs ">
<div class="row">
<div class="col left">1</div>
<div class="col right">12,13,15</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="2semester" class="col s6">
<div class="col s12">
<div class="card horizontal red">
<div class="card-stacked ">
<div class="card-tabs">
<div class="col left">CBM-1010</div>
<div class="col right">8</div>
</div>
<div class="card-content">
<h6 class="black-text text-flow center-align">Comunicación Elemental para la Ingenieria</h6>
</div>
<div class="card-tab">
<div class="row">
<div class="col left">1</div>
<div class="col right">12,13,15</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Please advice me if I'm not asking in format to quickly fix in favor to get help
Again, thanks to you all!
Materialize widths should be left alone else this will happen. You seem to be overwriting the purpose of their grid system by using the !important feature. Also by targeting them in this way you will change the markup across your entire website which may not be desired. I would suggest adding a new class name to all those divs, then target your own made up classes.
Sizes:
Add a class to all divs called sameSizeCards
Css:
.sameSizeCards{
Height: ______;
Width: 100%; (let Materialize sort the width)
}
Text sizing:
Use #media queries to scale your text-size based on screen widths.
Materialize provides three utility classes (small, medium and large) for cards that fix the height at 300px, 400px, and 500px respectively:
<div class="card small">
<!-- I will be 300px high -->
</div>
https://codepen.io/doughballs/pen/JjRVOgz
Related
I am using Bootstrap in a project of mine. I am making divs inside columns but they are not apreading acrosss the full-width of the columns.
This is a sample code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style type="text/css">
.col{
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
<div class="blue" style="background-color: blue;">
1 of 3
</div>
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
</body>
</html>
My question is simple:
"How do I make my <div class="blue"> across 100% width of the original column?"
I also tried setting width to 100%.
UPDATE
I used <div class="row no-gutters"> instead of <div class="row"> and removed the container-fluid. Worked like a charm
you have to use this class in row
"row no-gutters justify-content-md-center"
You want each div to take up 100% of the column? if so, your divs are currently set to col-2, perhaps you should set them to col-12 (with the desired viewport prefix, lg, md, etc...)
This sounds like a CSS issue. By default, columns in the Bootstrap Grid System have 100% width.
My only recommendation would be to check your CSS for the "blue" class. It would need to be:
.blue{
margin: 0px;
...
}
I would also try changing the following in your HTML
<div class="row justify-content-md-center">
to just
<div class="row">
and set the justify-content in your CSS file and see if that helps
Here is how the blocks are positioned on desktop within a row class which looks good on desktop.
Unfortunately, on xs device this looks not the way we need. I need this order when it's displayed on extra-small device:
1
3
2
Solution that doesn't work: I can't place the block 3 into block 1, as I need full width of block 3 on desktop (the 100% of the screen width, not the 100% of the block 1).
Any ideas how to change the order of 2nd and 3rd blocks with pure css on xs-devices so it is as
1
3
2
,
and not
1
2
3
as it is now?
Thank you.
Any ideas how to change the order of 2nd and 3rd blocks with pure CSS
on xs-devices so it is as
Try this:
<!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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<style>
.box {
height: 300px;
}
.box-1 {
background-color: orange
}
.box-2 {
background-color: blue;
}
.box-3 {
background-color: green;
}
</style>
</head>
<body>
<div class="box box-1 col-sm-8 col-xs-12">
</div>
<div class="box box-2 col-sm-4 hidden-xs">
</div>
<div class="box box-3 col-xs-12">
</div>
<div class="box box-2 col-xs-12 hidden-sm hidden-md hidden-lg">
</div>
</body>
</html>
You might consider this solution in case there's no solution out there can help achieve your required behaviour with pure CSS
It is important to also include Container and Row.
https://getbootstrap.com/docs/4.0/layout/grid/
Does the original code look like this?
<div class="container">
<div class="row">
<div class="col-sm-8 col-xs-12">
1
</div>
<div class="col-sm-4 col-xs-12">
2
</div>
</div>
<div class="row">
<div class="col-sm">
3
</div>
</div>
</div>
Assuming block 2 has a fixed height and its always at most the same height with block one, you can do the following:
CSS:
<style type="text/css">
.wrap {
position: relative;
}
.block1 {
padding-right: 33.3333%
}
#media(min-width: 768px) {
.block2 {
position: absolute;
top: 0;
right: 0;
width: 33.333%;
}
}
</style>
HTML:
<div class="wrap">
<div class="block1">
<div class="col-sm-12">Block1</div>
</div>
<div class="col-sm-12">Block 3</div>
<div class="block2">
<div class="col-sm-12">Block 2</div>
</div>
</div>
Please note that with this method, if block 2 is longer than block one, it will overflow on block 3.
You cannot change the order of columns in smaller screens but you can do that in large screens.
So change the order of your columns.
<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>
<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>
By default this displays the main content first.
So in mobile main content is displayed first.
By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right.
Column Reordering in Bootstrap
I am trying to create a responsive web page using bootstrap. In the small view (xs and sm) the page works fine. I hid some images for the smaller view and it has a very standard layout.
Problem starts when I increase the screen size. In the large views (>=md) I have tried to stack four images column-wise with a row. The fourth image always goes to the next row, no matter what I do.
I have tried setting margin,padding and borders to zero but still no luck. I have attached a link to my problem in code pen. The actual html file and css are slightly bigger so I have narrowed it down only to show the problematic part. Please ignore any unused classes or ids in my code. Thanks
https://codepen.io/maheenul/pen/mLdmvy?editors=1100
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Design Lab</title>
<link rel="stylesheet" type="text/css" href="css/responsive.css"/>
<meta charset = "UTF-8">
<!-- Latest compiled and minified CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<section id = "center">
<div class="container">
<div class="row">
<div class="col-12">
<h2>Images not confined within the row</h2>
<div class="myClass">
<h3> Loren Ipsum</h3>
</div>
</div>
</div>
<div class="row d-none d-md-block">
<img class="col-md-3" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTzDojh5E0fzvTg4nWYs0JadpTwcS2S1KHOtnVQnlruNqmNvfIk" alt="Football">
<img class="col-md-3" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTO8WIJ5ygVENopHPC5Op9z4ua-MoGD-LoUZuEd6vdL-EMro28CWw" alt="Solar Car">
<img class="col-md-3" src="http://www-personal.umich.edu/~jensenl/visuals/album/annarbor/IMG_1051.jpg" alt="campus">
<img class="col-md-3" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTzDojh5E0fzvTg4nWYs0JadpTwcS2S1KHOtnVQnlruNqmNvfIk" alt="Football">
</div>
</div>
</section>
<footer>
<p>The images above don't stack .<br/> Responsive Design</p>
</footer>
</body>
</html>
CSS:
body{
margin: 1%;
padding:1%;
background-color: rgba(0,0,255,.2) !important;
font-size: 100%;
min-width: 500px;
}
header, footer{
background-color:#0066FF;
padding: 1%;
margin: 1%;
}
header h1{
font-size: 3rem;
color:rgba(0,0,0,.7);;
}
section{
margin:0%;
padding:0%;
}
.myClass{
margin: 0em 1em;
padding:.75em;
border: 1px solid black;
border-radius: .25%;
}
footer{
clear: both;
text-align:center;
text-transform: uppercase;
}
#media screen and (min-width: 768px){
header, footer{
background-color:transparent;
}
img{
display: inline-block;
margin: 0;
padding: 0;
border:0;
overflow: auto;
}
}
Add font-size: 0; on <div class="row d-none d-md-block">.
The spaces between images are taking space, thats why its not fitting in 1 row.
The problem you're having with row d-none d-md-block is that the Grid in Bootstrap 4 is not a block element; it is flex. This code changes the display method on MD+ devices from flex to block.
The correct class to use is row d-none d-md-flex. When you do this you restore Bootstrap's Grid behavior; but you also cause your images to display incorrectly as you've applied the Grid directly to the image. To fix that we have to wrap the columns around the image and then apply some responsive image behavior to the actual image element.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12">
<h2>Images not confined within the row</h2>
<div class="my-3 p-3 border border-secondary bg-secondary text-light">
<h3>Loren Ipsum</h3>
</div>
</div>
</div>
<div class="row align-items-center d-none d-md-flex">
<div class="col-md-3"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTzDojh5E0fzvTg4nWYs0JadpTwcS2S1KHOtnVQnlruNqmNvfIk" class="img-fluid img-thumbnail" alt="Football"></div>
<div class="col-md-3"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTO8WIJ5ygVENopHPC5Op9z4ua-MoGD-LoUZuEd6vdL-EMro28CWw" class="img-fluid img-thumbnail" alt="Solar Car"></div>
<div class="col-md-3"><img src="http://www-personal.umich.edu/~jensenl/visuals/album/annarbor/IMG_1051.jpg" class="img-fluid img-thumbnail" alt="campus"></div>
<div class="col-md-3"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTzDojh5E0fzvTg4nWYs0JadpTwcS2S1KHOtnVQnlruNqmNvfIk" class="img-fluid img-thumbnail" alt="Football"></div>
</div>
</div>
Note: Because we're hiding elements at the smallest breakpoint you will need to expand the snippet to see the full results.
I am building a Tic-Tac-Toe interface, currently using HTML, CSS, and Bootstrap. I'm trying to get the board to be perfectly squared (1:1) but I'm getting nowhere.
The boxes have to be taller so they use up more space. I can playing with the height property using vw/vh units on the columns, but they won't keep the 1:1 ratio across all resolutions.
Tic Tac Toe
This other version has some "pads" on each side of the board and does the job but breaks on sizes smaller than tablets. Apart from that I lose too much space.
Tic Tac Toe with Pads
Now, here's the code for the Tic Tac Toe without pads:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tic Tac Toe</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<script src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-2 ads"> "ads </div>
<div class="col-12 col-sm-6 content">
<div class="container-fluid tic-container">
<div class="row tic-row">
<div class="col-4 tic-box"> 1 </div>
<div class="col-4 tic-box"> 2 </div>
<div class="col-4 tic-box"> 3 </div>
</div>
<div class="row tic-row">
<div class="col-4 tic-box"> 4 </div>
<div class="col-4 tic-box"> 5 </div>
<div class="col-4 tic-box"> 6 </div>
</div>
<div class="row tic-row">
<div class="col-4 tic-box"> 7 </div>
<div class="col-4 tic-box"> 8 </div>
<div class="col-4 tic-box"> 9 </div>
</div>
</div>
</div>
<div class="col-12 col-sm-2 tic-panel"> PANEL-THINGY<br>Score:<br>Foo bar: stuff<br> Reset game and all that blah </div>
<div class="col-12 col-sm-2 ads"> ads </div>
</div>
</div>
</body>
</html>
.ads{
text-align: center;
margin: .4vw 0;
background: #F4CC70;
padding: .4vw;
}
.content{
margin: .4vw 0;
background: lightblue;
padding: .4vw;
}
.tic-panel{
border: solid 2px black;
margin: .4vw 0;
background: #66A5AD;
padding: .4vw;
}
.tic-box{
border: solid black 1px;
font-size: 5vw;
background: #6AB187;
text-align: center;
color: lavender;
}
.tic-box:hover{
background: #20948B;
}
Anyways, I would appreciate some pointers to what I'm doing wrong or what I should do. I guess I'm doing something wrong, not taking full advantage of bootstrap.
Also, I would love if you could tell me if I doing something against the principles of bootstrap, such as using rows or col where I shouldn't.
Add the following properties to the "tic-box" class:
.tic-box {
width: 85px;
height: 85px;
}
Then you will be able to delete the numbers and maintain the dimensions.
I would like to know how easilly achieve this layout with Bootstrap 3.
You can achieve that layout using bootstrap 3 pretty easy, you just have to arrange your columns in a proper order. The orange~red block I believe its a sidebar, and the other two blocks have the same width (seems bound to the same container), and I think there you have your content.
So, put the sidebar block, in a container with the desired width from the bootstrap grid, like col-md-4, and the content block in a container say col-md-8; add to both these containers col-xs-12 class(will add 100% width on 768px and bellow), we'll need it because we're gonna use pull-left/right(float rule) class to swap them around.
Check out the demo and bellow the markup/css used
The markup:
<div class="container">
<div class='row cf'>
<div class='col-sm-4 col-xs-12 pull-right'>
<div class='orange'>One good lookin sidebar</div>
</div>
<div class='col-sm-8 col-xs-12 pull-left'>
<div class='content-entry orchid'>
Some content here
</div>
<div class='content-entry cyan'>
And some other content here
</div>
</div>
</div>
</div>
And the css:
.orange{
background: orange;
}
.orchid{
background: orchid;
}
.cyan{
background: cyan;
}
**Note: if you want that sidebar to expand it's height to the height of the other 2 blocks combined, that's a different story, but this should get you started.
UPDATE 2
OK since you have a layout a bit tricky on mobile, I guess your safest bet would be to make the sidebar absolute positioned, and on mobile(bellow and 767px), switch it to static position, to make em fall into a natural flow. There are some more other methods out there like flexbox, or maybe some fancy table tricks, but this one should get you going.
Check out the demo, and the changed markup/css bellow:
<div class="container">
<div class='row content-wrapper'>
<div class='col-sm-8 col-xs-12'>
<div class='content-entry orchid'>
Some content here
</div>
</div>
<div class='col-sm-4 col-xs-12 sidebar-wrapper'>
<div class='orange'>One good lookin sidebar</div>
</div>
<div class='col-sm-8 col-xs-12'>
<div class='content-entry cyan'>
And some other content here
</div>
</div>
</div>
</div>
.orange{
background: orange;
}
.orchid{
background: orchid;
}
.cyan{
background: cyan;
}
/*added rules*/
.content-wrapper{
position: relative;
}
.sidebar-wrapper{
position: absolute;
top: 0; right: 0;
}
#media all and (max-width: 767px){
.sidebar-wrapper{
position: static;
}
}
Have a look here, I think the .col-md-8 and .col-md-4 classes will be interesting for you.
Since stack Overflow will not do any project i posted you simple and easy step
Bootstrap use media-queries
example
#media screen and (max-width: 500px) {
div {
width: 80%
}
}
this above query works if screen is bellow 500px div width will be 80%
try this example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgreen;
}
#media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browserwindow. When the width of this document is less than 300 pixels, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>
Above example will show when screen size is bellow 600px page color will change from lightgreen to lightblue
<body class="container">
<div class="row">
<div class="col-sm-6 col-xs-12">orange</div>
<div class="col-sm-6 col-xs-12">
<div class="row">violet row</div>
<div class="row">light blue</div>
</div>
</div>
</body>
I used xs-12 for the mobile. Please post your example code next time.
Thank you for all your answers.
Here's what i've made with the help of all answers :
<div class="container">
<div class="row">
<div class="col-sm-8 bg-info">
<h4>Content 1</h4>
</div>
<div class="col-sm-4 bg-warning pull-right">
<h4>Sidebar</h4>
</div>
<div class="col-sm-8 bg-success pull-left">
<h4>Content 2</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-8" style="background-color:purple; color:#fff">Contents box 1</div>
<div class="col-xs-12 col-md-4" style="background-color:red; color:#fff">Sidebar</div>
<div class="col-xs-12 col-md-8" style="background-color:blue; color:#fff">Contents box 2</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12 col-md-8" style="background-color:purple; color:#fff">Contents box 1</div>
<div class="col-xs-12 col-md-4" style="background-color:red; color:#fff">Sidebar</div>
<div class="col-xs-12 col-md-8" style="background-color:blue; color:#fff">Contents box 2</div>
</div>