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.
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.
Regarding the input-groups-buttons bootstrap 3 feature :
https://getbootstrap.com/components/#input-groups-buttons
I would like to know how can I create a CSS that reproduced the same feature for panel-heading.
At this time, I have a button inside the panel heading (which I had to change a little CSS so it can fit in the panel-heading).
http://www.bootply.com/TjI7cyaYIu (without my little CSS hack)
So I want this button to be displayed the same way an input-group-button is.
A similar question may have been posted here : Bootstrap input-group-addon icons for non-inputs but without any relevant answers.
I know this is not a bootstrap feature and my CSS skills are pretty low so I hope someone can help me !
Try something like this :) should work for u.
<div class="panel panel-default">
<div class="panel-heading">
<div style="display: flex;">
<div style="width: 80%;"> Title goes Here </div>
<div style="width: 20%;" class="text-right"> ICON </div>
</div>
</div>
<div class="panel-body">
Panel content
</div>
</div>
http://www.bootply.com/RR1vUVQh97
If you want to learn easily some CSS-Basics and how to use bootstrap, try codecademy ;)
------------------------------------------------------------------ EDIT:
Here is the solution including your button:
<div class="panel panel-default">
<div class="panel-heading" style="display: flex;">
<div style="width: 80%">
<h4 class="panel-title" style="margin-top: 7px;">MY TITLE</h4>
</div>
<div style="width: 30%" class="text-right">
<button class="btn btn-sm btn-danger pull-right">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh lorem, ultricies a luctus ac, congue et dui. Suspendisse a neque augue. Ut laoreet elit pretium dolor ullamcorper feugiat. Curabitur scelerisque, diam in tristique consequat, lacus quam sagittis lorem, ut gravida enim arcu ultricies mauris. Maecenas convallis pretium diam sed malesuada. Donec eget nunc id ligula elementum interdum vel vitae est. Morbi ut magna vulputate dui condimentum lobortis. Curabitur commodo eget lectus a mollis. Vestibulum eget fermentum enim, id commodo diam.
</div>
</div>
http://www.bootply.com/RltWAo76Bq
With edited border-radius: http://www.bootply.com/eYpYJz9BcW
How can i make a 4 x 2 Column Div in bootstrap responsive on mobile devices?
Preferably so they all collapse below one another at a certain breakpoint.
<div class="row">
<div class="col-lg-12">
<div class="services-col-1">
<div class="col-xs-3" id="p1"><strong>Heading One</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div>
<div class="col-xs-3 col-half-offset" id="p2"><strong>Heading Two</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div>
<div class="col-xs-3 col-half-offset" id="p3"><strong>Heading Three</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div>
<div class="col-xs-3 col-half-offset" id="p4"><strong>Heading Four</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div>
<div class="col-xs-3 col-half-offset" id="p5"><strong>Heading Five</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div>
<div class="col-xs-3 col-half-offset" id="p6"><strong>Heading Six</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div>
</div>
If I understand correctly you need two rows with 4 columns, if yes. There is a solution with Bootstrap as you mentioned.
In one row there must be max 12 col in total. 12 total / 4 columns = 3 (col-*-3)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xs-3 col-sm-3">
One of four columns
</div>
<div class="col-xs-3 col-sm-3">
One of four columns
</div>
<div class="col-xs-3 col-sm-3">
One of four columns
</div>
<div class="col-xs-3 col-sm-3">
One of four columns
</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3">
One of four columns
</div>
<div class="col-xs-3 col-sm-3">
One of four columns
</div>
<div class="col-xs-3 col-sm-3">
One of four columns
</div>
<div class="col-xs-3 col-sm-3">
One of four columns
</div>
</div>
</div>
One possible way to do it is to use .col-xs-12 class for targetting mobile devices.
Checkout this Codepen
Or look at the snippet below:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3">
One of four columns
</div>
<div class="col-xs-12 col-sm-3">
One of four columns
</div>
<div class="col-xs-12 col-sm-3">
One of four columns
</div>
<div class="col-xs-12 col-sm-3">
One of four columns
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3">
One of four columns
</div>
<div class="col-xs-12 col-sm-3">
One of four columns
</div>
<div class="col-xs-12 col-sm-3">
One of four columns
</div>
<div class="col-xs-12 col-sm-3">
One of four columns
</div>
</div>
</div>
Hope this helps!
I've been trying to recreate a list like the one below (the checkbox and the x are just png images) but I can't seem to figure it out.
I have tried using two texted cols but I can't for the life of me figure out how to get the alignment and the text breaks correct.
Any help would be very much appreciated.
Right now, my code looks like this:
<div class="row">
<div class="col-md-6 col-md-6-offset-2">
<h4 style="text-align: center;">THEY LOVE</h4>
<div class="row ">
<div class="col-xs-1">
<img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png">
</div>
<div class="col-xs-11">
<p style="padding-top: 8px;">Stuff</p>
</div>
</div>
</div>
<div class="col-md-6" style="text-align: center;"><h4>THEY DON'T LOVE</h4></div>
<div class="row ">
<div class="col-xs-1">
<img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png">
</div>
<div class="col-xs-10">
<p style="padding-top: 8px;">Stuff</p>
</div>
</div>
</div>
DEMO: http://jsbin.com/faboze/1/
http://jsbin.com/faboze/1/edit?html,css,output
Look carefully at the html and the css so you can understand how to adjust the spacing and how a hanging indent is done with an un-ordered list. Also look at the grid classes used.
<div class="container">
<div class="row">
<div class="col-sm-offset-2 col-sm-4">
<h4 class="text-center">THEY LOVE</h4>
<ul class="list-unstyled love">
<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
<li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
<li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
</ul>
</div>
<div class="col-sm-4">
<h4 class="text-center">THEY DON’T LOVE</h4>
<ul class="list-unstyled no-love">
<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
<li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
<li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
</ul>
</div>
</div>
</div>
CSS
.list-unstyled.love li,
.list-unstyled.no-love li {
background: url('http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png') no-repeat;
padding:0 0 5% 45px;
}
/* ======= change the no-love image ========== */
.list-unstyled.no-love li {
background: url('http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png') no-repeat;
}
You didnt close your tags properly. Check below code.
You can use text-center class from bootstrap for centering the stuff.
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row text-center">
<div class="col-md-6 col-md-6-offset-2">
<h4>THEY LOVE</h4>
<div class="row ">
<div class="col-xs-1">
<img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png"/>
</div>
<div class="col-xs-11">
<p style="padding-top: 8px;">Stuff</p>
</div>
</div>
</div>
<div class="col-md-6"><h4>THEY DON'T LOVE</h4>
<div class="row ">
<div class="col-xs-1">
<img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png"/>
</div>
<div class="col-xs-11">
<p style="padding-top: 8px;">Stuff</p>
</div>
</div>
</div>
I am creating mockup where the content will look like a board, a little like Pinterest. I am using Twitters-Bootstrap, and are having some issues with the layout.
I have a dynamic amount of elements, so I thought I could just have one row, and the items would then just wrap to the next line. This, however, creates som wierd space between the content-spans (see image below).
I am not a designer, so my question is, if there is a way to use one single row to display all the content blocks, still using the fluid design?
Another way would be to programmatically add the rows, but it seems like a problem which the stylesheet and not business logic should solve.
The code looks like this:
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<li class="span3 pdt10">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
Action Action</p>
</div>
</div>
</li>
<li class="span3 pdt10">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
Action Action</p>
</div>
</div>
</li>
<li class="span3 pdt10">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
Action Action</p>
</div>
</div>
</li>
<li class="span3 pdt10">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
Action Action</p>
</div>
</div>
</li>
<li class="span3 pdt10">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
Action Action</p>
</div>
</div>
</li>
</div>
</div>
Use the CSS property nth-child with media queries to remove the left margin on the first element of each line -
.myclass > li:nth-child(4n+1) {
margin-left: 0px;
}
Media queries are explained here http://twitter.github.com/bootstrap/scaffolding.html
And nth-child is used in Twitter Bootstrap as well.