Here We have one confusion.
Can I use bootstrap3 classes in bootstrap 4 version
Example: panel, pull-right, col-xs-4
in my excising project. I used these classes. can I go with same or replace with new classes(panel-card).
In Bootstrap 4-
(1) panels, wells, and thumbnails have been replaced by cards.
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
(2) pull-left and pull-right are replaced by float-left and float-right.
(3) .col-xs-4 is now .col-4
Related
I've read a lot about bootstraps breakpoints and grid system now and perused many stackoverflow questions but remain bamboozled.
I have a simple bootstrap v3 container like this:
<div class="container">
<div class="row col-md vertical-align">
<div class="col-md-5">
image
</div>
<div class="col-md-7 d-flex">
text
</div>
</div>
</div>
And in a web browser this renders beautifully, but on my phone the image and text continue to occupy one row with no break and the image is thus scaled tiny and ugly and I'd like Bootstrap to do what it does best, render that image at the full phone width and the next beneath it, that is, break these two columns.
A live sample is her, at present:
http://hobart.gamessociety.info/
and I would be most grateful if anyone with experience could lend some insight into why this doesn't render as I'd like on my phone.
As I understood bootstrap it's phone first, and md says apply the 5/7 split on medium and larger screens and on smaller ones do what it does sensibly, i.e. not scale that image to tiny proportions and show both columns side by side, but break between them and show one above the other.
The class "vertical-align" adds the css style "display:flex" if you remove that you will see the items behaving as you currently desire (I think). Use chrome and inspect to add/remove css styles.
You could just add col-xs-12 to each div class.
<div class="container">
<div class="row col-md vertical-align">
<div class="col-md-5 col-xs-12">
image
</div>
<div class="col-md-7 col-xs-12 d-flex">
text
</div>
</div>
</div>
Here is an alternative to your second question
create a css class
.myClass {
float:none;
display:inline-block;
vertical-align:middle;
margin-right:-4px;
}
And add it to the inner divs
<div class="container">
<div class="row">
<div class="col-md-5 myClass">
image
</div>
<div class="col-md-7 myClass">
text
</div>
</div>
</div>
Found the answer here Twitter Bootstrap 3, vertically center content
I am using Materialize, and I need to align a button to the right side of the card in the card-action.
This is the code:
<div class="card-action">
This is a link
</div>
This is the result:
If I remove the class="right" then I get this result:
I want the result from the second image, except the button should be aligned to the right. Am I missing something about the materialize card-action? How should I get this behavior?
It should be right-align instead of right and you've to use it on card-action div. You can check about the alignment classes in Helper page of the documentation.
<div class="row">
<div class="col s12 m4">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I
require little markup to use effectively.</p>
</div>
<div class="card-action right-align">
<a class="btn blue" href="#">Right</a>
</div>
</div>
</div>
</div>
You Just Need to Mention the Alignement in below way
<div class="card-action right-align">
YOUR CONTENT WILL ALIGHT TO RIGHT
</div>
I am using the first basic card example from http://materializecss.com/cards.html as a starting point. The card-action div contains two links that render beautifully.
Now I want to add a new card action that doesn't just open a link but performs an action. This could probably be done using a standard link with an tag as well but since I'm using Rails my standard way is that this action becomes a button with a form around it. It looks like this now:
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
<form>
<a class="waves-effect waves-light btn">button</a>
</form>
</div>
</div>
</div>
</div>
I would have expected that the button is nicely aligned with the two existing links, in one row at the bottom of the card. But what actually happens is that the button appears in the line below.
How can I align a button with a form together with standard HTML link tags in one row?
UPDATE: here is a JSFiddle with the code above: https://jsfiddle.net/hendrikbeck/zq1pv3y6/
You just need to add display: inline to your form tag.
See the updated JSFiddle : https://jsfiddle.net/zq1pv3y6/2/
I have a forum that i found the code for online and i am customizing it. I'm using bootstrap 3, and inside the forum i want to have an 8 x 4 grid. I followed a tutorial but instead of placing it side by side the two divs are top and bottom
<div class="row">
<div class="col-md-8">
<div class="firstPost"
<div class="postHeading">
<h3>My shot, Banff Pano</h3>
</div>
<div class="postBody">
<p>
Here is a shot of Banff Alberta, Canada.
I took a series of photographs in the portrait orientation
and, using Lightroom and Photoshop, I stitched them together and
adjusted the image to bring out more contrast and colors. The settings
are f/11 at 1/500s; ISO 280.
</p>
<p>
I'm wondering if I should have used a wider aperture and
let the background be a little more blurred
</p>
</div>
<div class="postImage">
<img src="assets/banff.jpg" />
</div>
<div class="postFooter">
<p>
Posted on 7/23/15 at 12:05PM
</p>
</div>
</div>
</div> <!-- end of 8 -->
<div class="col-md-4">
<p>Something goes here</p>
</div>
</div> <!-- end of row -->
your are missing a closing tag > here
<div class="firstPost"
should be
<div class="firstPost">
I'd like to put a stack of divs inside a single Bootstrap 3 column.
Specifically I want to layer a loading progress gif image on top of the image that is being loaded.
However simply placing the image tags inside a Bootstrap column and setting the CSS z-order doesn't work.
<div class="container">
<div class="col-xs-4 left">Left Col</div>
<div class="col-xs-4 imageholder">
<img class="center-block" src="http://paulsmedia.s3.amazonaws.com/public/lgspinner.gif" width="40px" height="40px" style="z-index:999"/>
<img class="center-block" src="http://paulsmedia.s3.amazonaws.com/public/yeoman.png" style="z-index:-1"/>
</div>
<div class="col-xs-4 right">Right Col</div>
Plunk : http://plnkr.co/8T7hyb900g3d4z9IO6Ta
Is there a way to achieve this and retain responsive behaviors?
You could use absolute positioning for <img> tags