I want my page's content to take up the full width of the screen with a little padding on the right and left and be fluid, but when I wrap my div.row and div.col-md-x in a <div class="container-fluid"> the page's content touches the sides of the screen.
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
What is the proper, Bootstrap way to have a 100% width, fluid layout, and 15px padding on the left and right?
As per the Bootstrap docs:
Use .container-fluid for a full width container, spanning the entire width of your viewport.
If you want 15px padding then add to your CSS:
.container-fluid {
padding: 15px;
}
However you may want to use a percent (padding: 2%) or media queries since 15px will look different on different screen resolutions.
Another option: use <div class="container"> instead of <div class="container-fluid">. This will give you built in padding.
Bootply demo
You can try an id to <div id="bd" class="container-fluid"> and if add this script after add Jquery you can padding when window resize, and can add more resolutions px with more "if" or only add padding-left or right.
<script>
$(document).ready(function(){
function paddingbd(){
if($(window).width()>800){
$("#bd").css("padding","30px");
}else{
$("#bd").css("padding","");
}
}
paddingbd();
$(window).on("resize",paddingbd);
});
<script>
the .row has a negative margin of 15px. try to add
.container-fluid {
padding: 15px 30px;
}
Related
<div id="abc">
<div id="bac" ngIf="show">
<!-- Content -->
</div>
<div id="cde">cds</div>
</div>
I have a div want to add or remove from DOM slowly(show and hide) using *ngIf and likewise adding or removing of div.id ="bac" should cause div.id='cde' to move left or right slowly like it is animating.
*ngIf probably is not he best thing you are looking for, instead of this, use ngClass and define the css transitions and positions for these animations.
*ngIf fully hides/shows a node from/in DOM, it's like display: none/block which is not able to be animated through css-transitions
here is an example
<div class="animated" [ngClass]=" { 'show': show, 'hide': !show }">
content
</div>
then in the css
.animated {
display: inline-block;
width: 100%;
height: 80px;
background: gray;
transition: 1.5s linear margin-left;
}
.animated.show {
margin-left: 0;
}
.animated.hide {
margin-left: -120vw;
}
Height also can be changed, depends on which effect you expect.
Here is stackblitz with working code
I have added a jumbotron to my webpage, my page is now displaying the bottom and right scroll bar! Not sure how to resolve this.
Any tip's or pointers much appreciated.
url http://tyrescanner.net/contact-us
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<h1><span style="color: #ffffff;">Welcome to Tyrescanner</span></h1>
<p></p>
<h2>Contact us.</h2>
</div>
</div>
</div>
</div>
what are you asking for? I assume you just don't want bottom scrollbar ,is that right?
If so, below is your CSS for HTML . change that as below it's in your bootstrap.css file and line number 1071
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
overflow: auto;
overflow-x: hidden;
}
Your jumbotron is wrapped with divs row and col-md-12:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
Delete them and leave only jumbotron.
or remove paddings from your css:
.container-fluid {
width: 100%;
padding-top: 0px;
/* padding-left: 0px; */
/* padding-right: 0px; */
padding-bottom: 0px;
}
It overwrites bootstrap css and cause problem with page width.
After viewing your site I see some issues:
You're using a container-fluid and a nested container-fluid as the jumbotron parent element, the nested one is redundant.
Then I see you've overridden container-fluid and .col--12 classes default bootstrap left/right padding to 0px but you didn't change the default margin of the .row class to have 0px left/right margin hence your bottom scroll bar.
For the footer, remove the margin-top and make the footer a direct child of the body element then add the following css to the form, body and html elements: height:100%;, the rest is margins that you added to the elements.
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 experimenting with Dojo, so far it's very cool except for the fact that I can't seem to be able set the width of a TabContainer. I have the following code
<div id="tabs" dojoType="dijit.layout.TabContainer" doLayout="false">
<div id="javaTab" class="myTab" dojoType="dijit.layout.ContentPane" title="Java">
<h1>Hello I'm the Java Tab</h1>
</div>
<div id="rubyTab" class="myTab" dojoType="dijit.layout.ContentPane" title="Ruby">
<h1>Hello I'm the Ruby Tab</h1>
</div>
</div>
This are the CSS:
#tabs {
width: 100%;
height: 100%;
}
.myTab {
height: 600px;
width: 100%;
padding: 0 !important;
}
If I put a menu bar inside the the tabs then I find that their width is larger than my screen so I don't see the complete bar.
So is there a way to set the width of the generated "tab bar"?
Thanks guys!
Yup Peller is right, you can't set the size on each contentPane, but what you can do is to modify the width of the whole thing (tabContainer)