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">
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 (pretty cool) so far Framework7 lib for an hybrid mobile app...but I came to an issue.
In the JS, I've put a line for the swiper
var slider=new Swiper(".swiper-container");
In the HTML, I have a page inside a view that is like this
<div class="pages navbar-through toolbar-through">
<!-- Page, "data-page" contains page name -->
<div class="page">
<!-- Scrollable page content -->
<div class="page-content">
<!-- Slider -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="content-block">
<div class="creator" style="float:left">
<img src="http://onexchange-dev.azurewebsites.net/image/julien_boyreau.jpg">
</div>
<div style="float:left;margin-top:2%;margin-left:2%">Julien Boyreau</div>
<div style="float:right;width:20%">Trust</div>
<br>
</div>
<div class="content-block">
<div class="content-block-inner">
<h2>Can we save the Internet ?</h2>
<img style="width:100%" class="teaser" src="http://www.savetheinternet.com/sites/default/files/styles/1275_wide/public/topics/topic_internet-freedom.png?itok=O7Tiv8Vv">
<p>
Back in 1964, in a time of cold war, Paul Baran invented packet-switching communications. This paved the way to a radically new way of distributed communications and a formidable move to democratization.
</p>
<p>
10 years later, Bob Kahn and Vint Cerf standardized eventually this approach with TCP/IP protocols. This provided a common stack onto which one could build at the edge whatever applications, where the network would only transmit the packets.
</p>
<p>
15 years later, Tim Berners-Lee built one of these applications, WWW. Many have forgotten that this was half the coin of what he was working on, the consumption part, leaving aside the other half, the creation part, who was baked into ENQUIRE.
</p>
<p>
In the next 15 years, the Internet grew on top of these technologies, thanks to decentralized PCs to start the digital revolutionnary era.
</p>
<p>Since then, the Internet has mostly moved backwards.</p>
<p>
ISPs, having never accepted the logical consequence of Baran’s invention (the best IP network is the dumbest one), have focused their profits to integrate upward to “Services” and “Content” instead of downward to faster & cheaper & more pervasive utilitarian IP service (In 2016, IPv6 is still not pervasive and I have no 4G in Paris’ subway).
</p>
</div>
</div>
</div>
<div class="swiper-slide">
<p style="text-align:center">Slide 2</p>
</div>
</div>
</div>
</div>
</div>
When I load that, I can see my first slide, but if I swipe to the right, I don't have any effect : the second slide is coming but attached to my finger, like if the 2 swiper-slide was sticked.
Even more bizarre, if I put this in the page :
<div class="pages navbar-through toolbar-through">
<!-- Page, "data-page" contains page name -->
<div class="page">
<!-- Scrollable page content -->
<div class="page-content">
<!-- Slider -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
slide 1
</div>
<div class="swiper-slide">
<p style="text-align:center">Slide 2</p>
</div>
</div>
</div>
</div>
</div>
</div>
I can't swipe at all anymore to see the "slide 2".
Does anybody have a clue to help me ? It's driving me nuts...
Thanks for your help,
J.
If your slider is in index page. then you need to call update swiper to work. You have intialised swiper in js. u can also do the same in html too. for update the swiper you can use below code
$$('.swiperTab').on('show', function(){
$$(this).find('.swiper-container')[0].swiper.update();
});
Here swiper tab is the class name for swiper container.
It should work fine.
Well, first thing that is obvious is that you miss swiper pagination. If this doesn't help, it might be a second carousel on the same page. Don't have other ideas and the code is insufficient for an exact resolution
JSFiddle
<div class="container">
<img style="margin: 10px;" src="~/Content/Images/x.png" alt="" width="400" />
<span style="margin-left: 50px;" class="h3" >Connecting People & Businesses Since 1992</span>
</div>
The above displays just fine in a desktop browser. However, when viewed on a mobile device, the text that should remain to the right of the image wraps underneath the image.
<div class="container">
<img class="col-md-6" src="~/Content/Images/x.png" />
<span class="col-md-6 h3" >Connecting People & Businesses Since 1992</span>
</div>
So how do I Bootstrap this? I have tried using a col-md-6 class, but the text on the right no longer is vertically centered after using the grid.
<div class="container">
<img class="col-xs-6 col-md-6" src="~/Content/Images/x.png" />
<span class="col-xs-6 col-md-6 h3" >Connecting People & Businesses Since 1992</span>
</div>
col-md-6 means that everything above 'tablet' size is using 6 out of 12 columns. and everything below that size will revery to the full 12 of 12 because you did not specify anything [thats what you want except you want it all the way down to 'xs' size.
Does that help?
You can use a simple two column table.
Apply "vertical-align:middle" to the td element.
I know that we can add left and right buttons in a header in Jquery Mobile App.
But can we any more buttons or controls in the header section itself?
I think I have a better solution,
<header data-role ="header" data-theme="b">
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</header>
Screenshot;
with regard to this info:
you can find it here:
http://www.metaltoad.com/sites/default/files/Responsive-Widths_0.png
you can use this code:
<style type="text/css">
#media all{
.my-header-grid.ui-grid-b .ui-block-a { width: 30%; }
.my-header-grid.ui-grid-b .ui-block-b { width: 40%; }
.my-header-grid.ui-grid-b .ui-block-c { width: 30%; }
}
}
</style>
<div class="my-header-grid ui-grid-b" data-theme="a">
<div class="ui-block-a ui-bar-a" data-theme="a">
<div align="left" style="padding-left:5px;padding-top:3px;height:33px;height:40px;">
Back
Edit
</div>
</div>
<div class="ui-block-b ui-bar-a">
<div align="center" style="padding-top:3px;height:33px;text-align:center;height:40px;">
<div style="padding-top:7px;">
<article role="heading" aria-level="1">expand </article>
</div>
</div>
</div>
<div class="ui-block-c ui-bar-a">
<div align="right" style="padding-top:3px;height:33px;height:40px;">
Add
Refresh
</div>
</div>
</div><!-- /grid-b -->
if by any chance your programming with c# mvc razor engine don't forget to write the css media tag with 2 # like so ##media because the razor engine treats 2 # as one.
you see and can play with all of the designs shown here in this link:
http://jsfiddle.net/yakirmanor/BAat8/
iv added some links but i recommend youll read this:
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/
the simple implantation is:
<header data-role ="header" data-theme="a">
<a data-icon="back" href="/" rel="external">Back</a>
<h1 class="ui-title" role="heading">Staff</h1>
<a class="ui-btn-right" data-icon="back" href="#" rel="external">Refresh</a>
</header>
or this:
<div data-role="header" data-theme="b">
<a data-icon="back" href="/" rel="external">Back</a>
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</div>
or this:
<div data-role="header" data-theme="e">
<div class="ui-btn-left" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</div>
hope iv helped.
It might be easier to create a custom navbar instead of modifying the header toolbar, Here si the docs: http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-navbar.html
This might help:
<div class="ui-btn-right">
<!-- Home Button -->
<a href="index.html" data-role="button"
data-icon="refresh" data-iconpos="notext" data-direction="reverse" data-corners="true"
data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Refresh">
</a>
<!-- Home Button -->
<a href="index.html" data-role="button"
data-icon="home" data-iconpos="notext" data-direction="reverse" data-corners="true"
data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Home">
</a>
</div>
This gives me those nice rounded buttons, two side by side on the right side.
Just like on the mobile docs.
Works in 1.1.1, haven't tried the latest RC
I was able to achieve this by the following code:
<div data-role ="header" data-theme="b">
Prev
<div data-role="controlgroup" data-type="horizontal" style="margin-left:75px;margin-top:5px;" >
<a href="index.html" data-role="button" data-icon="arrow-l" >P.Week</a>
N.Week
</div>
Next
</div>
No, there is a hard limit of 2 as far as I have found. The best I was able to come up with was to get another unstyled link to appear.
There are however, navbars - On one of my projects, I needed a number of buttons in the header area, I placed a navbar directly below it, and was reasonable pleased with the results.
They are explained in detail here:
http://jquerymobile.com/test/docs/toolbars/docs-navbar.html