<div style="width:500px">
<input type="text"><input type="text"><input type="text">
</div>
Inputs have width 31% and i will, that they fill the parent div in 100%. Auto margin for first two inputs. Like this:
Please see below code.
<div class="container">
<input type="text"><input type="text"><input type="text">
</div>
<style type="text/css">
.container {width:500px;}
.container input {width:30%;}
.container input:first-child {margin-right:5%;}
.container input:last-child {margin-left:5%;}
</style>
Related
I cannot align Bootstrap v5 radio buttons vertically when the label is larger than the default text. For example, if the label is heading size 3, the radio button is at the top of the div.
<div class="form-check form-check-inline" id="btnColour" onchange="generateBtnCode()">
<input class="form-check-input" name="btnColour" id="btn-secondary" type="radio" value="secondary">
<label class="form-check-label" for="btn-secondary"><a class="btn btn-secondary">Secondary Grey</a></label>
</div>
Primary Bootstrap button as an input label
I have tried playing with vertical-align, line-height, margin-top, margin-bottom, toggling with all these things on the div, the input and the label. NOTHING WORKS.
https://codepen.io/madmanalphonsus/pen/JjBRELK - A codepen I've setup with a few different radio buttons. If anyone can figure this out I would be very appreciative.
Thanks
Tim
Adjusting the following in combination with the label/input/div:
Vertical align
Line Height
Margin
Padding
Justify-content
Screaming
Add these classes d-flex align-items-center to the div
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="https://uq-itali.github.io/uqlearnx/medi7100/css/customStyles.css" />
<link rel="stylesheet" type="text/css" href="https://uq-itali.github.io/fontawesome-v6.1.1-free/css/all.css" />
<link rel="stylesheet" type="text/css" href="https://uq-itali.github.io/uqlearnx/medi7100/bootstrap-5.2.1-dist/css/bootstrap.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.js"></script>
<div class="d-flex align-items-center form-check form-check-inline" id="btnSize" onchange="generateBtnCode()">
<input class="form-check-input" name="btnSize" id="btnSize1" type="radio" value=" btn-sm">
<label class="btn btn-primary form-check-label fs-1 m-3" for="btnSize1">placeholder</label>
</div>
My goodness. I found the answer!
div.form-check-inline{
line-height: 1.5rem;
display: inline-flex;
}
label{
line-height: 1.5rem;
margin-left: 5px;
}
input[type='radio'] {
line-height: 1.5rem;
margin: auto;
}
So the trick is:
that the div incasing the input and radio button needs to be inline flex
all 3 elements (div, radio button, label) have to have the same line height.
The radio button margin: auto,
and the margin-left on the label is there to have a pocket of space between the label and input.
Then if you have an element inside the label. For example in my code builder I have a element inside the label, you have to remove the pre-existing margins for that element type. So with bootstrap add class="m-0" or inline styles style="margin: 0px;".
See my working codepen here - https://codepen.io/madmanalphonsus/pen/JjBRELK
I'm using bootstrap 4 input-group and appending or pretending my inputs with add-ons as labels.
For the inputs its looking good. Now I need a multi-line add-on or label for text area.
I'm looking for best possible solution in Bootstrap or CSS.
Here is the code I'm trying.
<style>
.h-unset {
height: unset !important;
}
.multiline-label {
display: inline-block;
word-wrap: break-word;
word-break: break-word;
width: 100%;
}
</style>
<div class="input-group input-group-sm mb-3 row mx-0">
<div class="input-group-prepend col-md-3 px-0">
<label for="naastVastgoedbeleg-ging"
class="input-group-text w-100 rounded-0 multiline-label h-unset"
id="label-naastVastgoedbeleg-ging">
<strong>Werkzaamheden naast vastgoedbeleg-ging (bijv. loondienst of onderneming)</strong>
</label>
</div>
<textarea id="naastVastgoedbeleg-ging"
class="form-control rounded-0 col-md-9 h-unset"
aria-label="naastVastgoedbeleg-ging"
aria-describedby="label-naastVastgoedbeleg-ging">
</textarea>
</div>
Thankx for helping Happy Coding!
It worked by using this css
.multiline-label strong {
white-space: pre-wrap;
}
Here's my layout sample on bootply
Does this require a CSS 'hack' or did I get my markup wrong to begin with?
(or, is this the default intended Twitter bootstrap design)?
Just put the jumbotron in a row div:
<div class="row">
<div class="jumbotron">
.....
.....
</div>
</div>
OR use css to increase the width and adjust the position like:
<div class="jumbotron" style="width:102%; margin-left:-1%">
....
....
</div>
(not recommended)
This is what a default Jumbotron looks like. I'm not sure why you didn't just check the Bootstrap documentation to see their basic example?
Edit: The reason why your Jumbotron isn't the same width is because your table is wrapped in a .row class which has margin-left: -15px & margin-right: -15px applied to it.
To fix your issue, wrap your .jumbotron in a <div class="row"></div>
You should always place your elements within a column though. e.g. .row > .col-sm-12 > .jumbotron
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a lead</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
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.
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.