I'm trying to change the order of columns on sm resolutions/devices in Bootstrap 4.1 but unfortunately nothing is happening. I'm using order prefix for Bootstrap 4.1. My html code looks like this. Can somebody help?
<div class="container-fluid office-spaces">
<div class="col-md-12 col-xs-12 first-layout">
<div class="col-md-6 order-2 order-md-1">
<div class="office-spaces-slider">
<div class="img-wrapper">
<img class="img-responsive" src="theme/images/interior2.jpg" alt="interior2">
</div>
</div>
</div>
<div class="col-md-4 order-1 order-md-2">
<div class="col-md-6 col-xs-12">
<hr>
<h3>OFFICE SPACES</h3>
</div>
<div class="col-md-6 col-xs-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis nibh
nibh, quis vehicula neque suscipit at. Sed dictum, sapien ut sagittis posuere,
massa metus vulputate lorem, ac egestas erat ante et lorem. Aenean facilisis
tincidunt lectus, tristique egestas erat fermentum nec. Vivamus vestibulum
metus et dui posuere convallis.
</p>
</div>
</div>
<div class="col-md-2 empty order-3 order-sm-3"></div>
</div>
</div>
In bootstrap 4, the column formats are as follows:
col-* --> mobile portrait mode
col-sm-* --> mobile landscape mode
col-md-* --> ipad portrait mode
col-lg-* --> ipad landscape mode
col-xl-* --> laptop mode,desktop modes
So you should use below format to be responsive in all devices:
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
</div>
and also always put the .row class after the .container class line:
<div class="row">
//ur column classes goes here
</div>
Related
I need to layout a row so that the background of the row expands outside of the row area.
The required layout is in the picture, I want to have the extra white area before the actual text of the row.
When I start a new row and set it's background to white, only the area where the text start is white .
In ur app.css
body{
background-color:white !important;
}
this sets the page background to white
Your HTML structure can look like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<!--
main: semantic distinction between nav, main, section, ...
bg-light: bs utility: override background-color
-->
<main class="bg-light" role="main">
<!--
section: semantic distinction between sections
typically to create components for CMS integration
-->
<section class="some-container-component my-3">
<div class="container">
<div class="row py-3">
<div class="col">
<p>Provide as much detail as possible about your question and what you've already tried. For this question specifically, your current HTML structure can boost your responses and potentially be more beneficial to future SO users.</p>
</div>
</div>
</div>
</section>
<section class="some-fluid-component my-3">
<!-- container-fluid: stretch full-width -->
<div class="container-fluid">
<div class="row py-3">
<!-- bg-white: override background-color -->
<!-- px-0 px-sm-3: fix on small screen alignment -->
<div class="col bg-white px-0 px-sm-3">
<!-- container: align the content -->
<div class="container">
<div class="row py-3">
<div class="col">
<h2 class="text-uppercase">Study history</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id lectus egestas, tincidunt nisl tristique, congue urna. Vestibulum vel iaculis tortor, non finibus eros. Donec nec bibendum mauris. Vivamus maximus velit et vulputate ullamcorper.
Integer sit amet sem vitae nibh auctor blandit vitae sit amet est. Mauris porttitor a nibh eu fringilla. Integer imperdiet rutrum aliquam. Pellentesque vel dictum lectus, vitae interdum tellus. Nullam consequat lorem a venenatis consequat.
Vivamus dictum nunc eget suscipit volutpat. Mauris nec elit et ante efficitur pellentesque.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
Hope this suits your needs.
I have this simple bootstrap content and I wanted to make the second column fill up the space
Code
<div id="app">
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<div class="content">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">First Column</h5>
<p class="card-text">Curabitur accumsan turpis pharetra accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximusaugue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.Curabitur accumsan turpis pharetra accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximusaugue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti</p>
</div>
</div>
</div>
<div class="col-sm-6 ">
<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Second Column needs to take up the remaining space</h5>
<p class="card-text">additional content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
https://codepen.io/anon/pen/mQPdLj/
So how do I make it without using a specific height for second column? The first column can take up any space and the other needs to fill it even if the content is less. I tried flex-grow and flex-fill but didn't work for me.
You can make the column flex and make the card flex-grow:1:
.col-sm-6 {
display:flex;
flex-direction:column;
}
.card {
margin: 1rem 0;
background: #eff2fb;
flex-grow:1;
}
Updated pen
There's also a ready bootstrap solution.
Add d-flex align-items-stretch classes to elements having col-sm-6.
<div class="content">
<div class="container">
<div class="row">
<div class="col-sm-6 d-flex align-items-stretch">
// ...
</div>
<div class="col-sm-6 d-flex align-items-stretch">
// ...
</div>
</div>
</div>
</div>
See working code here: https://codepen.io/anon/pen/mQPyWY
This also work add class "d-flex align-items-stretch" both column.
I have the following tiling setup. How do I go about filling the rest of the space that is available under the first tile with text Some Text to match the height of the two narrower tiles that follow? I'd like to expand the content area below the image to the height of the two tiles that follow to the right, have them all even.
<div class="tile is-ancestor">
<div class="tile is-parent is-6">
<div class="tile is-child ">
<figure>
<img src="https://bulma.io/images/placeholders/640x320.png">
</figure>
<div class="box">
<h1 class="title">One</h1>
<h6 class="subtitle is-7">Some Text</h6>
<nav class="level">
<div class="level-left">
<div class="level-item">
<font-awesome-icon :icon="iconUser" transform="shrink-3" class="icon-violet" />
dd
</div>
<div class="level-item">
Today
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child ">
<figure>
<img src="https://bulma.io/images/placeholders/640x320.png">
</figure>
<div class="box">
<h1 class="title">One</h1>
<h6 class="subtitle is-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque dictum semper. Donec ornare ullamcorper velit, sagittis venenatis neque varius mattis. Suspendisse et lectus sed neque tincidunt convallis. Curabitur feugiat diam non tortor
hendrerit, id mattis dui laoreet...</h6>
<nav class="level">
<div class="level-left">
<div class="level-item">
dd
</div>
<div class="level-item">
Today
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child ">
<figure>
<img src="https://bulma.io/images/placeholders/640x320.png">
</figure>
<div class="box">
<h1 class="title">One</h1>
<h6 class="subtitle is-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque dictum semper. Donec ornare ullamcorper velit, sagittis venenatis neque varius mattis. Suspendisse et lectus sed neque tincidunt convallis. Curabitur feugiat diam non tortor
hendrerit, id mattis dui laoreet...</h6>
<nav class="level">
<div class="level-left">
<div class="level-item">
dd
</div>
<div class="level-item">
Today
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
CSS
img
height: 160px
width: 100%
display: block
object-fit: cover
I have a list article in my blog. Show three columns.
The problem is: when the title of the article has 3 line. The columns are pushed down if have 4 article.
Like this:
article 1 article 2 article 3
article 4
It should be like:
article 1 article 2 article 3
article 4
My code like:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-4 pb-90">
<div class="post-prev-title">
<h3>New trends in web design</h3>
</div>
<div class="mb-30">
Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4 pb-90">
<div class="post-prev-title">
<h3>10 The article have 2 line, it will break four item in this </h3>
</div>
<div class="mb-30">
Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4 pb-90">
<div class="post-prev-title">
<h3>New trends in web design</h3>
</div>
<div class="mb-30">
Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4 pb-90">
<div class="post-prev-title">
<h3>New trends in web design</h3>
</div>
<div class="mb-30">
Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
</div>
</div>
</div>
</div>
Note: click run code -> full page to show.
Or see my pen: https://codepen.io/vanloc/pen/RZqVXR
Have any method to resolve this problem?
The title is defined by the user, I can't control that.
You can Try Something Like This. Using this Multiline Ellipses
CSS
.post-prev-title h3
{
display: block;
display: -webkit-box;
-webkit-line-clamp: 1;/*restricting to 1 line*/
-webkit-box-orient: vertical;
overflow: hidden;
}
You can use a clearfix div to set the row correctly if the heights are uneven!
An example of that is documented here: https://getbootstrap.com/docs/3.3/css/#grid-responsive-resets
Or if you can use a LESS/SCSS mixin, that's demonstrated here: https://getbootstrap.com/docs/3.3/css/#less-mixins-clearfix
Here is that code snippet with the clearfix in. Please let me know if this isn't the solution you were looking for. Thanks!
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-4 pb-90">
<div class="post-prev-title">
<h3>New trends in web design</h3>
</div>
<div class="mb-30">
Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4 pb-90">
<div class="post-prev-title">
<h3>10 The article have 2 line, it will break four item in this </h3>
</div>
<div class="mb-30">
Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4 pb-90">
<div class="post-prev-title">
<h3>New trends in web design</h3>
</div>
<div class="mb-30">
Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
</div>
</div>
<!-- CLEARFIX DIV -->
<div class="clearfix visible-lg visible-md-block"></div>
<div class="col-sm-6 col-md-4 col-lg-4 pb-90">
<div class="post-prev-title">
<h3>New trends in web design</h3>
</div>
<div class="mb-30">
Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
</div>
</div>
</div>
</div>
I have been trying to set up a grid using bootstrap 3 where all the columns will have the same height even with different content sizes - which I have accomplished using flexbox. But now I am trying to add a solid border to the bottom of each item in the grid and I just can't get it to work (I want a border on the bottom, with a gutter between grid elements).
I can do it easily on the top like: https://codepen.io/Wafflenaut/pen/dvzWzb
<div class="container-fluid">
<div class="row" style="display:flex; flex-flow: row wrap;">
<div class="col-xs-12 col-sm-4" >
<div style="border-top:5px solid; border-top-color:#df5400;">
But when I try it on the buttom I get a result like: http://codepen.io/Wafflenaut/pen/perPWL
<div class="container-fluid">
<div class="row" style="display:flex; flex-flow: row wrap;">
<div class="col-xs-12 col-sm-4" >
<div style="border-bottom:5px solid; border-bottom-color:#df5400;">
If I try it directly on the column divs I get a solid bar. So - I basically need to either get a gutter functioning between columns or to get a nested div to go full height. I’ve tried a number of solutions (various padding tricks, vh, etc.), which tend to either not work or to break responsiveness.
And the kicker - this is within a CMS which I lack any access to the css or js files - so everything I do has to be workable inline from within a section of the html body.
Any suggestions for avenues of attack?
You can add display: flex to the div with class="col-xs-12 col-sm-4"
codepen
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row" style="display:flex; flex-flow: row wrap;">
<div class="col-xs-12 col-sm-4" style="display:flex;">
<div style="border-bottom:5px solid; border-bottom-color:#df5400;">
<p>replace me</p>
<h2>Item 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu nisi fermentum, mollis massa quis, scelerisque elit. Donec nec viverra.</p>
</div>
</div>
<div class="col-xs-12 col-sm-4" style="display:flex;">
<div style="border-bottom:5px solid; border-bottom-color:#df5400;">
<h2>Item 2</h2>
<p>replace me</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris laoreet lectus est. Fusce lobortis, velit sed finibus volutpat, magna nibh porttitor justo, at ornare quam nunc eu nulla. Fusce lacinia.</p>
</div>
</div>
<div class="col-xs-12 col-sm-4" style="display:flex;">
<div style="border-bottom:5px solid; border-bottom-color:#df5400;">
<p>replace me</p>
<h2>Item 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu nisi fermentum, mollis massa quis, scelerisque elit. Donec nec viverra.</p>
</div>
</div>
<div class="col-xs-12 col-sm-4" style="display:flex;">
<div style="border-bottom:5px solid; border-bottom-color:#df5400;">
<h2>Item 4</h2>
<p>replace me</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu nisi fermentum, mollis massa quis, scelerisque elit. Donec nec viverra.</p>
</div>
</div>
<div class="col-xs-12 col-sm-4" style="display:flex;">
<div style="border-bottom:5px solid; border-bottom-color:#df5400;">
<h2>Item 5</h2>
<p>replace me</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu nisi fermentum, mollis massa quis, scelerisque elit. Donec nec viverra.</p>
</div>
</div>
<div class="col-xs-12 col-sm-4" style="display:flex;">
<div style="border-bottom:5px solid; border-bottom-color:#df5400;">
<p>replace me</p>
<h2>Item 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris laoreet lectus est. Fusce lobortis, velit sed finibus volutpat, magna nibh porttitor justo, at ornare quam nunc eu nulla. Fusce lacinia.</p>
</div>
</div>
</div>
</div>
Apply a height of 100% to each of the inline styles.
<div class="container-fluid">
<div class="row" style="display:flex; flex-flow: row wrap;">
<div class="col-xs-12 col-sm-4" >
<div style="border-bottom:5px solid; border-bottom-color:#df5400; height: 100%">