I've noticed that something small changed between v3 and v4 I wasn't aware of.
Basically i tried to build the Answer of this Question: Twitter Bootstrap 3 rowspan and reorder
but in Bootstrap4.
The obvious solution would be to use the "float-sm-right" class, instead of the custom one "b-col".
But this is not working, instead the red col always gets pushed to the end of the blue one.
<div class="col-sm-5 float-sm-right">
http://jsfiddle.net/jr70k9L6/
So is there any way to build this in Bootsrap4, while still getting the A-B-C order for smaller-sizes than sm?
Seems somehow trivial to me, but I just cant wrap my head around this...
The answer was simple: Flex does not float.
Bootsrap4 class="row" is display: flex; so float-sm-right will not work.
If you get rid of class="row" and float all the div's inside that grid is possible in v4:
<div class="">
<div class="col-sm-7 float-left" style=" background: green; height: 300px;">
<p>A</p>
</div>
<div class="col-sm-5 float-left float-sm-right" style="background: blue; height: 600px;">
<p>B</p>
</div>
<div class="col-sm-7 float-left" style="background: red; height: 300px;">
<p>C</p>
</div>
</div>
http://jsfiddle.net/j0scL2r9/
Related
I would like to have a Twitch player with chat on my site. I need it to be responsive. I am working with Bootstrap.
I have this code
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-1 nopadding">
<div id="player">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="player" src="https://player.twitch.tv/?volume=1&channel=example&autoplay=false" style="border: 0px; top:0px;" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="col-md-2 nopadding">
<div id="chat">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="chat" src="https://www.twitch.tv/example/chat?popout=" style="border: 0px;"></iframe>
</div>
</div>
</div>
<div class="col-md-offset-1"></div>
</div>
CSS:
.nopadding {
padding: 0 !important; }
I am using this CSS to remove the padding from grid, I need to have player and chat next to each other, without padding.
The problem is that the chat is to small, exactly the height is too small. I can set the height in css, but this height won't change with the player's height. How can I fix that?
You can do this by setting the chat wrapper to absolute and then setting the iframe inside of it to have a width and height of 100% and position the chat-wrapper to left of 50% and give the row that it is all wrapped in a class and a position of relatve. Then at smaller screens you can position the chat wrapper to relative and left of 0 so that it will stack below the player when you get to mobile widths. Here is the markup I used. Also in the example I use col-sm but you can change it to col-md I just used sm because its easier to view in the fiddle demo.
Here is a fiddle demo drag the output screen larger and smaller to see the results at different screen sizes Fiddle Demo
Html:
<div class="container-fluid">
<div class="row player-section">
<div class="col-sm-6 no-padding">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="player" src="https://player.twitch.tv/?volume=1&channel=example&autoplay=false" allowfullscreen></iframe>
</div>
</div>
<div class="chat-wrapper">
<iframe class="chat" src="https://www.twitch.tv/example/chat?popout="></iframe>
</div>
</div>
</div>
Css:
.no-padding{
padding:0;
}
iframe{
border:none;
}
.player-section{
position:relative;
}
.chat-wrapper{
position:absolute;
left:50%;top:0;right:0;bottom:0;
}
.chat-wrapper iframe{
width:100%;
height:100%;
}
#media screen and (max-width:767px){
.chat-wrapper{position:relative;height:300px;left:0;}
}
Another option is to create you own custom aspect ratios, as described in this blog.
If for example you want to show a pdf (A4 size) in your webpage, you can add the following to your style sheet:
.embed-responsive-210by297 {
padding-bottom: 141.42%;
}
Now you can add your custom stylesheet to your iframe:
<div class="embed-responsive embed-responsive-210by297">
<iframe src="..."></iframe>
</div>
By customising the aspect ratio of the different iframes, you can align the heights of all iframes to match mutually. Another advantage is that you follow the bootstrap philosophy.
Is there a way to control the form input size based on the screen size with t he default css or is this something I will have to create custom css to do? I would like the inputs to be larger on smaller screen size and then there default size on larger displays.
Well you are already using twitter bootstrap.
I could elaborate on this issue more but Bootstrap does this the best.
So before I start please view : Bootstrap CSS
To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
Second:
If you want some pieces Larger on smaller device use : max-width css property.
You can also use the .img-responsive Class made by Bootstrap. But basically all of that is written in the link I provided. If you have something more specific I'd love to help!
Good Luck on all.
So this may not be the correct answer but the answer above doesn't explain too much with regards to actual code...
So, here's what I have:
<div class="row">
<div class="col-xs-3 col-sm-8" style="vertical-align: middle;align-self: center;">
<input type="text" name="search" placeholder="Search lots..." style="padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc;
border-radius: 4px; box-sizing: border-box; width:100%;" bind="#searchValue" />
</div>
<div class="col-xs-1 col-md-2" style="vertical-align: middle;align-self: center;">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
onclick="#searchColumn(searchValue)">
SEARCH
</button>
</div>
<div class="col-xs-1 col-md-2" style="vertical-align: middle;align-self: center;">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
onclick=#(async () => await Reload()) id="btnReset">
RESET
</button>
</div>
</div>
Using bootstraps "row" and "col" classes, we can make a row, with columns inside it...
The class="col-sm-8" means, column, on a small device, with a column size of 8...
The column sizes range from 1 - 12
So if you had two columns with col-md-6 you would have two equal columns in a row...
By including two declarations you're telling bootstrap to use a certain column size on a certain screen size, defined by xs (extra small), sm (small), md (medium), lg (large)
You can have a look at this article I found which explains the different options in detail: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
extra: https://www.w3schools.com/bootstrap/bootstrap_grid_medium.asp
Hope this helps :)
I'm a beginner for web front-end design, using bootstrap to make a project prototype.
I want to do a product like this website
The features I want is
* expand carousel to full screen when visiting the website and then can scroll down to another div element.
I found this similar solution, but unfortunately it uses Carousel as the whole background.
To get the effect I want, I check the javascript src code and edit it.
modify this line (Shown on JSFIDDLE line 13 )
$('.carousel .item').css({'position': 'fixed', 'width': '100%', 'height': '100%'});
into this line (Shown on JSFIDDLE line 13 )
$('.carousel .item').css({'position': 'relative', 'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
Yep, finally get the effect I want!! However, when the photo transition, a unexpected flicker appear, seems the photo is not at right location at first, then go to its right place immediately.
It's annoying when I see the content inside div below, like 1info or 2info.
here is the jsfiddle demo example for the issue.
I tried to use the solution like set z-index, but fail...
Can someone help me to solve this annoying problem? Thanks a lot!!
Here's a flicker-free version without any plugins:
HTML:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div id="slide1" class="fill">
<div class=" carousel-caption">
<h1>1</h1>
</div>
</div>
</div>
<div class="item">
<div id="slide2" class="fill">
<div class=" carousel-caption" >
<h1>2</h1>
</div>
</div>
</div>
<div class="item">
<div id="slide3" class="fill">
<div class=" carousel-caption" >
<h1>3</h1>
</div>
</div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
.carousel, .item, .active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
#slide1 {
background-image: url('http://stylonica.com/wp-content/uploads/2014/03/Cute-Dog-Wallpaper.jpg');
}
#slide2 {
background-image: url('http://hdwallimg.com/wp-content/uploads/2014/02/White-Dog-Running-Wallpaper-HD.jpg');
}
#slide3 {
background-image: url('http://www.petfinder.com/wp-content/uploads/2012/11/122163343-conditioning-dog-loud-noises-632x475.jpg');
}
No additional javascript required, just make sure that the jquery and bootstrap.js files are linked in your page.
It seems to me that the class center-block is missing from the bootstrap 3 style sheets. Am I missing something?
Its usage is described here, http://getbootstrap.com/css/#helper-classes-center
It's new in the Bootstrap 3.0.1 release, so make sure you have the latest (10/29)...
Demo: http://bootply.com/91632
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="center-block" style="width:200px;background-color:#ccc;">...</div>
</div>
It works far better this way (preserving responsiveness):
<!-- somewhere deep start -->
<div class="row">
<div class="center-block col-md-4" style="float: none; background-color: grey">
Hi there!
</div>
</div>
<!-- somewhere deep end -->
http://www.bootply.com/0L5rBI2taZ
You have to use style="width:value" with center block class
center-block can be found in bootstrap 3.0 in utilities.less on line 12
and mixins.less on line 39
You can use class .center-block in combination with style="width:400px;max-width:100%;" to preserve responsiveness.
Using .col-md-* class with .center-block will not work because of the float on .col-md-*.
center-block is bad idea as it covers a portion on your screen and you cannot click on your fields or buttons.
col-md-offset-? is better option.
Use col-md-offset-3 is better option if class is col-sm-6. Just change the number to center your block.
A few answers here seem incomplete. Here are several variations:
<style>
.box {
height: 200px;
width: 200px;
border: 4px solid gray;
}
</style>
<!-- This works: .container>.row>.center-block.box -->
<div class="container">
<div class="row">
<div class="center-block bg-primary box">This div is centered with .center-block</div>
</div>
</div>
<!-- This does not work -->
<div class="container">
<div class="row">
<div class="center-block bg-primary box col-xs-4">This div is centered with .center-block</div>
</div>
</div>
<!-- This is the hybrid solution from other answers:
.container>.row>.col-xs-6>.center-block.box
-->
<div class="container">
<div class="row">
<div class="col-xs-6 bg-info">
<div class="center-block bg-primary box">This div is centered with .center-block</div>
</div>
</div>
</div>
To make it work with col-* classes, you need to wrap the .center-block inside a .col-* class, but remember to either add another class that sets the width (.box in this case), or to alter the .center-block itself by giving it a width.
Check it out on bootply.
I have some problem guys.
I have to delete the content of my with .html() jquery function. All worked fine, but the footer of my iphone phonegap app go to upper. But when I comment or erase the content of my directly in my html code, all is ok, the footer of my app stay in his place. Please help me.
Here is my code snippets:
<script id="div_mainheader" type="text/html">
<div id="check_place">
<div id="idcheckin" style="width: 210px; position: relative;" align="left" class="mystatus2 clickable" onclick='showPartnersNearYouPopUp();'>
<div id="leave" style="top: 81px;"><img src="graphics/picker.png" style="margin-left: 5px; margin-top: 5px; margin-bottom: -1px;">
CHECK A PLACE ...
</div>
</div>
<div id="idbtleave" style="position: absolute; top: 81px; left: 270px;">
<button id="btleave" class="checkout-button" type="button">{{Localize.quit}}</button>
</div>
</div>
</script>
And this is the function that I call to erase the content of my :
$('#check_place').html('');
I've also tried document.getElementById('check_place').innerrHTML = ''; but it's the same thing with .html()
Please help me. Thanks a lot.
Use
$('#check_place').empty();