I got this task using bootstrap my task
that's my code that I tried:
https://snipboard.io/aA8pfb.jpg
<body> <div class="container">
<div class="row" style="height: 300px">
<div class="col-lg-6 col-sm-8 h2 bg-primary">1</div>
<div class="mid w-50">
<div class="row ml-0 pb-2" style="height: 150px">
<div class="col-lg-4 col-sm-6 h2 bg-success">2</div>
<div class="col-lg-4 col-sm-6 h2 bg-danger">3</div>
</div>
<div class="row ml-0" style="height: 150px">
<div class="col-lg-4 col-sm-6 h2 bg-warning">4</div>
<div class="col-lg-4 col-sm-6 h2 bg-secondary">5</div>
</div>
</div>
</div>
</div>
and it didn't work that's the result I got using this code:
https://snipboard.io/YVRg84.jpg
What did I do wrong? How can I make it responsive like this picture? And why do my code got space that I can't get rid of between the two rows?
Thank you!
try this -
<div class="container">
<div class="row" style="height: 300px">
<div class="col-lg-6 col-12 h2 bg-primary">1</div>
<div class="mid w-50 col-12 col-lg-6 ">
<div class="row ml-0 pb-2" style="height: 150px">
<div class="col-lg-4 col-sm-6 h2 bg-success">2</div>
<div class="col-lg-4 col-sm-6 h2 bg-danger">3</div>
</div>
<div class="row ml-0" style="height: 150px">
<div class="col-lg-4 col-sm-6 h2 bg-warning">4</div>
<div class="col-lg-4 col-sm-6 h2 bg-secondary">5</div>
</div>
</div>
</div>
also to remove spacing you probably are using height incorrectly please inspect your code in the browser and experiment with the heights of the div , it will fix your spacing problem .
Related
I have a section which looks like this:
The fields Budget and Status should be more on the right side, but I don't know how to achieve this without breaking it. The issue doesn't appear in JSFiddle: https://jsfiddle.net/om6jd4pn/
I tried putting the text to the right using padding-left:20em; in CSS and this HTML, but it's breaking after the first letter.
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-4">
<span class="bsprojectGroupTitle" id="indentBudget">Budget</span>
</div>
<div class="col-sm-12 col-md-9" id="projectBudget">
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="row">
<div class="col-sm-6 col-md-3">
<span id="indentStatus">Status </span>
</div>
<div id="bsprojectProjectPhaseLine">
</div>
</div>
</div>
Any help is appreciated!
I'm creating project based in html and css. I have created this code in bootstrap inside a container and I want this to be responsive.
<div class=" container">
<div class="row">
<div class="col-md-12 col-sm-12 client "> <b>SEI GIÀ CLIENTE? ACCEDI </b>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3"></div>
<div class="col-md-3 col-sm-3 labelField">
<div class="row">
<div class="col-md-4 col-sm-4 labelField">
<strong><br>EMAIL</strong>
</div>
<div class="col-md-8 col-sm-8">
<input class="ut" type="mail">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6"></div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3"></div>
<div class="col-md-3 col-sm-3 labelField">
<div class="row">
<div class="col-md-4 col-sm-4 labelField">
<strong><br>PASSWORD</strong>
</div>
<div class="col-md-8 col-sm-8">
<input class="ut" type="mail">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6"></div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3 "></div>
<div class="col-md-6 col-sm-6 col-xs-6 pass"> Hai dimenticato la password?
</div>
<div class="col-md-3 col-sm-3 col-xs-3"></div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 ">
<a href="#">
<img src="images/entra.png" class="img-responsive registrati ">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 ">
<a href="#">
<img src="images/fb.png" class="img-responsive registrati ">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 ">
<div class="divider"></div>
</div
Here is my css:
.registrati {
margin-top: 20px;
margin-left: 338px;
margin-bottom: 8px;
width: 33%px;
}
.pass {
font-style: Arial black;
color: black;
font-size: 0.8em;
margin-left: 339px;
margin-bottom: 20px;
margin-top: 20px;
text-decoration: underline;
}
Here is what my result should look like:
The result is not responsive. My question is have I done something wrong or bootstrap doesnt let me to modify the classes as I did? So what should I do to make this responsive?
All the scripts and links required for responsivity are in my page but not here for a shorter demo. Thanks!
I can't run your snippet on my Mac but just by looking at your code, I would remove width: 80%; height: 100%; If you really want it to be responsive the "bootstrap way", try letting it handle your div containers in terms of sizes first. Have you tried that?
Looks fine in terms of responsiveness without your stylesheet: https://jsfiddle.net/DTcHh/23755/
EDIT: those margins seem pretty large? Maybe it just looks like it's not responsive because of the huge margins. Can you maybe provide a sketch of what it should look like?
EDIT2: Here is my answer: https://jsfiddle.net/DTcHh/23757/ I cleaned it up a bit. Your problem was that you had way too many divs and columns; you should check out Bootstrap's grid documentation again and use col-md-offset if you want to offset things by design.
First of all I am assuming that you have included bootstrap css and js properly. Going further you don't need additional css for making your page responsive. Bootstrap does that. Always remember bootstrap has 12 columns in a row. So u need to use it properly for your page to show responsiveness.
<div class="container contain">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-2 col-xs-12 text-center">
<a href="#">
<img src="https://www.google.co.in/logos/doodles/2016/2016-doodle-fruit-games-day-12-5125886484414464.3-scta.png" class="registrati img-responsive">
</a>
</div>
<div class="col-lg-6 col-md-4 col-sm-8 col-xs-12 pass text-center">
<a href="https://www.google.co.in/logos/doodles/2016/2016-doodle-fruit-games-day-12-5125886484414464.3-scta.png">
Hai dimenticato la password?
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-2 col-xs-12 text-center">
<a href="#">
<img src="https://www.google.co.in/logos/doodles/2016/2016-doodle-fruit-games-day-12-5125886484414464.3-scta.png" class="registrati img-responsive">
</a>
</div>
</div>
</div>
I am trying to make a layout with three equal columns. In the third column I want two rows of two boxes of equal width. For some reason, the columns are not covering 1/3 width but rather the entire page width. I included my HTML and relevant CSS below.
<div id="about-me" class="container">
<div class="row">
<div class="sm-col-4 md-col-4 lg-col-4 xl-col-4"></div>
<div class="sm-col-4 md-col-4 lg-col-4 xl-col-4"></div>
<div class="sm-col-4 md-col-4 lg-col-4 xl-col-4">
<div class="row">
<div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div>
<div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div>
</div>
<div class="row">
<div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div>
<div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div>
</div>
</div>
</div>
</div>
Here is the CSS:
#about-me {
height: 100vh;
}
.simple-image-box {
height: 50px;
padding: 10px;
width: 40%;
color: cadetblue;
}
You wrote type-col-number instead of col-type-number.
HTML:
<div id="about-me" class="container">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
</div>
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 simple-image-box"></div>
<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 simple-image-box"></div>
</div>
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 simple-image-box"></div>
<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 simple-image-box"></div>
</div>
</div>
I'm using Bootstrap and I'm having issues setting up my grid. How do I use bootstrap's push/pull to setup my columns as below?
This is what I've got so far,
<div class="row">
<div class="col-xs-5 col-sm-3 col-md-3">A</div>
<div class="col-xs-7 col-sm-9 col-md-2 .col-md-push-7">B</div>
<div class="col-xs-12 col-sm-12 col-md-7 .col-md-pull-9">C</div>
</div>
Make sure you don't add a period (.) inside of the class attribute.
When using push/pull, you need to offset the columns from where they would normally go. Moving them left or right won't change their underlying order in the document flow.
So you can do it like this:
<div class="row">
<div class="col-xs-5 col-sm-3 col-md-3" >A</div>
<div class="col-xs-7 col-sm-9 col-md-2 col-md-push-7">B</div>
<div class="col-xs-12 col-sm-12 col-md-7 col-md-pull-2">C</div>
</div>
Demo in Stack Snippets:
.green { background: #A3D7C3; }
.red { background: #EF453A; }
.yellow { background: #FDBE2D; }
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<h2> Normal </h2>
<div class="row">
<div class="col-xs-5 col-sm-3 col-md-3 green">A</div>
<div class="col-xs-7 col-sm-9 col-md-2 red">B</div>
<div class="col-xs-12 col-sm-12 col-md-7 yellow">C</div>
</div>
<h2> Push / Pull </h2>
<div class="row">
<div class="col-xs-5 col-sm-3 col-md-3 green">A</div>
<div class="col-xs-7 col-sm-9 col-md-2 col-md-push-7 red">B</div>
<div class="col-xs-12 col-sm-12 col-md-7 col-md-pull-2 yellow">C</div>
</div>
</div>
I don't know if my approach makes sense, however, I need to achieve a layout like this picture:
Now, I'm writing just a single <div class="row"></div> and representing each area with a column inside of it, e.g. <div class="col-sm-4></div>.
Without the yellow area, this works fine:
<div class="row">
<div class="col-sm-4 col-sm-push-8">green</div>
<div class="col-sm-4 col-sm-pull-4">red</div>
<div class="col-sm-4 col-sm-pull-4">blue</div>
</div>
How can I add the yellow area? There's no col-pull-16 or things like that, what's the way to go?
Thank you.
you need to check the Flexbox and sepcially the order property (http://css-tricks.com/snippets/css/a-guide-to-flexbox/)
Have a look at this. Hope it helps.
<div class="row">
<div class="hidden-xs col-sm-4 col-md-4 col-lg-4">
RED
</div>
<div class="hidden-xs col-sm-4 col-md-4 col-lg-4">
BLUE
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
Green
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 navbar-fixed-bottom">
<div class="row">
<div class="col-xs-12 hidden-sm hidden-md hidden-lg">
Red
</div>
</div>
<div class="row">
<div class="col-xs-12 hidden-sm hidden-md hidden-lg">
BLUE
</div>
</div>
</div>
</div>
JSFIDDLE
http://jsfiddle.net/68n54p47/2/