I have got a very annoying problem with bootstrap. I need to divide the page into two parts, left side is my pic and right side is specification. I thought I can simply use row and col, so I have done this:
<div class="layoutProb">
<div class="container" style="width: 1920px;">
<div class="row" >
<div class="col-sm-7" >
<img src="../assets/Img/Beer.jpg" alt="..." class="pic"/>
</div>
<div class="col-sm-5" style="width: 600px;">
<table id="cart" class="table table-hover table-condensed" >
<thead>
<tr>
<th ><h1> The first <br>Tshirt>Here</span></h1></th>
</tr>
</div>
</div>
</div>
</div>
Here is my layout class:
.layoutProb {
top: 0px;
left: 0px;
width: 1920px;
height: 1080px;
}
I have attached the screen here to show what I mean. The gap between is too much. If I use float left then when I decrease the size of the page then the left side overflows, another problem is horizontal scroll and I want to get rid of it as well.
add a class when you need to remove spaces use it
.p-0{
padding-right:0;
padding-left:0;
}
in HTML write this class
<div class="row">
<div class="col-md-2 p-0">
//stuff here for this column
</div>
<div class="col-md-10 p-0">
//stuff here for columns
</div>
</div>
Also, you can use this method
Simple add .no-gutter class on row.
https://getbootstrap.com/docs/4.0/layout/grid/#how-it-works
Related
I have the following grid system in bootstrap v4:
<div class="container-fluid">
<div class="row">
<div class="col-sm-auto align-self-center">
<img src="test" class="logo img-responsive">
</div>
<div class="col-sm-auto align-self-center">
<table class="table-responsive">
<tbody>
<tr><td></td></tr>
</tbody>
</table>
</div>
</div>
</div>
This should have the image side-by-side with the table for screens larger than 'small' and stack them for screens smaller. This works perfectly.
Currently, everything is left-justified. I would like the row to be left justified when the columns are side-by-side (screen > "small"), but to be centred when the columns are stacked (screen < "small").
I have tried adding justify-content-center to the row, but this centres both configurations (until the screen reaches extra small, at which point it once again left-justifies...)
Not particularly helpful (because the screen is always small) fiddle: https://jsfiddle.net/aq9Laaew/133123/
The problem with using col-sm-auto is that the columns become full width on <sm screens, and therefore the table is full width which doesn't appear centered.
Instead, use col-auto col-sm mx-auto on the 2nd column so that it shrinks to the width of the table on <sm screens...
<div class="container-fluid">
<div class="row">
<div class="col-sm-auto text-center">
<img src="//gradientjoy.com/300x200" class="logo img-fluid">
</div>
<div class="col-auto col-sm mx-auto">
<table class="table-responsive">
<tbody>
<tr><td>test</td></tr>
</tbody>
</table>
</div>
</div>
</div>
https://www.codeply.com/go/0n3i9EGgS7
You should use .mx-lg-auto or .mx-md-auto classes (depending on your preferable breakpoint).
Documentation here.
You can overwrite the left/right margin on certain screen sizes using the ml-lg-0 mr-lg-0 classes (swap out 'lg' for the screen size you want the content to start being left justified at). That way you can use mx-auto to center content on small screens sizes but left justify it instead once the viewport reaches a certain width.
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
tbody {
display:inline;
width:100%;
}
#media only screen and (max-width: 768px) {
.row, table {
text-align:center;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-auto align-self-center">
<img src="test" class="logo img-responsive">
</div>
<div class="col-sm-auto align-self-center">
<table class="table-responsive">
<tbody>
<tr><td>test</td></tr>
</tbody>
</table>
</div>
</div>
</div>
Try this code...I have mentioned jsfiddle link also...It works for you.
Added new styles are as below,
tbody {
display:inline;
width:100%;
}
#media only screen and (max-width: 768px) {
.row, table {
text-align:center;
}
}
https://jsfiddle.net/Sampath_Madhuranga/2sk5bf7t/1/
Suppose you have a two-column layout using Twitter Bootstrap, in which you want to have specific rows vertically aligned with each other:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Column 1</h2>
<p>Optional content of variable height.</p>
<p><strong>Align this vertically...</strong></p>
</div>
<div class="col-sm-6">
<h2>Column 2</h2>
<p><strong>...with this</strong></p>
</div>
</div>
</div>
Vertical alignment is feasible with table layouts, however, sizing and responsive behaviour of Bootstrap's columns is lost:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<div class="container">
<table class="row">
<thead>
<tr>
<th scope="col"><h2>Column 1</h2></th>
<th scope="col"><h2>Column 2</h2></th>
</tr>
</thead>
<tbody>
<tr>
<td><p>Optional content of variable height.</p></td>
</tr>
<tr>
<td><strong>Align this vertically...</strong></td>
<td><strong>...with this</strong></td>
</tr>
</tbody>
</table>
</div>
Another option is to split rows, however, the layout folds in wrong order on smaller resolutions.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Column 1</h2>
</div>
<div class="col-sm-6">
<h2>Column 2</h2>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<p>Optional content of variable height.</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<strong>Align this vertically...</strong>
</div>
<div class="col-sm-6">
<strong>...with this</strong>
</div>
</div>
</div>
How do you achieve the same result while still maintaining the behaviour of Bootstrap's columns? Is using table layout the way to go or is it a dead-end? Is it otherwise possible without resorting to JavaScript to position a row to a computed offset?
EDIT: I aim to have the top of the rows aligned as is the case in the table layout.
For what I know, I would test these solutions.
Solution 1 : Using Javascript (Jquery if you want) to detect the height of the left and the right div, and to tell them to have the same height.
You can apply this solution on the second content div to make the espace above your bold text having the same height.
Or to add.. for example as margin-top as needed in the smaller div (with bold text which need to be aligned) after comparing the heights of both.
Anyway, if you have both of theirs heights you will have enought informations to find a way. Multiples solutions are possible here, I let you find the better one for your context and needs.
<div class="container">
<div class="row">
<div class="col-sm-6 leftcolumn">
<h2>Column 1</h2>
<div class="astallas"><p>Optional content of variable height.</p></div>
<p><strong>Align this vertically...</strong></p>
</div>
<div class="col-sm-6 rightcolumn">
<h2>Column 2</h2>
<div class="astallas"></div> // make this empty div have the same height that the left one with variable content
<p><strong>...with this</strong></p>
</div>
</div>
</div>
Solution 2 (but with some browsers incompatibilties) : Use Flexbox <3 which is a native CSS3 fonctionnaly that give you a easy way to have your wanted divs' positions.
http://flexboxfroggy.com/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I think that both of these works with bootstrap and will respect responsive needs.
You can do something like this to get rows of equal heights:
<style>
.centered {
text-align: center;
font-size: 0;
}
.centered .myheight{
float: none;
display: inline-block;
text-align: left;
font-size: 13px;
vertical-align: top;
margin-bottom: 5px; /*add this if you want to give some gap between the rows. */
}
</style>
<div class="container-fluid">
<div class="row centered">
<div class="col-sm-4 myheight">
Some content
</div>
<div class="col-sm-4 myheight">
Some content ...<br>
Some more content
</div>
<div class="col-sm-4 myheight">
Some content
</div>
<div class="col-sm-4 myheight">
Some content
</div>
</div>
</div>
Below is my code. I divided the whole page by height, 20%, 50%, 30%;
But for some reason the table in the SECOND SECTION is not getting the whole 50%. only maybe 10%. It is resided in a row-fluid. If I put overflow hidden, only the header will be visible.
css:
.body-wrapper{
height:100%;
}
.body-wrapper > fieldset div:nth-of-type(1){
height:20%;
}
.body-wrapper > fieldset div:nth-of-type(2){
height:40%;
}
.body-wrapper > fieldset div:nth-of-type(3){
height:30%;
}
html:
<div class = "main-Frame container-fluid"> <!-- mid section -->
<div class="well row-fluid" >
<div class="body-wrapper">
<fieldset>
<div> <!-- FIRST SECTION -->
<legend>User Profile</legend>
<div class="row-fluid">
<div class="col-md-2 text-right">User Name
</div>
<div class="col-md-4" >
<input style="width:90%;"type="text" placeholder="username"/>
</div>
<div class="col-md-2 text-right">User Email
</div>
<div class="col-md-3">kkk#gmail.com
</div>
<div class="col-md-1">
<input type="checkbox"/>Active
</div>
</div>
</div> <!-- END OF FIRST SECTION -->
<div> <!-- SECOND SECTION -->
<legend>Application Defaults</legend>
<div class = "container-fluid" style="height:100%;">
<div class="row-fluid" style="height:100%;">
<div class="col-md-10" style="height:100%;">
<div class="table-responsive user-table">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>App</th>
<th>Type</th>
<th>Setting</th>
<th>check</th>
</tr>
</thead>
<tbody>
<tr>
<td>first</td>
<td>first</td>
<td>first</td>
<td>first</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</div> <!-- END of SECOND section -->
<div> <!-- LAST section -->
<legend>ChangePassword</legend>
</div> <!-- END of footer section -->
</fieldset>
</div>
That problem here is that your CSS selectors are too broad - the selector .body-wrapper > fieldset div:nth-of-type(1) matches both the intended target (the first <div> directly under the fieldset, and the more deeply nested <div class="table-responsive user-table">. (On all preceding elements that also match, you've used inline styles to force their heights to 100%, so they don't exhibit the same problem behaviour.)
To address this issue, simply narrow down the range of elements matched by your selectors by increasing their specificity - for example, target only immediate child <div> elements under the fieldset, rather than all descendant ones:
.body-wrapper {
height: 100%;
}
.body-wrapper > fieldset > div:nth-of-type(1) {
height: 20%;
}
.body-wrapper > fieldset > div:nth-of-type(2) {
height: 40%;
}
.body-wrapper > fieldset > div:nth-of-type(3) {
height: 30%;
}
Hope this helps! Let me know if you have any questions.
I need to create a list of divs as looking like below sample:
I'm using Bootstrap grid system and augularjs. I create divs dynamically, using angularjs ng-repeat directive.
What I want is an endless list of divs containing attribute 'class"col-md-2"' inside a div containing attribute 'class"col-md-12"'. Then I want to use a scrollbar to scroll all the divs in the outer div.
Example code:
<div class="col-md-12" scrollablebar>
<div ng-repeat="newview in newviewslist" class="col-md-2">
Here goes the date from newview...
</div>
</div>
This doesn't work and "off course" is creating new rows each time ng-repeat is creating a div.
How do I prevent that from happen?
I solved the problem like this:
<div class="container-fluid">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 col-xs-11" scrollablehorizontal>
<table class="borderless">
<tbody>
<tr>
<td ng-repeat="newviews in newviews" valign="top" class="shadowbox" scrollableverticall>
<p>
all the things...
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-1"></div>
</div>
</div>
in a col-md-12, there can be 6 x col-md-2 after that there is a linebreak.
try to change "col-md-12" to "row-fluid"
<div class="row-fluid" scrollablebar>
<div ng-repeat="newview in newviewslist" class="col-md-2">
Here goes the date from newview...
</div>
</div>
and add css:
.row-fluid{
white-space: nowrap;
}
.row-fluid .col-md-2{
display: inline-block;
margin-left:10px;
}
jsfiddle
I'm working on a layout that has multiple tables that I'm trying to put in a much easier to read format than straight down the page. I need different sized cells per row so I'm using the div tag, but I also need the tables within the div tag to be vertically aligned so I'm using the display:table-cell style.
The problem I'm running into is that the first "table row" operates exactly as I'd like it to, but the second table row just smashes everything together to the left. I've made a quick JSFiddle to show what I'm talking about. What am I missing? Or what am I doing wrong?
http://jsfiddle.net/K8AJn/
HTML:
<div class="TR">
<div class="TD" style="width:40%;">
Info
</div>
<div class="TD" style="width:20%;">
Some info
</div>
<div class="TD" style="width:40%;">
More info
</div>
</div>
<br />
<div class="TR">
<div class="TD" style="width:50%;">
Info 1
</div>
<div class="TD" style="width:50%;">
Info 2
</div>
</div>
<br />
CSS:
div.TR {
background-color:blue;
display: table-row;
}
div.TD {
background-color:red;
display: table-cell;
vertical-align: middle;
border: 1px solid black;
}
The problem is that your table rows[sic] and cells don't have a point of reference. Ordinarily they'd rely on the parent table to define their positioning.
To get your TDs to behave as expected, wrap the entire block of TRs in another div, with a class of TABLE and use the following:
.TABLE {
display: table;
}
HTML:
<div class="TABLE">
<div class="TR">
<div class="TD" style="width:40%;height:300px;">Info</div>
<div class="TD" style="width:20%;height:300px;">Some info</div>
<div class="TD" style="width:40%;height:300px;">More info</div>
</div>
<div class="TR">
<div class="TD" style="width:50%;height:300px;">Info 1</div>
<div class="TD" style="width:50%;height:300px;">Info 2</div>
</div>
</div>
Here's a Fiddle
It should be said, however, that this sort of approach to layout is only really appropriate for fringe cases. There are much cleaner ways of achieving flexible layouts (and inline styles should be avoided like the plague).