What's exactly the purpose of col-md-offset-*?
I know the purpose of col-md-12 without the offset. but with that I've no idea, I've tried to play with it but still nothing.
Short version of answer. Offset make empty column with custom width before our column with data. If you want to make empty column with custom width after your column with data then use pull (col-md-pull-*).
Example:
In medium size window we want to create 2 empty cells, 7 cells with content and again 3 empty cells. We could do that this way.
<div class="row">
<div class="col-md-offset-2 col-md-7 col-md-pull-3">OUR CONTENT</div>
</div>
And this is how it would look like without offsets. We should create empty divs with custom width.
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-7">OUR CONTENT</div>
<div class="col-md-3"></div>
</div>
Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-2 moves .col-md-2 over four columns.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-12">
<div class="col-md-2">First col-md-2</div>
<div class="col-md-2 col-md-offset-2"> col-md-2 with offset 2</div>
</div>
</body>
</html>
.col-md-offset-* to leave a particular number of virtual Bootstrap columns to the left of any column (kind of like invisible place holders).
It is used for giving space from margin-left, you can see in my example first div is used with offset thats why it is displaying from margin left
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-4 col-md-offset-2 col-xs-offset-2">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-md-4 col-xs-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
So col-md-12 will take up the whole of the preceding div. But what happens if you dont want to take up the whole div?
Say you only want to take up half the div but want to centre the content then you can do col-md-6 col-md-offset-3 This will make a div of 6 cols wide and offset it by 3. So the content starts 3 cols in and then goes for 6 cols.
You should really read the bootstrap docs about their grid system and how it works.
It is used to move columns to the right. For details, access http://getbootstrap.com/css/#grid-offsetting
col-md-offset-* give margin from left. Like if i need col-md-6 on right but not on left then we need to add "col-md-offset-6" with col-md-6.
Example:
<div class="row">
<div class="col-md-offset-6 col-md-6"></div>
</div>
Try to add this html in your editor and check output in browser.
It is used for giving space from margin-left, you can see in my example first div is used with offset thats why it is displaying from margin left
Try to resize your browser or on other devices to see: https://getbootstrap.com/examples/grid/
Here is my screenshot on large screen (col-lg-* applied), view it on Inspect
.col-md-offset-2 make a space between 2 col-md-* in a row, check image below.
Here is my screenshot on medium screen (col-md-* applied), view it on Inspect
Hope this help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-12">
<div class="col-md-2">First col-md-2</div>
<div class="col-md-2 col-md-offset-2"> col-md-2 with offset 2</div>
</div>
</body>
</html>
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-4 col-md-offset-2 col-xs-offset-2">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-md-4 col-xs-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
According to W3School: it is similar to margin-left, but with unit as col. You can try it yourself or read reference there.
Related
I'm using bootstrap columns to display expanding cards. When one expands though, it pushes the whole row underneath it down.
Unexpanded:
Currently how it behaves expanded:
How I'd like it to behave:
I've been reading about flexbox, but I cant find any good examples of the desired behavior, while maintaining responsive design.
Currently the code is along the lines of
<div class="row">
<div class="col-xl-4 col-lg-5 col-12">
expanding content...
</div>
.
.
.
<div class="col-xl-4 col-lg-5 col-12">
expanding content...
</div>
</div>
Maybe you could try giving it a css height: property. This can be done through Javascript, so when you're expanding the box, also give it a certain height to limit it. Tell me if you'd like me to do it for you :)
I see 2 possibilities:
1. Solution: Have you checked out the bootstrap-component card-columns? It organizes the cards into Masonry-like columns.
By using
.card-columns {
#include media-breakpoint-only(lg) {
column-count: 4;
}
#include media-breakpoint-only(xl) {
column-count: 5;
}
}
you can make them responsive.
2. Solution:
You use just 3 cols:
.row {
margin-top: 20px;
align-content: flex-start;
}
.card {
padding: 10px;
margin-bottom: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-4">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
</div><!-- card -->
<div class="card">
Lorem
</div><!-- card -->
</div><!-- col -->
<div class="col-4">
<div class="card">
Lorem
</div><!-- card -->
<div class="card">
Lorem
</div><!-- card -->
</div><!-- col -->
<div class="col-4">
<div class="card">
Lorem
</div><!-- card -->
<div class="card">
Lorem
</div><!-- card -->
</div><!-- col -->
</div><!--row -->
Ok, so after some trial and error I managed
--HTML--
<div id="redDiv" style="background-color: red; height: 100px; width: 10%; float:
left;">
<p>This is a div</p>
</div>
--JavaScript--
var onWindowLoaded = () =>{
document.getElementById("redDiv").setAttribute("style", "height: 150px; background-
color:red; width: 10%;");
}
window.addEventListener("load", onWindowLoaded);
So it's important to note that I used a red background in order to tell how long my div was, I see you're using a greyish background (It was hard to see them to be honest). So basically once the page loads it will set the div to the height indicated in the setAttribute() function, I had to re-add the colour because modifying the div height through javascript made the colour disappear completely. Hope this helps :)
When overriding css values while working with bootstrap try using
!important
For example:
row {
height: 150px !important;
}
First off, I'm pretty new to programming field, just right started.
I got problems with nav links, that works fine in Desktop view. But, it goes un-clickable in responsive view.
Please help me. I'm sure this is easy-peasy for you.
Here's the demo: https://zeraus.github.io/brapstoot/
Thanks!
Bootstrap is a mobile first framework. You established the class for its desktop view but didn't for responsive views.
find the div where the feed goes and add the smaller screen size views classes like this:
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="visible-xs-block"></div>
...
</div>
p.s. don't get discouraged by the down voting and don't stop asking. You are new, you clarified that, so it's normal to make mistakes when you ask. Those downvotes are to protect the integrity of S.O. not to personally to hurt you. You'll get them back as you start posting better. In the meantime, here are some tips:
Never post a link directly to your site. Too many spammers out there. I took a risk. Others won't.
Always post the relevant HTML, CSS, JS or whatever code you have needs attention.
If possible get acquainted with JFiddle.com and codepen post your code there and then the link here so that we have an online editor to work with.
don't come asking for broad answers like "How to build a website?" DO your footwork, try something. And then come asking.
And once you can post screenshots, do so.
If your question doesn't get attetion, don't duplicate the same question.
Don't use profanity and dont insult. We're here to help you voluntarily. We don't have to do it, you know lol
Do that on the next question and you will be golden!
Good luck and code something beautiful!
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.
Try like this
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
I finally figured out how to make the jumbotron image fit the entire width and HEIGHT of a user's browser:
.jumbotron {
background: url(images/yelllow.png) no-repeat center;
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
Now, when I add another section div class = row, the columns to not show up underneath the jumbotron image. Instead, they show up on the top of the page and overlap the jumbotron text. JS Fiddle: http://jsfiddle.net/srLngrsx/
I isolated each CSS property above and found out that position: fixed is causing this to happen. When I remove position: fixed the columns line up underneath like they should, but the jumbotron image is now a smaller size, not fitting to the screen.
Can anybody identify or explain why exactly position: fixed is causing the other elements to not position properly? How can I make it so the jumbotron header fits the width AND HEIGHT of the page, and the rest of the content shows up below?
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
Is this what you need?
.jumbotron {
background: url(images/yelllow.png) no-repeat center;
top: 0;
left: 0;
min-width: 100%;
min-height: 100vh;
}
Fiddle
http://jsfiddle.net/srLngrsx/3/
Move your jumbotron in the container and give it a row and full-width column.
http://jsfiddle.net/srLngrsx/1/
<div class="container">
<div class="row">
<div class="col-xs-12 jumbotron text-center">
<h1>test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo</p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
...
when you use position:fixed for any element , you have to use margin-top for the elements after it . in this example you have to use margin-top for the class row . because the elements after the fixed positioned element will start from the top position of the fixed element.
.jumbotron {
background: url(images/yelllow.png) no-repeat center;
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
.row {
margin-top:300px;
}
http://jsfiddle.net/srLngrsx/4/
I'm trying to center 3 boxes, with abit of space (gutter?) between them and also space from corner of page.
I tried class="col-sm-2 col-md-offset-1" (col-sm-2 to make them smaller, and offset 1 for the gap), but its not really centered to the middle of the page, and also on mobile each col is "streched" to the corners and i dont want that.
any ideas?
thanks!
You need text-center
.grid3 >div{
height: 200px;
background: rgba(0,0,0,.4);
float: none;
display: inline-block;
background-clip: content-box
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row text-center grid3">
<div class="col-xs-3">.col-md-4</div>
<div class="col-xs-3">.col-md-4</div>
<div class="col-xs-3">.col-md-4</div>
</div>
You can wrap your content in a .well. Then the padding of the columns will be your gutters. Also, you cannot use .col-sm-3 if you want 3 columns to be centered.. you would have to use .col-sm-2 or .col-sm-4
<div class="col-sm-4">
<div class="well">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
http://www.bootply.com/CUbF8SQg8q
I have a web application based on MVC 4 framework with Bootstrap(twitter) and i want to make one of my pages a one page navigation with a scrollspy:
I have a fixed navbar at the top throughout my site and in one page of the site i want i addition a side bar ("nav nav-pills nav-stacked pull-left") with a scrollspy.
col-md-3 = on the left that will be storing my sidebar
col-md-9 = on the right that will be storing my context
I try different things and nothing seem to work, one thing that i notice is
that i need to add to the body tag:
<body data-spy="scroll" data-target="#side-nav">
but in MVC the body tag is on the "_layout" and i don't want to touch this shared partial view.
What can i do ? maybe someone has implement this feature in MVC and could give me a small example of it ?
This is my code :
#{
ViewBag.Title = "Designer";
}
<div class="row">
<div class="col-md-3">
#* Index *#
<div class="nav-pills pull-left affix navspy">
<div id="side-nav">
<ul class="nav">
<li>General</li>
<li>Words</li>
<li>File Type</li>
<li>Routes</li>
</ul>
</div>
</div>
</div>
<div class="col-md-9">
<div id="general">
#* Section Gereral *#
<h2 class="page-header">Gereral</h2>
<p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
</div>
<div class="active" id="words">
#* Section Words *#
<h2 class="page-header">Words</h2>
<p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
</div>
<div id="filetype">
#* Section File Type *#
<h2 class="page-header">File Type</h2>
<p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
</div>
<div id="routes">
#* Section Routes *#
<h2 class="page-header">Routes</h2>
<p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('body').attr("data-spy", "scroll");
$('body').attr("data-target", "#side-nav");
});
</script>
What i'm missing here ?
You can use javascript to add attributes dynamically to the <body> tag.
Add this script just to the page where the scrollspy is. When it is loaded inside the _Layout, the attributes will be added to the <body> tag.
yourPage.cshtml
#{
ViewBag.Title = "Designer";
}
#section scripts
{
<script>
$(document).ready(function(){
$( 'body' ).attr("data-spy","scroll");
$( 'body' ).attr("data-target","#side-nav");
});
</script>
}
[...]
Shared \ _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
[...]
#RenderBody()
[...]
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", false)
</body>
</html>