I build a small app using Bootstrap 5. There are 10 columns col-lg-10 on the left and 2 columns col-lg-2 on the right on the desktop view. The canvas clock is to be located in the centre of the most right columns. At the moment the clock is not centred and any CSS I apply does not seem to work. Please see the HTML code:
'''
<section>
<div class="container-fluid">
<div class="row">
<div class="col-lg-10 col-md-6 col-sm-12">
</div>
<div class="col-lg-2 col-md-6 col-sm-12 mx-auto">
<!-- analog clock location -->
<div id="clockContainer">
<canvas id="analogClock"></canvas>
</div>
</div>
</div>
</div>
</section>
'''
I tried to centre the canvas clock using bootstrap classes. The class="mx-auto" class was applied on the div with an id="clockContainer". But this does seem to solve the problem.
Later, I linked the CSS file and tried to do the following (non of the below solution worked):
#clockContainer{
margin: auto;
width: 250px;
}
#analogClock{
width: 250px;
}
I tried also:
#clockContainer{
width: 250px;
margin: auto;
}
Any hints on how to resolve it?
Thanks!
Related
I'm a backend guy and trying to figure out a few details for a project we have that's using Bootstrap 4.
Simply put, we want to create the layout that's executed here:
https://codepen.io/mediumandmessage/pen/xVeXop
(this example and the code below is from the original Bootstrap 3 example I found, not Bootstrap 4)
HTML:
.somesection {margin-top:50px!important;}
body {
font-size:17px;
font-family:Helvetica Neue;
}
img {max-width:100%;}
.overlay-text {
font-size:3.5vw;
float:right;
width:65%; /*important*/
bottom:21vw; /*important*/
padding: 25px;
background:#f7f7f7;
}
<div class="container somesection">
<div class="row col-xs-6">
<img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1087&h=725&q=80">
</div>
<div class="col-xs-3 col-sm-offset-4 overlay-text">
This is some text that should partially overlay.
</div>
</div>
However, that example uses Bootstrap 3 and breaks in Bootstrap 4 (the text displays horizontally below the image) and also does not stack the divs responsively.
I've tried screwing around with absolute and relative positioning, etc. it became a lot of code to execute cleanly and make responsive and I was hoping someone out there may have some insight into implementing in pure Bootstrap4...
If anyone out there can share any expertise here, I'd greatly appreciate it!
You could add a transform to your overlay column (you may need to cancel this with a media query for your smaller screens).
Please note in the html below, I have fixed your code to work with boostrap 4 - columns have to be inside a row (they cannot be on a row) and I don't think there is a -xs class any more
.overlay-text {
/* these two are needed - the align self makes the column not stretch the whole height of the image column and the translate moves the column over the image */
align-self: flex-start;
transform: translateX(-20%);
/* the following are for example only */
background-color: #ffffff;
padding:20px;
}
<div class="container somesection">
<div class="row">
<div class="col col-sm-6">
<img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1087&h=725&q=80" class="w-100">
</div>
<div class="col col-sm-3 col-sm-offset-4 overlay-text">
This is some text that should partially overlay.
</div>
</div>
</div>
Example bootply
Just add position:relative; to the .overlay-text
You can also adjust the value of bottom
.somesection {margin-top:50px!important;}
body {
font-size:17px;
font-family:Helvetica Neue;
}
img {max-width:100%;}
.overlay-text {
font-size:3.5vw;
float:right;
width:65%; /*important*/
bottom:21vw; /*important*/
padding: 25px;
background:#f7f7f7;
position:relative;
}
<div class="container somesection">
<div class="row col-xs-6">
<img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1087&h=725&q=80">
</div>
<div class="col-xs-3 col-sm-offset-4 overlay-text">
This is some text that should partially overlay.
</div>
</div>
I'm building a custom tooltip that uses position: fixed and a dynamic top and left to follow your mouse cursor around. The tooltip has a relatively complex layout built with flexbox. I'm having an issue with IE11 (which otherwise supports flexbox just fine using autoprefixer) where the width of the tooltip is getting collapsed down as if it had no content.
I made a Codepen stripping out all my implementation details except for the most basic Bootstrap layout and CSS, and the issue is still present. You can see it in action here https://codepen.io/ryangiglio/pen/xajLJr. Here is the code:
HTML
<!-- Regular content -->
<div class="container-fluid">
<div class="row">
<div class="col-4 text-center">
Column
</div>
<div class="col-4 text-center">
Column
</div>
<div class="col-4 text-center">
Column
</div>
</div>
</div>
<!-- Tooltip content -->
<div class="custom-tooltip">
<div class="container-fluid">
<div class="row">
<div class="col-12 text-center">
Tooltip Title
</div>
</div>
<div class="row">
<div class="col-4 text-center">
Column
</div>
<div class="col-4 text-center">
Column
</div>
<div class="col-4 text-center">
Column
</div>
</div>
</div>
</div>
CSS
.custom-tooltip {
position: fixed;
top: 50px;
left: 50px;
background: white;
box-shadow: 0 0 5px 1px black;
}
This is how it looks in Chrome
And how it looks in IE11
Unfortunately, I didn't care enough about the underlying issue here to spend too much more time solving it, so I ended up hard-coding a width on the .custom-tooltip class which solved the problem enough for me to ship it.
The link you provided was not valid cause I'm not a pro member.
On another note, I'm not sure, but it could be that when you set the box shadow property it changed the display, but I'm not sure and wanted to test that theory out but couldn't.
--- Edited
Try the below code you have to also make sure you correctly set the flex-direction property.
div.custom-tooltip{
display: flex;
flex-direction:column;
}
div.row{
display: flex;
flex-direction:row;
}
--- EDITED ANSWER ---
/*
I set the tooltip box containers
width to be a percentage, I don't
know if this a documented issue
with ie11 or not, where ie 11
doesn't realize that flex is being
used on a fixed element and goes with
default values for width.
*/
div[data-tooltip-boxwidth="300"] {
width: 20%;
}
I have created a header div as follows:
<div class="header">
<div class="row">
<div class="col-lg-2 col-sm-2 col-xs-2 col-md-2">
<img class="img-responsive" src="logo.png"/>
</div>
</div>
</div>
Here is the header class:
.header {
background-color: #5DBCD2;
height: 10%;
}
Even though the div's max height is restricted to 10%, the image exceeds this.
Can someone please help
Add the following to your CSS so that you can have the image contained within the div nicely as it scales down.
.header img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
You can also add overflow: hidden; to the header element but that will cut it off rather than scale it, but it is another potential option.
I am not sure if it will be to any help, but try to add a max-height to the image in CSS.
EDIT
You could add this in the CSS (so that the image has 10% of the width of the parent):
.img-responsive {
width: 10%;
}
I tried your code with an image of 2000 x 1522 pixel dimensions.
Worked fine.
Few things you can do:
1) Debug your page using Developer tools in the browser.
2) Check if your css file path is correct.
3) Check for any errors in console part of the developer tools.
In your above code bootstrap before declaring row you must first declare container you should have something like this below
<div class="header">
<div class="container">
<div class="row">
<div class="col-lg-2 col-sm-2 col-xs-2 col-md-2">
<img class="img-responsive" src="logo.png"/>
</div>
</div>
</div>
</div>
Probably this should work
I'm not going to try to explain this in words, just have a look at this fiddle:
https://jsfiddle.net/fhf8rwno/4/
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="myBox" style="height:100px;background-color:#000;">
<div class="row no-gutter">
<div class="col-xs-7">
blbalbalabla
</div>
<div class="col-xs-5" style="height:100px;background-color:red;">
wowowowo
</div>
</div>
</div>
</div>
</div>
</div>
In either Chrome or Firefox (possibly other browsers too), watch the red column as you resize the browser width. You should notice that on every other change in browser side a one-pixel-wide gap appears at the right edge of the parent container, allowing the parent background to come through.
If I instead use col-xs-6 instead of col-xs-7 and col-xs-5, the issue disappears. So it seems the browser's pixel math may cause this due to the odd/even mix of column ratios.
This may not seem like much, but the site I'm working on uses this pattern a lot and half the users are seeing some very noticeable and unsightly dark lines.
Any thoughts or suggested hacks?
Edit: here's a hacky way of achieving this. http://jsfiddle.net/fhf8rwno/8/
CSS
.row.no-gutter {
margin-left: 0;
margin-right: 0
}
.row.no-gutter [class*='col-'],
.row.no-gutter [class*='col-'] {
padding-right: 0;
padding-left: 0;
}
HTML
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="myBox" style="height:100px;background-color:#000;">
<div class="row no-gutter">
<div class="col-xs-7">
blbalbalabla
</div>
<div class="col-xs-5" style="height:100px;background-color:red; position: relative; right: -1px;">
wowowowo
</div>
</div>
</div>
</div>
</div>
</div>
A colleague and I have come to a semi-solution, but I'm not going to accept this answer just yet in case someone comes up with something less hack-y.
Shifting the last column's margins by one seems to help the issue:
.row.no-gutter [class*='col-']:last-child {
margin-right:-1px;
margin-left:1px;
}
https://jsfiddle.net/fhf8rwno/6/
How to create two rows in a bootstrap without scrolling using one with pixel and another with percentage ?
<div class="container-fluid">
<div class="row main_header">
sadf
</div>
<div class="row main_second">
<div class="col-lg-2 main_left">
test
</div>
<div class="col-lg-10 main_right">
test
</div>
</div>
</div>
How to create two rows in a bootstrap without scrolling using one with pixel and another with percentage ?
.main_header{
height: 80px;
background-color: #606060;
color: #fff
}
.main_left{
height: 100%;
background-color: #D8D8D8;
} .main_right{
height: 100%;
}
.main_second{
height: 100%;
}
I think you don't need to use any additional CSS to achieve what you want as Bootstrap already have a very established Grid System. Please see my following example in the following fiddle!
All what I have used is the following lines with Twitter Bootstrap V3.3.4:
<div class="row">
<div class="row">
<div class="col-sm-4" style="background-color:red;">.col-sm-4</div>
</div>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
And you can add any additional divs within those two divs.
Learn about the Grid System very well to use this via these kind of tutorials.
And it's better to look at the following StackOverflow answer, I guess.