So, as of right now, there are 3 boxes of span2 and height 140px, and 1 box of span6 and height 400px.
Since there is so much space left below the 3 small boxes, I want to add 3 more boxes of same span and same height.
Here is my code.
<div class="row-fluid"> <!-- Only required for left/right tabs -->
<div class="span2 ">
<div class="thumbnail" style="height:140px">
<p></p>
</div>
</div>
<div class="span2">
<div class="thumbnail" style="height:140px">
<p></p>
</div>
</div>
<div class="span2">
<div class="thumbnail" style="height:140px">
<p></p>
</div>
</div>
<div class="span6">
<div class="thumbnail" style="height:400px">
<div id="pie_graph"></div>
</div>
</div>
</div>
Here is the snapshot.
I want to utilize the vacant position over here.
I tried making another div of row-fluid and then 3 boxes of span2 but they come below the above div, leaving the area vacant.
How do I do that?
You need to wrap the span2's in a span6. Add 2 fluid rows and rename the span2 to span4 (fluid-rows are relative)
Here is an example: http://bootply.com/98914
Related
I have the following html code to place an image next to div as in facebook comments:
<div className="row">
<div className="col-sm-1">
<img
className="img-thumbnail"
src="image.jpg" />
</div>
<div className="col-sm-11">
<div className="bg-light rounded p-1 pl-2">
<span className="font-weight-bold text-primary">content</span>
<div>
//buttons
</div>
</div>
</div>
</div>
However, this use of grid creates a space in the first div (col-sm-1) since the image size is smaller than the allotted width on the div. You can see the problem visually below. Any suggestions to mitigate this?
UPDATE
When using col-sm-auto, there is always a space left from the right because of col-sm-11, as you can see in the image:
You can use col-sm-auto instead of col-sm-1 which will shrink the column to the width of the content (the image). Also remove the left or right padding on the columns.
https://www.codeply.com/go/SLirjy4KDw
<div class="container">
<div class="row">
<div class="col-sm-auto pr-0">
<img class="img-thumbnail" src="//placehold.it/40">
</div>
<div class="col-sm-11 pl-0">
<div class="bg-light rounded p-1 pl-2">
<span class="font-weight-bold text-primary">content</span>
<div>
//buttons
</div>
</div>
</div>
</div>
</div>
You can use two div with d-inline as class. As these spaces will disappear
https://getbootstrap.com/docs/4.3/utilities/display/
I want to add Bootstrap popover with content body in which I want two links named-"Update Profile" and "Logout" in content body. And this Popover I want to apply on a whole div section (div width around 100px and height=70px). So can anyone please help me !! Thank you !!
//Main Row starts of div section where i want to apply popover
<div class="row">
<div class="col-sm-1">
<li><img class="rounded-circle img-responsive" src="https://s3.eu-central-1.amazonaws.com/no-user-image.png" alt="image" style="width: 40px; margin-left: 10px" > </li>
</div>
<div class="col-sm" style="margin-left: 35px">
//second row starts in between a main row(of second column i.e just defined above with margin-left:35px )
<div class="row">
<div class="col-sm"><h4 class="small"> Amy Jackson </h4>
<div class="row">
<div class="col-sm"><h2 class="small" >amy#gmail.com</h2></div>
</div>
</div>
</div>
</div>
</div>
I'm having trouble with bootstrap's columns.
The problem is that col-xs-8 padding exceeds the parent row width and creates a horizontal scroll bar. But if I remove the padding then col-xs-8 is pulled right by the amount of padding removed. For example when padding is 15px and I remove it the col-xs-8 is moved right by the same amount.
My HTML
<div ng-cloak>
<div class="row">
<div ng-style="{'margin-left':marginLeft}" class="col-xs-4">
<div class="row">
<div class="col-xs-4">
<ul class="nav nav-tabs">
<!--tabs-->
</ul>
</div>
</div>
</div>
<div class="col-xs-8">
<div id="canvasContainer">
<canvas></canvas>
</div>
</div>
</div>
</div>
I don't want to use overflow-x:hidden.
There is problem with
<div ng-style="{'margin-left':marginLeft}" class="col-xs-4">
As much you will give margin-left it will go right..You need to give padding-left in left div to control this structure.
Guys I have three divs in this setup: I'm not sure if you're familiar with this bootstrap css but i should give it a try:
<div class="row-fluid">
<div class="span4"> A graph here </div>
<div class="span4"> A graph here </div>
<div class="span4"> A graph here </div>
</div>
<div class="row-fluid">
<div class="span4"> Another graph here </div>
<div class="span4"> Another graph here </div>
<div class="span4"> Another graph here </div>
</div>
span4 will make the three divs fit to the whole page proportionally. So the position is the three graphs will position each other to the top div side by side, and another three graphs below it.
My problem is, when i resize the browser window, the graphs will be under each other vertically, like they have their own container now. How to make those graphs, retain their side by side position?
you can do the following:
<div class="row-fluid">
<div class="third"> A graph here </div>
<div class="third"> A graph here </div>
<div class="third"> A graph here </div>
</div>
<div class="row-fluid">
<div class="third"> Another graph here </div>
<div class="third"> Another graph here </div>
<div class="third"> Another graph here </div>
</div>
and css:
.third{
float:left;
width:33.33%;
}
You need to put them in divs like so -
<div class="row">
<div class="col-xs-4">
graph1
</div>
<div class="col-xs-4">
graph2
</div>
<div class="col-xs-4">
graph3
</div>
</div>
Each rows divs should add up to 12 to fill that row completely. Where the col-X is on your div class= represents when your divs will stack vertically instead of horizontally. So if you had col-sm-4 your divs would stack vertically on the bootstrap "small" resolution media query. By setting them as col-xs-4 each row will stay horizontal on the small resolutions.
Also check out these resources
Bootstrap official documentation
Understanding BootStrap grid system for beginners
I'm attempting to correctly vertically align offsetting elements using Twitter Bootstrap with a fluid grid. (Note: Grid is customized to 30 columns)
Considering the red boxes, this is the attempted div placement: http://imgur.com/IkB2G
This is the current actual placement with my code: http://imgur.com/oJ2mG
Here is the code I am using. Unsure how to get the lower red box to move into the empty space above it, per the images.
<div class="container-fluid nomargin">
<div class="row-fluid span30 nomargin"><div style="height:10px"></div></div> <!-- Vertical spacing between menu and content-->
<div class="row-fluid">
<div class="span4"></div>
<div class="span16 white-box">
<!--Body content-->
<div style="height:100px"></div>
</div>
<div class="span6 white-box">
<!--Body content-->
<div style="height:300px"></div>
</div>
<div class="span16 white-box">
<!--Body content-->
<div style="height:100px"></div>
</div>
</div>
You need to think of it as 2 columns, and in the left column you have nested rows. I can't make out the proper sizes from the code you posted. But hopefully this code will give you some inspiration.
<div class="row">
<div class="span18">
<div class="row">
<div class="span18">This is a row on the left side.</div>
</div>
<div class="row">
<div class="span18">This is a row on the left side.</div>
</div>
</div>
<div class="span12">
This is the content on the right side.
</div>
</div>