i wanna ask something about display flex
<div class="container mx-auto">
<div class="d-flex">
<div class="bg-red-300 w-100 mr-3">halo</div>
<div class="bg-red-300 w-50 mr-3">halo</div>
</div>
</div>
how to display flex can manage width flex item with width 100% and 50% ?
Thankyou :)
In BS, if you want to have that kind of 2:1 ratio of width of elements, you'd have to use the grid system. Your above code will turn into:
<div class="container mx-auto">
<div class="row">
<div class="col-8 bg-red-300 mr-3">halo</div>
<div class="col-4 bg-red-300 mr-3">halo</div>
</div>
</div>
Here's how to use Flex's Bootstrap,
The 'col' has to be used to give the width of the box
<div class="container">
<div class="row">
<div class="col-6 bg-red-300">halo</div>
<div class="col-6 bg-red-300">halo</div>
</div>
</div>
Related
I can't figure out how to get the required result using Bootstrap 4 grid.
This is how the part of the site looks in desktop mode. 2, 3 and 6 are images while the rest are text.
This is how the same site should look like in mobile.
the HTML is:
<section class="col-12">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-12 col-sm-6 order-2 order-sm-1">
<divclass="row">
<div class="col-12">
<p></p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 order-1 order-sm-2">
<img src=""/>
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-12 col-sm-6">
<img src=""/>
</div>
<div class="col-12 col-sm-6">
<div class="row">
<div class="col-12">
<p></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-12 col-sm-6 order-2 order-sm-1">
<div class="row">
<div class="col-12">
<p></p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 order-1 order-sm-2">
<img src=""/>
</div>
</div>
</div>
</div>
</section>
Here is a link to the project: https://rohithandique.github.io/Rare-Monk-Website/ and for 4,5,6 in the css, I put:
position: relative;
top: -25%;
to get the desired result. but it leaves a wide gap in the bottom. So how do I change my Bootstrap classes to get the desired result? I am a beginner.
EDIT: Tried all solutions and found out that using CSS grid gave more flexibility in this situation as the positioning of HTML elements were fixed and bootstrap 4 doesn't allow such mixing.
You should use CSS Grid a modern API that replaces flex and older CSS stuff. You can achieve whatever layout you want. Keep in mind that is bidimensional.
It's the best you can get. Easy to learn.
Hey please try to use bootstrap fluid container in these way you will get the desired result you want for example.look up to the link https://getbootstrap.com/docs/3.4/css/
Bootstrap's grid are
display:flex
flex-direction:column
you cant style them that way you will have to use custom css for it !!!!
its as simple as that.
I am trying to align both of the boxes shown in the code below, using bootstrap flex and grid classes, but somehow both of them have different width.
I tried setting the width of both to width=200px; to see what happened, and flex items lose position.
<!-- total income -->
<div class="container">
<div class="budget__income d-flex justify-content-center mb-2">
<div class="row d-flex justify-content-center col-xs-1">
<div class="budget__income--text py-3">
<strong>Ingresos</strong>
</div>
<div class="budget__income--value py-3">
+ 4,300 </div>
<div class="buget__income--percentage py-3 pl-2 align-self-center ">
34%
</div>
</div>
</div>
<!-- total expense -->
<div class="budget__expense d-flex justify-content-center">
<div class="row d-flex justify-content-center col-xs-1">
<div class="budget__expense--text py-3">
<strong>Gastos</strong>
</div>
<div class="budget__expense--value py-3">
+ 4,300 </div>
<div class="buget__expense--percentage py-3 pl-2 align-self-center ">
22%
</div>
</div>
</div>
</div>
I expect to have both of the specified boxes aligned horizontally, and both having the same width.
Thank you so much,
try with table, table-row and table-cell display. Like:
<div style="display: table">
<div style="display: table-row">
<div style="display: table-cell">
content1
</div>
</div>
<div style="display: table-row">
<div style="display: table-cell">
content2
</div>
</div>
</div>
I'm trying to simply center justify and align two bootstrap columns inside a container. The columns are in different rows.
The grid layout is
<body style="height: 100vh;">
<div class="container">
<div class="row">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
the cards are just to outline the containers.
I'm aware there are MANY questions on vertical alignment, and I may have missed the one that contains the answer I need. But my take away from most of them is that the parent needs to have some height.
The following works just fine if you have only one row, because you can center the column in the 100% height row. But if you have two rows, it doesn't so well, since each column is centered in its own row, and the rows are each the height of the window.
<body style="height: 100vh;">
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row h-100 justify-content-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
I wish I could just move the justify-content-center align-items-center up to the container, but alas that doesn't seem to do anything.
So, please help me, how can I place these flush, one on top of the other, smack in the middle of the screen?
Here's a good way to do this using Bootstrap's build in flexboxes.
<div class="container d-flex h-100 flex-column">
<div class="flex-grow-1"></div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM A</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM B</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM C</div>
</div>
</div>
<div class="flex-grow-1"></div>
</div>
We have two buffer flex rows, with flex-grow-1. Each of these rows will expand (with the same weight) to fill the top and bottom portions equally. Each of the content rows in the middle will have the height of their content.
The end result is the ITEM cards centered both vertically and horizontally on the screen. Because they are within individual rows, you can adjust margins/padding as necessary (by default they cards end up next to each other vertically.
Example screenshot of the above code in bootstrap
You could potentially do this one with one row + column and an internal flexbox, but that gives you less control over how the individual cards appear in relation to each other.
EDIT: d-flex makes the container a flex container around it's child rows, and flex-column makes the children render and stretch vertically rather than horizontally.
Simplest solution is to make the rows 50% height instead...
<body style="height: 100vh;">
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row h-100 justify-content-center align-items-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
Demo: https://www.codeply.com/go/7POJtgNaQI
Or, the flexbox method would be to use Bootstrap flex-grow-1 class. Also you don't need the height on the body. Just use min-vh-100 on the container...
<div class="container d-flex flex-column min-vh-100">
<div class="row flex-grow-1 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row flex-grow-1 justify-content-center align-items-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
https://www.codeply.com/go/n1eL2Jakuo
Always give the height through the inner element height, If I will give the height on container class element, it won't work, so let the container depend on the inner element's height, So try like this.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-3">
<div class="col-12" style="min-height: 180px;">
<div
class="row bg-success position-absolute w-100 h-100 d-flex flex-row justify-content-center align-items-center">
<div class="col-6 pr-2">
<div class="card text-center">
hello
</div>
</div>
<div class="col-6 pl-2">
<div class="card text-center">
world
</div>
</div>
</div>
</div>
</div>
Hope you will understand this tiny mess, and so it would help you.
I have a simple table-esque layout in Bootstrap 3 as such (it's a "property grid):
<div class="row">
<div class="col-md-3">
<div id="propGrid">
<div class="row pgTable">
<div class="col col-md-12">
<div class="row pgGroupRow">
<div class="col col-md-12 pgGroupCell">Editor</div>
</div>
<div class="row pgRow">
<div class="col col-md-5 pgCell">Font<span class="pgTooltip" title="The font editor to use">[?]</span></div>
<div class="col col-md-7 pgCell"><input type="text" id="pg0font" value="Consolas" <="" input=""></div>
</div>
<div class="row pgRow">
<div class="col col-md-5 pgCell">Font size</div>
<div class="col col-md-7 pgCell"><span class="ui-spinner ui-corner-all ui-widget ui-widget-content"><input type="text" id="pg0fontSize" value="14" style="width:50px" aria-valuemin="0" aria-valuemax="20" aria-valuenow="14" autocomplete="off" class="ui-spinner-input" role="spinbutton"><a tabindex="-1" aria-hidden="true" class="ui-spinner-button ui-spinner-up ui-corner-tr"></a><a tabindex="-1" aria-hidden="true" class="ui-spinner-button ui-spinner-down ui-corner-br"></a></span></div>
</div>
<div class="row pgRow">
<div class="col col-md-5 pgCell">Font color</div>
<div class="col col-md-7 pgCell"><input type="text" id="pg0fontColor" value="#a3ac03" <="" input=""></div>
</div>
<div class="row pgGroupRow">
<div class="col col-md-12 pgGroupCell">Plugins</div>
</div>
<div class="row pgRow">
<div class="col col-md-5 pgCell">jQuery<span class="pgTooltip" title="Whether or not to include jQuery on the page">[?]</span></div>
<div class="col col-md-7 pgCell"><input type="checkbox" id="pg0jQuery" value="jQuery" checked=""></div>
</div>
<div class="row pgRow">
<div class="col col-md-5 pgCell">modernizr<span class="pgTooltip" title="Whether or not to include modernizr on the page">[?]</span></div>
<div class="col col-md-7 pgCell"><input type="checkbox" id="pg0modernizr" value="modernizr"></div>
</div>
<div class="row pgRow">
<div class="col col-md-5 pgCell">Framework<span class="pgTooltip" title="Whether to include any additional framework">[?]</span></div>
<div class="col col-md-7 pgCell"><select id="pg0framework"><option value="None">None</option><option value="angular" selected="">AngularJS</option><option value="backbone">Backbone.js</option></select></div>
</div>
<div class="row pgGroupRow">
<div class="col col-md-12 pgGroupCell">Other</div>
</div>
<div class="row pgRow">
<div class="col col-md-5 pgCell">iHaveNoMeta</div>
<div class="col col-md-7 pgCell"><input type="text" id="pg0iHaveNoMeta" value="Never mind..." <="" input=""></div>
</div>
<div class="row pgRow">
<div class="col col-md-5 pgCell">I am read only</div>
<div class="col col-md-7 pgCell"><label for="pg0iAmReadOnly" title="Label types use a label tag for read-only properties">I am a label which is not editable</label></div>
</div>
</div>
</div>
</div>
</div>
</div>
I've been trying with no success to vertically center the contents of the left column against the height of the right column.
Check out the Code pen at
http://codepen.io/anon/pen/rrvNaV
and take a look at the last row in particular.
I've tried adjusting the padding, but since the content of the right column has variable height, that doesn't seem like a good solution. The line-height adjustment I usually use seem to fail for similar reasons.
Any ideas on how to vertically center the contents of both columns, given it's row height (row height being determined by the content height in either column or a particular row)?
Vertically centering float-based content is very problematic. There are a handful of hacks to do it (using transformations or negative bottom margins), but it is far easier to use display table or flexbox for the layout.
Change the row to flexbox like this:
.pgRow {
background:yellow;
display: flex; /* make the row a flex container */
align-items: center; /* vertically center each flex item in the container */
}
Be sure to remove the height from the .va! Generally, you should not set heights on containers in CSS; doing so will only introduce a load of other problems.
For more options, check out http://howtocenterincss.com/. To get a handle on flexbox, check out this article on CSS Tricks. To really get a handle on all these things and how they work together (shameless plug alert), checkout my book.
I added align-items-center to my row class.
Example:
<div class="container">
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
The example's from the Bootstrap docs here
I want to have 2 divs besides each other for col-md and higher, while having them above each other for col-sm and lower. So I tried to use the push and pull feature as mentioned in the docs but somehow it's not working. What I'm trying to do is get the RIGHT div above the LEFT div on col-sm and lower, basically reversing the order.
What am I doing wrong?
<div class="container">
<div class="row">
<div class="col-sm-12 col-sm-push-12 col-md-7">LEFT</div>
<div class="col-sm-12 col-sm-pull-12 col-md-5">RIGHT</div>
</div>
</div>
Here's a fiddle: https://jsfiddle.net/ko7euh77/1/
You just need to think "mobile-first"..
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-push-7 col-md-5">RIGHT</div>
<div class="col-sm-12 col-md-pull-5 col-md-7">LEFT</div>
</div>
</div>
Demo: http://www.codeply.com/go/2SN4r7KGwV
Bootstrap 4 Update
The push pull class are now order-* (using flexbox) in Bootstrap 4.
https://www.codeply.com/go/l3BOOH6JM9
<div class="row">
<div class="col-md-5 order-md-2">
<div class="card card-body">RIGHT</div>
</div>
<div class="col-md-7 order-md-1">
<div class="card card-body">LEFT</div>
</div>
</div>
It totally depends on the version you are using, for bootstrap 4 and above you can push and pull like this:
one more thing here order doesn't mean to the grid of the scree it will be the no.
<div class="row">
<div class="col-sm-2 order-md-2 order-sm-1" >
<div >RIGHT</div>
</div>
<div class="col-sm-10 order-md-1 order-sm-2 ">
<div >LEFT</div>
</div>
</div>
Here are the bootstrap docs for further reading