Let's say I have a div where I have applied "container-fluid".
How can I change it to "container" when the viewport is below 1200px (large devices) ?
I know that I can duplicate the code and use something like this:
<div class="container-fluid hidden-md">...content here...</div>
<div class="container hidden-lg">...content here...</div>
But this doesn't feel good. Is there any other way to do this?
You could add a custom class and media query to your own stylesheet (loaded after bootstrap), so something like
.customcontainer {
border: 1px solid red;
}
#media(max-width:1200px) {
.customcontainer {
max-width: 300px; //or whatever you want max width to be
}
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid customcontainer">...content here...</div>
I just added the border and low px width for demonstration purposes
Related
I have foundation setup in my Drupal site I want to implement the breakpoints from the foundation. I have following settings for breakpoints
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
$breakpoint-classes: (small medium large);
What else settings is required for breakpoints to work.
Basically all you need is to implement those classes on your markup
Here is an example using Foundation default classes:
<div class="row">
<div class="small-6 medium-4 columns"></div>
<div class="small-6 medium-8 columns"></div>
</div>
Make sure you have the viewport metatag in the <head> of your markup:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Also, inside any style definition you can override it using your breakpoints like this:
.my-background {
background-color: #FFFFFF;
#include breakpoint(medium only) {
background-color: #000000;
}
}
Whatever you define between those braces will affect screens within your "medium" breakpoint.
Check out the documentation
I need to break a line at a specific point in mobile/small views. For instance, I'd like the text « Commune : CENON-SUR-VIENNE » to break after the colon character. Is there a syntax that allows to specify this manually instead of leaving Bootstrap CSS doing it automatically?
I include a piece of my HTML code below. I have well specified the meta tag inside the <head> :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Screenshot :
HTML code:
<div class="container">
<div class="tab-content">
<div class="col-lg-5">
<div>
<h4>Commune : CENON-SUR-VIENNE</h4>
</div>
</div>
</div>
</div>
you could try this. https://jsfiddle.net/5vwh46f8/1/
Putting the second word in a span and adding a style inline-block.
<div class="container">
<div class="tab-content">
<div class="col-lg-5">
<div>
<h4>Commune : <span>CENON-SUR-VIENNE</span></h4>
</div>
</div>
</div>
</div>
<style>
h4 span{
display: inline-block;
}
</style>
Use a "responsive" <br> tag:
<style>
br.responsive {
display: inline; // Show BR tag for narrow screens
}
#media (min-width: 320px) { // or whatever you are after
br.responsive {
display: none; // Hide BR tag for wider screens
}
}
</style>
Some text <br class="responsive" /> more text.
The more straightforward option is to use the display classes built-in to Bootstrap and hide a <br /> based on screen size.
<h4>Commune : <br class="d-md-none" />CENON-SUR-VIENNE</h4>
The use of columns or wrapping content in spans is overkill; just throw in a little display class and show/hide as needed.
To avoid breaking on a hyphen, use a non-breaking hyphen character. (U+2011)
h4 { width: 200px }
<h4 class="using regular hyphen">Commune : CENON-SUR-VIENNE</h4>
<hr>
<h4 class="using non-breaking hyphen">Commune : CENON‑SUR‑VIENNE</h4>
You can use the available classes "for toggling content across viewport breakpoints". For example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<h4>Commune : <span class="visible-xs-inline"><br></span> CENON-SUR-VIENNE</h4>
I think a media query could give you better control. What if you only wanted to break on desktop (1) didn't want it to break on mobile (2)?
The HTML:
<div class="col-12 text-center">
<h2>If many are doing something, <span class="break-mobile">it must be worthwhile</span></h2>
</div>
And the CSS:
#media (min-width: 700px) {
.title-break {
display: inline-block;
}
}
You Can Manage in responsive style through decrease font-size
I am using Bootstrap 3 (and Angular) for a webapp. I have sidebars which can be toggled, they are not using bootstrap (but table-cell layout)
I created a demo here: http://plnkr.co/edit/0pGjRqfqF21lGvhuNb9k?p=preview
Is it possible to make bootstrap columns break relative to the actual with of the container they are in?
Example:
A col-sm-* should break if its container (aside-main) is <768px, not the screen ?
<div class="row" ng-controller="demoCtrl">
<div class="aside-container">
<div class="aside-main">
<div class="col-sm-12">
<h2>Main Content Area</h2>
<div class="row">
<div class="col-sm-6">
<strong>column 1</strong>
</div>
<div class="col-sm-6">
<strong>column 2</strong>
</div>
</div>
</div>
</div>
<div class="aside" ng-if="asideIn">
<div class="col-sm-12">
<h2>Aside Area</h2>
here is the aside content
</div>
</div>
</div>
In 2018 seems there are such possibilities.
According to the documentation of project https://github.com/marcj/css-element-queries all you have to do is following.
Let's say you have following html element.
<div class="parent">
<h2>Test</h2>
</div>
And you define following css
.parent h2 {
font-size: 12px;
}
.parent[min-width~="400px"] h2 {
font-size: 18px;
}
.parent[min-width~="600px"] h2 {
padding: 55px;
text-align: center;
font-size: 24px;
}
.parent[min-width~="700px"] h2 {
font-size: 34px;
color: red;
}
And include scripts
<script src="src/ResizeSensor.js"></script>
<script src="src/ElementQueries.js"></script>
Functionality of the project will find html elements that css is referring to and will only listen to changes of those elements.
"no performance issues since it listens only on size changes of
elements that have element query rules defined through css. "
e.g. when an element that is "watched" exceeds width of 400 on watched element will be added css attribute min-width 400px and defined css will be applied to it.
Also for this to work you need to trigger the event listening or initialization yourself:
var ElementQueries = require('css-element-queries/src/ElementQueries');
//attaches to DOMLoadContent
ElementQueries.listen();
//or if you want to trigger it yourself.
// Parse all available CSS and attach ResizeSensor to those elements which have rules attached
// (make sure this is called after 'load' event, because CSS files are not ready when domReady is fired.
ElementQueries.init();
It's not exactly breaking bootstrap columns, but you can control css based on the width of the container. Should suffice.
i am using the "old" FB Likebox:
<div class="container">
<div class="row-fluid">
<div class="span12">
<div id="fb-root"></div>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">FB.init("394109690683544");</script>
<fb:fan height="120px;" width="100%" logobar="false" stream="false" connections="12" css="http://myurl.com/facebook.css" profile_id="562615520421911" class="fb_iframe_widget "></fb:fan>
</div>
</div>
</div>
how can i change the css to always have a 100% width? I need to use the box with twitter bootstrap and responisve.
thank you
It will not work, if you look at the code that's generated
<fb:fan height="120px;" width="200%" ...
translates into
<iframe id="f13ed26db2962a6" class="fb_ltr" scrolling="no" name="f2625075f1fd254" style="border: medium none; overflow: hidden; height: 120px; width: 200px;"
Which means that the widget reads only the values as the iframe is set to 200px not 200%
EDIT:
Seems like I was able to hack a bit with jQuery to make that happen, however becaue I can't set the span to 100% even when its display:block I'm using document width to set the span to the appropriate width, however you might need to change that to the width of the parent div. Again hacky but might get you started...
JSFiddle
I (absolute beginner) would like to put an image into a box with a little margin around. I tried with padding and so, didn't work. Then I tried this:
<div style="border:1px solid #CC6699; width:11em; height:5.5em;">
<img style="align:center; width:10em; height:5em;" src="path">
</div>
But instead the image gets stuck in the upper left corner.
Couple of ways to do this:
My usual is to set a background image instead.
In your css:
div#img_container {
background: url(images/myImage.png) center center
}
In your html:
<div id="img_container"></div>
Or to just put some padding around it in your CSS
img#myImage {
padding: 20px;
}
and the HTML
<img id="myImage" src="images/myImage.png" />
Try this:
<html>
<head>
<style>
#wrap {
width: 500px;
text-align: center;
}
.pic {
padding: 5px;
border: 2px solid #000;
}
</style>
</head>
<body>
<div id="wrap">
<img src="logo.gif" class="pic">
</div>
</body>
</html>
CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.
<div style="border:1px solid #CC6699; width:11em; height:5.5em;text-align:center;vertical-align:middle;display:table-cell;">
<img style="width:10em; height:5em;" src="path">
</div>
EDIT
As rpflo suggests, using the background-position property is especially great if the container happens to be smaller than the image. Just remember to include the "background-repeat:none" style if you don't want the image to be tiled.
Use the following small jQuery plugin. It centers the loading image in the middle of the specified container (vertically and horizontally):
http://plugins.jquery.com/project/CenterImage
Demo site:
http://www.demosites.somee.com/demos/centerimage.html
Usage: This plugin positions a loading image centrally over a specified html container (div, span...).
Currently available configuration settings:
{ path: "../Images/ajax.gif", overlayColor: 'green', opacity: 0.2, zindex: 2000, isrelative:true }
Minimum configuration for initialization:
$('.4th').CenterImage({ path: "../Images/ajax-bar.gif" });
Call this, in order to remove the loading image (and the overlay)
$('.4th').CenterImage('remove');