Is there no better way to handle this in Bootstrap 3 ?
I want to add class btn-full when its on visible-xs and class btn-xl on hidden-xs
<div class="visible-xs">
Click Me
</div>
<div class="hidden-xs">
Click Me
</div>
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
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
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 just started working on turning a graphic design into a responsive website using Bootstrap 3. I would like to know the positioning of the .container in relation to other wrappers like, e.g. <nav>, <header>, <footer> or semantic custom wrappers like, e.g <div class="main-content">, etc.
I am not sure if I should wrap the above mentioned tags in the .container div or vice-versa - wrap the .container div in those tags.
Essentially, the question is whether the following are equal or there is a preference of order:
<div class="container">
<div class="main-content">
...
</div>
</div>
<div class="main-content">
<div class="container">
...
</div>
</div>
If it depends on the project specifics what markup to choose, what might be potential reasons for choosing one over the other?
I personally use following order
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- NAVIGATION -->
</div>
</nav>
<div id="content" class="container">
<!-- (MAIN)CONTENT -->
</div>
<footer>
<div class="container">
<!-- FOOTER -->
</div>
</footer>
</body>
so I can style the navigation nav and footer footer over the full width (e.g. background) and the content still offers the grid.
EDIT : It is based on Template Business Casual.
If you wish to style everthing to the same (responsive .container-)width you should better put everything inside the .container. This also depends on your CSS behind .main-content.
Maybe you could check the different examples (source code) from bootstrap to see which setting/design matches your preferences.
So I've seen the question asked a couple of times and eric martin answers with this:
I did the same thing on a site I'm building. I just created different content for each modal and gave each one a unique ID. So my content looked something like:
<a id='help'>HELP CONTENT</a>
<a id='about'>ABOUT CONTENT</a>
<a id='options'>OPTIONS CONTENT</a>
<div id='modal_help'>HELP CONTENT</div>
<div id='modal_about'>ABOUT CONTENT</div>
<div id='modal_options'>OPTIONS CONTENT</div>
Then in my JS, I have:
$('a').click(function (e) {
e.preventDefault();
$('#modal_' + this.id).modal({OPTIONS});
});
Hope that helps.
So, looking at the modal example demo:
<div id='logo'>
<h1>Simple<span>Modal</span></h1>
<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
<div id='osx-modal'>
<h3>OSX Style Modal Dialog</h3>
<p>A modal dialog configured to behave like an OSX dialog. Demonstrates the use of the <code>onOpen</code> and <code> onClose</code> callbacks as well as custom styling and a handful of options.</p>
<p>Inspired by ModalBox, an OSX style dialog built with prototype.</p>
<input type='button' name='osx' value='Demo' class='osx demo'/> or <a href='#' class='osx'>Demo</a>
</div>
<!-- modal content -->
<div id="osx-modal-content">
<div id="osx-modal-title">OSX Style Modal Dialog</div>
<div class="close">x</div>
<div id="osx-modal-data">
<h2>Hello! I'm SimpleModal!</h2>
<p>SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework.</p>
<p>SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development..</p>
<p>As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks and some styling, you have a visually appealing dialog that is ready to use!</p>
<p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
</div>
</div>
</div>
I don't understand how to call a 2nd modal box on the same page. I know this is a newbie question, but it's confusing the heck out of me.
Thanks!
It would be more helpful to have a real example (simplified) of what you are trying to do. But, going with the demo code you provided, you could do the following:
HTML:
<div id='logo'>
<h1>Simple<span>Modal</span></h1>
<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
<div id='osx-modal'>
<h3>OSX Style Modal Dialog</h3>
<p>A modal dialog configured to behave like an OSX dialog. Demonstrates the use of the <code>onOpen</code> and <code> onClose</code> callbacks as well as custom styling and a handful of options.</p>
<p>Inspired by ModalBox, an OSX style dialog built with prototype.</p>
<!-- added id -->
<a href='#' id='osx-modal' class='osx'>OSX Modal</a>
<!-- new link for second modal -->
<a href='#' id='second-modal' class='osx'>Second Modal</a>
</div>
<!-- modal content -->
<div id="osx-modal-content">
<div id="osx-modal-title">OSX Style Modal Dialog</div>
<div class="close">x</div>
<div id="osx-modal-data">
<h2>Hello! I'm SimpleModal!</h2>
<p>SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework.</p>
<p>SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development..</p>
<p>As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks and some styling, you have a visually appealing dialog that is ready to use!</p>
<p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
</div>
</div>
<!-- content for second modal -->
<div id="second-modal-content">
contents of second modal
</div>
</div>
JavaScript:
$('a.osx').click(function (e) {
e.preventDefault();
$('#' + this.id + '-content').modal({OPTIONS});
});