How to prevent paragraph from expanding bootstrap's col-auto parent width? - html

I'm using bootstrap's row with two col-auto. Inside the second, I have a form with <input>'s and a paragraph <p>. This second column should have a minimum possible width, according to the input fields (all the input fields have a min-width assigned via maxlength and size attributes).
My problem is that the paragraph is always increasing the width of the column if the paragraph is long enough. I'd rather have some linebreaks and show the content on more lines. Is there a way to do this without setting a fixed width, adding <br> or using javascript?
LIVE : https://jsfiddle.net/hg37j0yt/

lol can be easy ...
i hope this post will not be treat as advertising :)
i bought pingendo.com so i can give you this as an exercise to improve my skills with pingendo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="theme.css" type="text/css">
</head>
<body>
<div class="py-5 px-0 mx-0">
<div class="container col-sm-12 col-12 col-md-12 col-lg-12">
<div class="row">
<div class="col-4 bg-primary"> COL1 </div>
<div class="col-8 bg-secondary">
<input class="form-control" type="text">
<p > I'm a quite long paragraph and I do not want to expand the width of my column, I'd rather be wrapped. </p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
anyway... if you download the thing you should click on new project, _blank.html , then you will see a blank screen then push f2 key and in the left side you can see some bootstrap objects you can use to test quick an setup for anything use bootstrap

Can't you just replace <div class="col-auto bg-warning"> with <div class="col bg-warning">?
i.e. don't use col-auto, just use col for the div containing the <p>

Old question but it took me a while to find the answer. Add the following style to the child in the col-auto div to prevent it from expanding the width of the parent:
style="min-width: 100%; width: 0;"
reference: https://stackoverflow.com/a/36092670/1788672

Related

Image doesn't fit in parent div inspite of using .img-fluid class

So, I've this little piece of test code where I'm trying to fit an image into the parent div as below in BS5. The challenge is that the image leaves a sizeable gap width-wise. This inspite of using .img-fluid class. Outcome attached which isn't ideal. There's a big gap.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Practice </title>
</head>
<body>
<section class="container-fluid">
<div class="row g-0 h-50 border border-2 border-success ">
<div class="col-6 px-0"></div>
<div class="col-6 px-0">
<img src="image-header-desktop.jpg" alt="" class="img-fluid">
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
Why not write an inline css.
<img src="image-header-desktop.jpg" alt="" style="width: 100%">
I think your col-6 that has the image inside it... It's making the thing appear just on the left side of the page?? This should work...
<div class="col-6 mx-auto px-0">
<img src="image-header-desktop.jpg" alt="" class="img-fluid">
</div>
Tha above only takes your normal thing and centers it on the page, I only added mx-auto to center the Div which contains your image.
You could also try col-8 col-9 col-10 to make the image bigger. It will still be fluid and extend the full width no matter how many columns wide you are. Naturally you wouldn't want it fluidly expanding larger than it's normal pixel size though.

Bootstrap grid aligning inaccurately and won't respond to .css file

I am following along with the exercises in the Jump Start Bootstrap (DOWNLOAD LINK https://learn.vccs.edu/courses/406438/files/108188236/preview )
In chapter 02, we are creating a grid system. I have entered the code for the index.html and style.css files to format the grid as shown in the book.
The columns in the grid need to align vertically and horizontally, however, they simply align vertically only. The column divs also do not respond to the style.css file that is supposed to format them in size and color.
Bootstrap grid example screenshot
Bootstrap grid that my code outputs screenshot
I have checked my code several times and compared it to the code in the book (which I added a download link above [Chapter 02 index.html file]) and I cannot find anything wrong with it.
This here is the code that I am using for the html and css files:
https://pastebin.com/MQWnJXvT
If anyone can take a look and give any suggestions or just managed to spot and point out a mistake that I missed, I would greatly appreciate it. I am scratching my head with this one and will probably continue to do the rest of the night.
The only issues I can think of is that I am assigning the wrong classes in the column divs or am placing the <link href="css/style.css" rel="stylesheet"> line in the wrong section.
I thank everyone in advance who has any advice or suggestions!
Your code seems to be working fine. The problem should be the link tag, set the path correctly.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.col1 {
background: #5C7080;
}
.col2 {
background: #6BC0FF;
}
.col3 {
background: #E8AA4C;
}
.col4 {
background: #FF384E;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col1">
<h4>Column 1</h4>
</div>
<div class="col-xs-12 col-sm-6 col2">
<h4>Column 2</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col3">
<h4>Column 3</h4>
</div>
<div class="col-xs-12 col-sm-6 col4">
<h4>Column 4</h4>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

align-items in 'row' do not work when i use a custom class in container-fluid in bootstarp 4?

I just started learning front end development and after studying basics of html5/css3, moved on to bootstrap 4. Now, O have been trying to make a copy of facebook login page, and used container-fluid for 100% width and then used container and row and column inside it. To match the background color, i added a custom class to container-fluid and then to align items vertically, i used align-items-end in row. But, for some reason, it does not work; I had been looking into it but couldn't find anything. Then, I tried something which let it happen. below is the code of both the cases, kindly help me understand what is going on and why it didn't work before and now why is it working? Help is appreciated. Thanks.
<head>
<!-- Charset -->
<meta charset="utf-8">
<!-- Responsive -->
<meta name="viewport" content="width=device-width initial-scale=1.0 shrink-to-fit=no">
<!-- styelsheets -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<style>
.bg-fakebook {
background-color: #3b5999 !important;
min-height: 82px;
}
.fakebook-weight {
font-family: Tahoma;
font-weight: bold;
color: white;
margin: 0;
}
</style>
<!-- Title -->
<title>fakebook</title>
</head>
<body>
<div class="container-fluid bg-fakebook">
<div class="container">
<div class="row align-items-end">
<div class="col-md-6">
<h3 class="fakebook-weight">fakebook</h3>
</div>
</div>
</div>
</div>
<!-- -------------------------------------------------------------
JS files: jQuery first, then Popper.js, then Bootstrap JS
--------------------------------------------------------------- -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
output
Then, after trying many things, i added bg-fakebook to row as well which worked.
<div class="container-fluid bg-fakebook">
<div class="container">
<div class="row align-items-end bg-fakebook">
<div class="col-md-6">
<h3 class="fakebook-weight">fakebook</h3>
</div>
</div>
</div>
</div>
ouput
if you want to align middle first you have to display: flex the parent. Than add the alignment top center or bottom. like this
<div class="container-fluid bg-fakebook d-flex align-items-center">
<div class="container">
<div class="row align-items-end">
<div class="col-md-6">
<h3 class="fakebook-weight">fakebook</h3>
</div>
</div>
</div>
</div>
To learn bootstrap 4 you must learn flex first. BTW Happy Learning.

How do I make an image's height responsive in a Bootstrap 4 column so that an embedded video in an adjacent column is not affected?

I need a row that contains an image, an embedded video, and some text. The site uses Bootstrap for responsive behavior, however, the objects in this row should not stack when the width of the page is reduced.
With an image in the first column the embedded video in the second column has problems resizing when the width of the page is reduced. It appears that as the page width decreases and the row height becomes less than the height of the image in the first column the embedded video in the second column begins to display black bars above and below and loses its aspect ratio. This occurs even though the image itself does seem to be changing height (thus being "responsive"). But the real problem I'm trying to address is the problem with the embedded video in the second column that gets messed up when the page width is reduced (with an image in the first column).
My code is as follows:
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3 border">
<img class="img-fluid" src="https://via.placeholder.com/30x225" alt="image">
</div>
<div class="col-6 border embed-responsive embed-responsive-16by9" id="vid">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/kyJUQuaECrg" allowfullscreen></iframe>
</div>
<div class="col-3 border d-flex">
<span class="mt-auto">Some Text</span>
</div>
</div>
</div>
</body>
</html>
The problem appears to center around the image in the first column. If I remove the image and place text in the column then the embedded video in the second column resizes properly at all window widths.
Although the "img-fluid" class added to the image in the first column appears to cause the image to have a responsive height the video in the second column gets messed up when the page width is shrunk. I've tried all sorts of height manipulations using percentages to both the image and the div/col containing the image, but so far I can't find a combination that addresses this issue.
Ultimately I would like to be able to specify a height for the image in the first column that is defined as a percentage of its container. I need the image to have a responsive height and the embedded video to scale but maintain its appearance (no black bars and correct aspect ratio) at all page widths.
BTW the image in the first column could be replaced with text that is rotated 90 degrees to the left. However, any attempt to rotate text within a Bootstrap column has caused a number of other alignment problems.
Well you can set the image's height to 100% wich will be the height of the column so that will be responsive.
I found that if I use Bootstrap's embed-responsive class for the first column (containing the image) and wrap the image in a <div> then the embedded video in the second column behaves properly.
For some reason this doesn't work with the anchor around the placeholder image I used in the code in my question above. So I've provided my updated code below with a reference to a local image.
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3 embed-responsive border">
<div class="embed-responsive-item justify-content-end d-flex ">
<img class="mt-auto" style="height: 100%;" src="img/local_image.jpg">
</div>
</div>
<div class="col-6 border embed-responsive embed-responsive-16by9" id="vid">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/kyJUQuaECrg" allowfullscreen></iframe>
</div>
<div class="col-3 border d-flex">
<span class="mt-auto">Some Text</span>
</div>
</div>
</div>
</body>
</html>

`col-xs-*` not working in Bootstrap 4

I have not encountered this before, and I am having a very hard time trying to find the solution. When having a column equal to medium in bootstrap like so:
<h1 class="text-center">Hello, world!</h1>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>vicki williams</h1>
</div>
</div>
</div>
The text-align works fine:
But when making the column equal to extra small like so:
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h1>vicki williams</h1>
</div>
</div>
</div>
Then the text-align no longer works:
Is there some bootstrap concept that I am not understanding or is this in fact a error like I think it is. I have never had this issue, as my text always has aligned in the past with xs. Any help would be greatly appreciated.
Here is my complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<h1 class="text-center">Hello, world!</h1>
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h1>vicki williams</h1>
</div>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
col-xs-* have been dropped in Bootstrap 4 in favor of col-*.
Replace col-xs-12 with col-12 and it will work as expected.
Also note col-xs-offset-{n} were replaced by offset-{n} in v4.
I just wondered, why col-xs-6 did not work for me but then I found the answer in the Bootstrap 4 documentation. The class prefix for extra small devices is now col- while in the previous versions it was col-xs.
https://getbootstrap.com/docs/4.1/layout/grid/#grid-options
Bootstrap 4 dropped all col-xs-* classes, so use col-* instead. For example col-xs-6 replaced by col-6.
They dropped XS because Bootstrap is considered a mobile-first development tool. It's default is considered xs and so doesn't need to be defined.
In Bootstrap 4.3, col-xs-{value} is replaced by col-{value}
There is no change in sm, md, lg, xl remains the same.
.col-{value}
.col-sm-{value}
.col-md-{value}
.col-lg-{value}
.col-xl-{value}
you could do this, if you want to use the old syntax (or don't want to rewrite every template)
#for $i from 1 through $grid-columns {
#include media-breakpoint-up(xs) {
.col-xs-#{$i} {
#include make-col-ready();
#include make-col($i);
}
}
}
If you want to apply an extra small class in Bootstrap 4,you need to use col-.
important thing to know is that col-xs- is dropped in Bootstrap4