Hi I'm new in bootstrap and just trying to understand how the grid line works and making boxes on it. I don't know why does the style doesn't take effect.
Here is my code:
<div id="content" class="container">
<div class="row">
<div class="col-md-12 main ">
<h2>Welcome to Dashboard!</h2>
</div>
<div class="col-md-4 sidebar style="background-color: #dedef8;box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">
<h2>Sidebar</h2>
</div>
</div>
</div>
Your HTML is invalid, you should close class attribute quote, and add missing </div> tag. After all you also make sure that total sum of columns is exactly 12 per row. Something like this maybe:
<div id="content" class="container">
<div class="row">
<div class="col-xs-4 sidebar">
<h2>Sidebar</h2>
</div>
<div class="col-xs-8 main ">
<h2>Welcome to Dashboard!</h2>
</div>
</div>
</div>
Demo 1: http://plnkr.co/edit/YpfBDxXHrmGslzMUjEVh?p=preview
Here col-xs-4 + col-xs-8 fills 12 column row. col-xs- styles are effective starting from extra small dimensions and higher. You can of course make it more sophisticated, for example you want sidebar to take whole row pushing main content below it for xs devises:
<div class="row">
<div class="col-xs-12 col-sm-4 sidebar">
<h2>Sidebar</h2>
</div>
<div class="col-xs-12 col-sm-8 main">
<h2>Welcome to Dashboard!</h2>
</div>
</div>
Demo 2: http://plnkr.co/edit/YpfBDxXHrmGslzMUjEVh?p=preview
Related
I have 2 columns and on the left and the right side, When I open the web page on a small or xs screen the two columns overlap. I would like for the other column to go below the other.
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9 area-style"></div>
</div>
</div>
CSS:
.area-style {
border: 1px solid #ccc;
padding-top: 2em;
background: #fafafa;
height: 500px;
}
Please check if you have given floats to the elements inside any of the "col-md-3" or "col-md-9" divs. The Overlapping 99% occurs If the floats are not cleared.
If you are using Bootstrap4 try this.
<div class="container">
<div class="row">
<div class="col-12 col-md-3"></div>
<div class="col-12 col-md-9 area-style"></div>
</div>
</div>
Try this.
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-3"></div>
<div class="col-xs-12 col-md-9 area-style"></div>
</div>
</div>
Please tell me if this helps you.
I am trying to build a website with flash-cards to help learn the Hebrew alphabet. My Card partial view looks like this:
#model FlashCards.MultipleChoice.ViewModels.CardViewModel
<div class="index-card">
<div class="row">
<div class="col-md-offset-5"></div>
<div class="col-md-2 text-center">
#Model.Numeric
</div>
</div>
<div class="row">
<div class="col-md-offset-2"></div>
<div class="col-md-8 text-center card-symbol">
#Html.Raw(Model.UnicodeEscape)
</div>
</div>
<div class="row">
<div class="col-md-offset-2"></div>
<div class="col-md-8 text-center">
#Model.Name
</div>
</div>
</div>
Now the col-md-offset works on all but the first row, causing the card to render as in the below image:
Now why isn't the 1 in the image offset like the glyph and the name for the letter Aleph?
My CSS file for these cards only contains the following so far:
.index-card {
height: 150px;
}
.index-card .card-symbol {
font-size: large
}
I believe you're using the offset classes wrong; do not apply them to empty divs.
Your text is centered. Second and third rows have widths of 8 columns. It looks like the offset is working but it really isn't. The first row is only 2 columns wide. None of your offset divs are having any effect on the layout.
You need to do something like this, at the very least:
<div class="index-card">
<div class="row">
<div class="col-md-offset-5 col-md-2 text-center">
#Model.Numeric
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8 text-center card-symbol">
#Html.Raw(Model.UnicodeEscape)
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8 text-center">
#Model.Name
</div>
</div>
</div>
I think it is something simple, but as i'm new to bootstrap I don't know how to do it, I searched and didn't find anything about it.
I want the columns to take 100% the width of the row, I marked the row with a red border in the example below.
I know it's the padding of the columns that give this spacing but I have not figured out a way to remove the padding keeping the spacing between the columns and making them fill the row.
JSFiddle
.box {
height: 100px;
margin-bottom: 20px;
border: 1px solid rgba(0,0,0,0.2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" style="margin-top:40px;margin-bottom:40px;border-right: 1px solid red;border-left: 1px solid red;">
<div class="col-xl-3 col-md-4 col-sm-6">
<div class="box"></div>
</div>
<div class="col-xl-3 col-md-4 col-sm-6">
<div class="box"></div>
</div>
<div class="col-xl-3 col-md-4 col-sm-6">
<div class="box"></div>
</div>
<div class="col-xl-3 col-md-4 col-sm-6">
<div class="box"></div>
</div>
</div>
</div>
Change your class from container to container-fluid:
<div class="container-fluid">
...
</div>
More about it here
remove class "container. and then try you will get full width row.
To remove the space between columns in you row, in bootstrap 4, you can use no-gutters like this:
<div class="row no-gutters">
...
</div>
Try This
nest row inside row
HTML
<div class="container">
<div class="row">
<div class="row">
<div class="col-*-*">
<div class="products">
.......
</div>
</div>
</div>
</div>
</div>
Link For reference
hope this helps..
you should use 100% of all div width if problem solved well and good otherwise you can use left and right margins in (-) minus.
I'm using bootstrap (version 3.3.6) for the first time to make my site. Readed the docs and start to code. Excluding the <link>'s the code below is my site's structure:
<body>
<div class="container">
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2 col-lg-pull-1">
<div class="loader">
<div class="loader-bg">
...
</div>
</div>
</div>
<div class="col-sm-10 col-md-10 col-lg-10 col-lg-push-1">
<div class="black-box">
<p class="info-message">Coming <span>VERY</span> soon!</p>
<p class="text-message">Until then, my contacts:</p>
...
</div>
</div>
</div>
</div>
Using push and pull classes I thought I was removed padding for the columns. Setting the main div with 'class="container"' I have the result:
Changing to 'class="container-fluid"' the behavior remains strange. Notice shapes overlapping page:
What I want in my results is: the circle and rectangle (both are divs) remains aligned to the edges of the page (left and right) with no padding or marging. Following docs until now doesn't work. What this behavior occurs?
by default col-* have padding so you just need to reset them
[class^="col"] {
padding: 0
}
[class$="-2"] {
background: orange
}
[class$="-10"] {
background: grey
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<div class="loader">
<div class="loader-bg">
...
</div>
</div>
</div>
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
<div class="black-box">
<p class="info-message">Coming <span>VERY</span> soon!</p>
<p class="text-message">Until then, my contacts:</p>
...
</div>
</div>
</div>
I'd have two "sections" in which I am using the bootstrap 3 scaffolding to style. I am having a hard time figuring out how I might have these maintain their column spacing while still be centered on the middle of the page. For example right now it is
<content><content> ---<space>---
and i want
---<space>--- <content><content> ---<space>---
Here is what i've got.
<div class=".container-fluid" id="aboutContent">
<div class="col-md-3">
<img src="../imgs/pic.jpg" alt="Joe Brunett" id="aboutPicture"/>
</div>
<div class="well col-md-4" id="desc">
<p> text<p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3"></div>
</div>
</div>
Offsets can be used to center a div but remember that it'll work only for even columns
<div class="col-md-8 col-md-offset-2"></div>
You can even change the break-point by replacing
<div class="col-md-6 col-md-offset-3"></div>
with
<div class="col-sm-6 col-sm-offset-3"></div>