<div class="container container-fluid">
<div class="row">
<div class="col-lg-6">
<app-profile [conId]="conId"></app-profile>
</div>
<div class="col-lg-6">
<app-sales [conId]="conId"></app-sales>
</div>
</div>
</div>
I have no idea why this is happening.
Could it possibly be because I'm wrapping Angular component tags in the Bootstrap rows and columns? I'm almost certain I've done something like this before and it worked.
I've attached a picture of what's happening and highlighted where it's over lapping.
Edit:
Seems to look good if I remove the component tags and add some background color. So it may actually have something to do with the components themselves?
<div class="row">
<div style="background-color: red; height: 20px;" class="col-lg-6">
</div>
<div style="background-color: yellow; height: 20px;" class="col-lg-6">
</div>
</div>
Columns
Related
this is my page structure
HTML
<div class="container" style="padding-top:20px">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12" style="height:80px">
1st
</div>
<div class="col-md-12" style="height:50px">
3rd
</div>
<div class="col-md-12" style="height:50px">
5th
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12" style="height:50px">
2nd
</div>
<div class="col-md-12" style="height:40px">
4th
</div>
<div class="col-md-12" style="height:90px">
6th
</div>
</div>
</div>
</div>
</div>
I made a jsFiddle for it
https://jsfiddle.net/ytke8mn3/
I marked the columns with 1st,2nd,3rd,4th,5th,6th
The issue I'm facing is after resizing my page to a certain width in bootstrap below 992px.
I would like the columns to show in this order > 1st,2nd,3rd,4th,5th,6th
rather than 1st 3rd 5th 2nd 4th 6th
How to achieve this. Thanks
I found something that worked for me, it aligned the elements very well for me. I'm happy with it so far. it required a little bit of dom element restructuring(less written code) but that's okay.
<div class="container" style="padding-top:20px">
<div class="row">
<div class="col-md-8" style="height:80px">1st</div>
<div class="col-md-4" style="height:40px">2nd</div>
<div class="col-md-8" style="height:40px">3rd</div>
<div class="col-md-4" style="height:80px">4th</div>
<div class="col-md-8" style="height:80px">5th</div>
<div class="col-md-4" style="height:30px">6th</div>
</div>
</div>
https://github.com/desandro/masonry
I don't know how it is implemented but it's working. below is a jsfiddle
https://jsfiddle.net/p5u976mt/
The outer containers col-md-8 and col-md-4 make it impossible to reorder it the way you want to with https://getbootstrap.com/docs/4.0/layout/grid/#order-classes
You could hide the two outer containers and show a third one only for narrow device-widths with the 6 elements in the right order (would be very easy but a bad practice, because you repeat yourself).
I am not sure what exactly your actual requirement is. You can try the following bootstrap structure to get this ordering correctly.
Fiddle goes here
.row {
background: #f8f9fa;
}
.row > div {
border: solid 1px #6c757d;
}
I am struggling adding spacing (or margin) between columns using the grid system in bootstrap. My html and css is below. I could not get any of the solutions posted online to work. The goal is spacing between col-8 and col-4. Any suggestions? Thanks!
HTML:
<div class="container">
<div class="row">
<div class="col-md-8">
hello
</div>
<div class="col-md-4">
<div class="row" align="center">
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/github_circle_black-128.png" class="icon-resize" alt="github">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_black-128.png" class="icon-resize" alt="linkedin">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_black-128.png" class="icon-resize" alt="twitter">
</div>
</div>
</div>
</div>
</div>
CSS:
.container {
max-width: 960px;
height: 100%;
}
here is what you're looking for:
gridGutterWidth
It's usual to download the raw (.scss or .less) versions of bootstrap, so you can control the css output at build time. If you don't use any of them, you may find the http://getbootstrap.com/customize/ comfortable.
You could apply inline by
<div class="col-md-4" style="padding-left:1em">
I have a bootstrap grid layout but the row is not occupying 100% width. I am using Bootstrap 4 alpha 6. Here is the HTML:
<div class="container-fluid">
<h1 class="center-text" id="heading">[Enter Heaading Here]</h1>
<div class="container">
<div height="100px" class="row border-show">
<div class="col-4" id="one"></div>
<div class="col-4" id="two"></div>
<div class="col-4" id="three"></div>
</div>
</div>
</div>
Here is the CSS:
.center-text{
text-align: center;
}
#heading{
padding: 60px;
}
.border-show{
border-style: solid;
border-color: black;
}
In case someone else comes across this and the answer doesn't solve their problem, my issue that was causing this was because I didn't realize I was adding a row and trying to set up columns in a Bootstrap navbar. navbar already has a grid-like system in it by default, so it seems you are pushing it over the edge if you try to add columns inside of it. They aren't necessary anyway.
So if this answer doesn't solve your problem, check to see if you are inside of another Bootstrap component that already handles spacing. You may be trying to double-delimit your content!
Remove it from the container. The container is not 100% width, and shouldn't be nested in another container.
The container class has this effect.
<div class="container">
<div class="row">
<div class="col-12">
div into <b>container</b> class
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
div into <b>container-fluid</b> class
</div>
</div>
</div>
This code will generate following image:
In my case even container-fluid also didnot work because I used row class with the container-fluid in the same div. So, I removed the row class from the parent div and inside that I created a child div and used row class. Then it worked.
<div class="container-fluid row">
<div class="col-12">
didn't work
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
worked
</div>
</div>
</div>
I have 2 different partial views that I am calling in my main view like this:
<div class="col-md-6">
#Html.Action("Chart", "Teams")
</div>
<div class="col-md-6">
#Html.Action("SeriesWinsChart", "Teams")
</div>
<div class="next-game">
<h3 class="text-center">The Next Game Is:</h3>
</div>
<br />
<div class="text-center">
<h3 style="color:red;">#ViewBag.NextGame</h3>
</div>
Now my problem is this:
All I have done is put background-color: green in my CSS for the class .next-game (honestly just to see what it looked like.. green is not what I am going to use)... I have gone into Inspect Element on IE and I cannot find the problem as to why the background is so big. I just want the background to be around The Next Game Is:
CSS:
.next-game{
background-color: green;
}
How do I shrink the background? I have tried width: 50%; height: 10px; //etc just to see the different changes but can't figure this out
UPDATE:
I have changed the HTML to:
<div class="next-game">
<h3 class="text-center">The Next Game Is:</h3>
<div class="text-center">
<h3 style="color:red;">#ViewBag.NextGame</h3>
</div>
</div>
<div class="col-md-6">
#Html.Action("Chart", "Teams")
</div>
<div class="col-md-6">
#Html.Action("SeriesWinsChart", "Teams")
</div>
This at least made the background render properly. So this has something to do with the partial views?
The most likely cause for this issue is that your twitter bootstrap columns have no wrapping row. You generally need all three (container, row, column) for it to render properly. What you're running into here is probably a clearfix issue. The columns are floated, which makes the next available non-floating element appear to "wrap" them. Below is a possible solution to the problem.
<div class="container">
<div class="row">
<div class="col-md-6">
#Html.Action("Chart", "Teams")
</div>
<div class="col-md-6">
#Html.Action("SeriesWinsChart", "Teams")
</div>
</div>
</div>
<div class="next-game">
<h3 class="text-center">The Next Game Is:</h3>
</div>
<br />
<div class="text-center">
<h3 style="color:red;">#ViewBag.NextGame</h3>
</div>
Other solutions include adding a .clearfix class to a wrapper for the columns or adding clear:both to .next-game.
You need
.next-game h3{
background-color: green;
}
(it's just for the header h3 inside the element with that class .next-game)
The following is my HTML:
<div class=container">
<div class="row">
<h2 class="text-center">Enter your name below</h2>
<div class="col-md-6 center">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
<div class="col-md-6 center">
<h3>Profile name: N/A</h3>
<h3>Status: Waiting for user input</h3>
</div>
</div>
</div>
My css is the following (along with bootstrap):
.profile-picture
{
max-width: 200px;
max-height: 200px;
}
.center
{
margin: 0 auto;
float: none;
}
This produces the following output:
The way I want it to display is as shown below:
How can I achieve this? Shouldn't they get displayed on the SAME line seeing as they are part of the same row? Each has a length of 6 so why don't they horizontally align?
The problem is you're removing the necessary float on the columns (by setting float:none to .center). Remove that .center class altogether, it's not needed. You are also missing row divs...
Note, I added a row around the the h2 tag as well. For ease-of-use and proper formatting, that tag needs to be wrapped as well. Helps keep the formatting in check. ;)
Also, you shouldn't have two <h3> tags one after another like that. Use <p> instead of the second h3 - or better yet, just use one <h3> tag and use <br /> to break the one h3 into two lines (see below).
<div class=container">
<div class="row">
<h2 class="text-center">Enter your name below</h2>
</div>
<div class="row">
<div class="col-md-6">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
<div class="col-md-6">
<h3>Profile name: N/A <br />
Status: Waiting for user input</h3>
</div>
</div>
</div>
Never apply any styles or classes to elements with grid classes, if you're not really know what you are doing. Use a nested div instead if you need to change something:
<div class=container">
<h2 class="text-center">Enter your name below</h2>
<div class ="row">
<div class="col-md-6">
<div class ="center">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
</div>
<div class="col-md-6">
<div class ="center">
<h3>Profile name: N/A</h3>
<h3>Status: Waiting for user input</h3>
</div>
</div>
</div>
</div>
With Bootstrap, you have to include a div with an class of row, so something like this:
<div class="row">
<div class="col-md-6 center">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
<div class="col-md-6 center">
<h3>Profile name: N/A</h3>
<h3>Status: Waiting for user input</h3>
</div>
</div>
See Bootstrap's documentation on their grid system.