I'm trying to do some vertical aligning in Bootstrap and can't seem to achieve it with the various flex box classes (align-items-center etc).
I need the text content in the boxes of the below codepen to be vertically centered ... whilst also each box should match the height of the tallest box (as is currently working)... can anyone help?!
The inner divs need to be wrapped in a link - don't know if thats affecting things?
https://codepen.io/jwacreative/pen/VwjePEj
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4 mb-4">
<a href="http://">
<div class="summary-box h-100" style="background:red">
<h2>Title</h2>
<p>Some text</p>
</div>
</a>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<a href="http://">
<div class="summary-box h-100" style="background:green">
<h2>Title</h2>
<p>Some text longer text Some text longer text Some text longer text Some text longer text Some text longer text Some text longer text<< /p>
</div>
</a>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<div class="summary-box h-100" style="background:blue">
<h2>Title</h2>
<p>Some text</p>
</div>
</div>
</div>
CSS Grid should be able to help with this...
.summary-box {
display: grid;
align-content: center;
}
Related
I'm trying to align some content in Bootstrap 4. It's not working the way I think and I don't understand why. Specifically, I'm unable to vertically or horizontally align content in a column. For example, in this Bootply, I have the following:
<div class="container">
<div class="row">
<div class="col-8">
<h2 class="display-4">Some Text</h2>
<p class="lead">
Some other details go here. This portion can go up to three lines of text. It will wrap around to the next line. A YouTube video will be available in the right side.
It's not there because Bootply doesn't allow iframes.
</p>
</div>
<div class="col-4">
<div style="border:solid 2px #ddd;">
A vertically centered YouTube video.
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-3">
<div class="fa fa-arrow-right" style="font-size:3.0rem;"></div>
</div>
<div class="col-9">
<h3 class="card-title">Detail</h3>
<p class="card-text">Here's some more info for you. This could go up to three lines of text. How do I center the arrow?</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
How do I vertically align the YouTube video so that it's centered? How do I vertically align the arrow so that it's centered? I can't seem to even get the arrow to center horizontally. I tried using justify-content-center as mentioned here without any luck. What am I doing wrong?
You need to use nested flexbox
.col-3 {
display:flex;
align-items:center;
justify-content:center;
}
Bootply
I am using Bootstrap's carousel. On desktop each slide has 3 div's in it containing text, so with each slide 3 new text boxes are revealed. On mobile this works fine only you can only see the first text box of every slide.
How can I change the distance a slide moves so that I see every text box? Currently the slider slides 3 times, but I need it to slide 9 times on mobile.
Thanks in advance!
<div class="slider-section">
<div class="container">
<div id="statistic-slider" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="slider-text">Body text</div>
<div class="slider-text">Body text</div>
<div class="slider-text">Body text</div>
</div>
<div class="item">
<div class="slider-text">Body text</div>
<div class="slider-text">Body text</div>
<div class="slider-text">Body text</div>
</div>
<div class="item">
<div class="slider-text">Body text</div>
<div class="slider-text">Body text</div>
<div class="slider-text">Body text</div>
</div>
</div>
<a class="carousel-control left" href="#statistic-slider" data-slide="prev"></a>
<a class="carousel-control right" href="#statistic-slider" data-slide="next"></a>
</div>
</div>
If it's just a ResponsivDesign issue I recommand you to add some .col-xx-xx classes to your div.
If you already use Bootstrap you already now that but, you will be able to have a better structure, yours textboxs with a vertical disposition on mobile and horizontal in desktop for example.
Have a look on Bootstrap grid system.
Other solution could be to make two carousels, one for desktop and another for mobile. You will be able to customize the way you want both of them.
The first one with hidden-xs class (see bootstrap functionalities) and its 3 slides.
The second one with hidden-md hidden-xx ... and having 3*3 distinct slides for example.
I am trying to implement 3 panels with text and images with a different background color for the images (darker) and another color for the text.
this is my current code which works for the desktop version of the website but breaks on mobile.
At the moment the layout is IMAGE->IMAGE->IMAGE. Text->Text->Text and it should be IMAGE -> Text. Image -> Text. Image -> Text:
current code
So as per my comment, you need to include both your image and text into a column, then all three columns into a row. Something like this:
<div class="row">
<div class="col-md-4">
<div><img src="#"></div>
<div>Some text</div>
</div>
<div class="col-md-4">
<div><img src="#"></div>
<div>Some text</div>
</div>
<div class="col-md-4">
<div><img src="#"></div>
<div>Some text</div>
</div>
</div>
You should check out the bootstrap site for guidance on using their grid layout :)
In bootstarp to using panels you must use panel codes
you can see the bootstrap panels here Bootstrap Panels
<div class="row">
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
<img src="#">
<p>text Here</p>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
<img src="#">
<p>text Here</p>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
<img src="#">
<p>text Here</p>
</div>
</div>
</div>
</div>
Automatically all three columns put in the one row if you want use different column grid you must the another div tag to specify the grids
also panels have the panel title class but I used panel heading class you can use panel title if you want
i am using Bootstrap 3, and i have a text within a col and when it's longer, it does not fit the div and overflows it in the width of the box. I have used different display styles, do a lot of search but without success.
<div class="container-fluid">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-12 col-xs-12 col-lg-offset-1 col-md-offset-2">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="http://www.kungfunguyen.com/wp-content/uploads/2013/08/Bootstrap-2-1-Is-the-Latest-Update-to-Twitter-s-Popular-Open-Source-Project.png">
<div class="caption">
Very long text which oveflows the whole div in width.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</div>
</div>
</div>
</div>
Example with thumbnail and caption, the same problem
http://jsfiddle.net/zqeLse5q/
Thanks
.caption{
word-wrap: break-word;
}
http://jsfiddle.net/zqeLse5q/2/
So the new Bootstrap v3 code looks like this:
<div class="row">
<div class="col-md-4 bg-red">
<h2>Heading</h2>
<p>My text here...</p>
</div>
<div class="col-md-4 bg-green">
<h2>Heading</h2>
<p>My text here...</p>
</div>
<div class="col-md-4 bg-blue">
<h2>Heading</h2>
<p>My text here...</p>
</div>
</div>
Because Bootstrap 3 has removed column margins (now has padding left and right). How can I put a background color on the class="col-lg-4" div and have the page background gap between each div?
Note: it must be a background color on the class="col-lg-4" div.
One way is to use the background-clip property with the content-box value so that the painting area is clipped to the content box of .col-lg-4 instead of the border box like it is by default.
Use .col-*-3 and add margin to it. You have 4 columns but the 4th is unused and then you have room for the margins. Here's an example:
http://www.bootply.com/R9iSDcNuzY
HTML
<div class="row">
<div class="col-md-3 bg-danger col-margin">
<h2>Heading</h2>
<p>My text here...</p>
</div>
<div class="col-md-3 bg-success col-margin">
<h2>Heading</h2>
<p>My text here...</p>
</div>
<div class="col-md-3 bg-primary col-margin">
<h2>Heading</h2>
<p>My text here...</p>
</div>
</div>
CSS
/* CSS used here will be applied after bootstrap.css */
.col-margin{
margin: 10px;
}