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.
Related
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;
}
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 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 have a page with a main bootstrap panel and inside this panel I have another panel. The objective is to have multiple nested panels inside the main one creating something that looks similar to an image gallery.
I was able to create the content and at this point it is responsive, adjusting the number of nested panels per row and its size when necessary.
However the inner panels have an image that should be centered. I tried placing the image inside a div with class container. However, when I do that, at certain screen sizes, the images end up outside the inner panels.
Here's my HTML (for the sake of simplicity with only 2 inner panels):
<div id="mainContainer" class="container">
<div class="panel panel-default">
<div class="panel-heading">Panel Title</div>
<div class="panel-body">
<div class="row">
<!--BEGIN OF ITEM 1 -->
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">Item 01</div>
<div class="panel-body"><img src="http://placehold.it/150x150" alt="" class="img-responsive" />
</div>
</div>
<!--END OF ITEM 1 -->
<!--BEGIN OF ITEM 2 -->
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">Item 02</div>
<div class="panel-body"><img src="http://placehold.it/150x150" alt="" class="img-responsive" />
</div>
</div>
<!--END OF ITEM 2 -->
</div>
</div>
</div>
</div>
jsfiddle available here: http://jsfiddle.net/9LFKV/
If you resize your browser, you'll see that at some point the inner panel grows in width but the image is left aligned.
In that case, how do I put the image centered without breaking everything else?
Twitter bootstrap has a helper class of center-block, you could use that to align the element horizontally as follows:
<img src="http://placehold.it/150x150" class="img-responsive center-block">
WORKING DEMO.
You can also use text-center class for the parent element to align its inline elements.
Add style margin:auto to your image,that will help you to horizontally center your image
Just started using Blueprint CSS and now playing with the grids but have a simple problem. I created a navbar at the top of my page with each link 2 columns wide (using span-2). What is the right way to center these links inside the grid columns without hacking away at the css.
<div id="navbar" class="container showgrid">
<div class="span-2 border">
News
</div>
<div class="span-2 border">
Gigs
</div>
<div class="span-2 border">
Tunes
</div>
<div class="span-2 border">
Email List
</div>
</div>
I would create a helper class like this:
css:
.text-center{ text-align:center; }
html:
<div class="span-2 border text-center">
News
</div>
<div class="span-2 border text-center">
Gigs
</div>