How can we make two div that their display in small screens be block . and in large screens be inline !?
also I want to their width be 100% of the screen
You should probably do something like this :
<div class="w-100 d-block d-md-inline">My first div</div>
<div class="w-100 d-block d-md-inline">My second div</div>
But you have to know that you can't define a size to an inline element. I think you would like to use "inline-block" instead of "inline".
Related
Basically I need 3 divs to align on small width (<576px) like in the top of image below and on rest of the widths (>576px) like in the bottom on the image below.
How it can be achieved with bootstrap flexbox classes?
I'm assuming base set is:
<div class="d-flex">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
I don't see .column and .row classes being used because A and B don't share same div on small and large screens... experimented with differnt classes with no success.
For the alignment top of the image. Use align-content utilities on flexbox containers to align flex items together on the cross axis. You can choose
<div class="d-flex align-content-start flex-wrap">...</div>
for the content top of the image and for bottom you can choose
<div class="d-flex align-content-end flex-wrap">...</div>
Here, I am assuming that image would be in different <div> and For the responsive behaviour you can use .order classes
Let's say I have this structure:
<div className="row">
<div class="col-sm">
<div>TEST</div>
</div>
<div class="col-sm">
<div>TEST<br>TEST<br>TEST</div>
</div>
</div>
Basically, I know how to make the columns of the same height (using the .equal class on the row) however, what I need is the child div of the column to also be of the same height. Currently, if one of the child divs is shorter, it won't look aligned because I set the background color to be in the child div and not on the col-sm div.
I cannot set the background on col-sm for flexibility reasons. E.g. I may need to use that child div component in another section that doesn't use 'col-sm'.
Mine currently is the one on top, I want it to become the one at the bottom:
A situation like this, for me, would be time to turn to jQuery or a plugin such as MatchHeight.
matchHeight makes the height of all selected elements exactly equal.
I am using bootstrap columns, and want the two columns col-md-4 and col-md-8 to be the same height no matter the content. As col-md-4 content will change.
<div class="col-md-12">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
A google maps is the only thing in the col-md-8 and the div id map within has the height of 600px.
Add display: flex to the container col-md-12.
You can set a max-height and it will not exceed that height. Since your map is 600px in height, you can set your col-md-4 to that height, and let the content overflow.
I made a Codepen example
Is this what you wanted?
I have a set up in wordpress using bootstrap what follows:
<div class="container">
<div class="row">
<div id="NEEDS TO BE FULL WIDTH>
</div>
</div>
</div>
I would like the background of the "NEEDS TO BE FULL WIDTH" div be full browser width but not sure how. If I make it more the 100% width it makes a horizontal scroll. Any ideas?
You can have multiple .container elements inside your html. If you change the .container into a container-fluid the content of the container will take up 100%
If you only want the background to be full width, but you want the content to be constrained by the .container (at most about 1140 pixels wide) then surround the .container with another <div> and put the background-image on that element.
I am newbie with bootstrap gridline system so I got stucked when I tried to create that (advanced?) gridview:
So my problem is that I do not know how to organize blocks in rows, because some blocks must have difeerent height, for example height of block 5. should have the same size as blocks 3. and 2. together.
Is that even possible? Also there should be some space between blocks, so background image should fill those space.
Please help me out.
What you'll want to do is place divs 2, 3, and 4 in their own container div (with the class .col-md-3) and 5 and 6 in another container div (with the class .col-md-3). Make div 1 have the .col-md-6 class.
Edit: You should use a media query to make it a fixed height in the desktop, then a flexible height when it's mobile.
#media screen and (max-width: 980px) { #div2 { height: 500px; (or whatever)}}
I think the most efficient way to do this is to simply use a single row with three columns. Your divs can stack inside the appropriate columns, and you can define the heights for each one. You can see it in action here: http://jsfiddle.net/StSmith/Z9SpM/1/
<div class="container">
<div class="row">
<div class="col-lg-6">
<div id="box1">1</div>
</div>
<div class="col-lg-3">
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
</div>
<div class="col-lg-3">
<div id="box5">5</div>
<div id="box6">6</div>
</div>
</div>
A simple way to do this is to declare the divs in the order you listed, and then apply a simple float: left. If you define the heights of each div manually it should all fit into place!
Rachel's got the right idea. You really just need to nest rows into a container, then use CSS to adjust the heights.