I have this code: https://www.bootply.com/a0wTkTuKyG
<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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-2" style="background-color:red">
Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>
</div>
<div class="col-md-6" style="background-color:yellow">
Content<br>Content<br>Content<br>Content<br>Content<br>
</div>
</div>
</div>
As you can see there is a big remaining white area right to the yellow "Content" div. I want that when I scale (resize) the window horizontally first shrink the white area and only when it's over re-scale or break the red and blue divs.
I also want to add some margin between the sidebar and the content which should be reduced first as well.
So I want the same as "container" class behaves. Keep the content size until it is possible and only re-size content when windows size become small enough.
Can I do it with bootstrap?
as far as i know you can get close with bootstrap, if i understood you well this might help you:
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-4" style="background-color:red">
Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>
</div>
<div class="col-md-6 col-sm-7 col-xs-8" style="background-color:yellow">
Content<br>Content<br>Content<br>Content<br>Content<br>
</div>
</div>
</div>
Related
If you'd run the following code and hover the rendered elements, you'll see that there's an unoccupied space between the left and middle elements:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-3" id="left">
<div class="row">
<div class="col-sm-1">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-1">3</div>
</div>
</div>
<div class="col-sm-6" id="middle">get me lefter, to the unoccupied space</div>
<div class="col-sm-3" id="right"></div>
</div>
</div>
... Here's what you'd see (in purple is the unoccupied space):
Is it possible to add CSS that will robustly tell left to let middle use the unoccupied space, if such exists?
Also, does Bootstrap has some built-in CSS for that?
I think it's because you defined the column that will be used (col-sm-3).
With your constraint (not restructuring the HTML), you could just modify the #left div's class to col-sm-auto which tells #left to occupy only the space it needed so that there is no unused space and #middle could occupy the old unused space.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-auto" id="left">
<div class="row">
<div class="col-sm-auto">1</div>
<div class="col-sm-auto">2</div>
<div class="col-sm-auto">3</div>
</div>
</div>
<div class="col-sm-6" id="middle">get me lefter, to the unoccupied space</div>
<div class="col-sm-3" id="right"></div>
</div>
</div>
Notice the class col-sm-auto on item 1, 2, and 3. Also tell them to use the width they needed instead of defining 1 column out of 12 so that no unused space made.
I'm trying to create cards that maintain the position of its button when the user's browser dimensions change.
Desktop full-screen:
When the browser is resized:
I'm trying to keep the card button in the same position when the browser is resized. But in my example the "Upvote" button is moved beneath the text, instead of remaining on the right side. To be more specific, have a look at this picture:
The green space should be reserved for the button, and red space should be the position of the button:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
<div class="row justify-content-center">
<div>
<div class="container">
<div class="card m-2">
<div class="card-body">
<div class="container p-1">
<img
src="https://1iq2pi1r3dw63rcvw63p8mfb-wpengine.netdna-ssl.com/wp-content/uploads/2017/08/kion-bar-box-600x600.jpg"
class="float-left mr-1"
alt=""
width="60px"
heigth="60px"
/>
<div class="row">
<div class="col-md-11 pr-5">
<h5 class="card-title">Kion Bar 2 - Best energy bar there is no</h5>
<p class="card-text">Best energy bar there is, no other like this that can even..</p>
</div>
<div class="col-md-1 ml-md-auto align-self-center">
<a href="#" class="btn btn-outline-secondary float-right">
Upvote
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="media align-items-center">
<img width="10%" class="align-self-center mr-3" src="https://1iq2pi1r3dw63rcvw63p8mfb-wpengine.netdna-ssl.com/wp-content/uploads/2017/08/kion-bar-box-600x600.jpg" alt="Generic placeholder image">
<div class="media-body">
<div class="row align-items-center">
<div class="col-md-9 col-9">
<h5 class="mt-0">Kion Bar 2 - Best energy bar there is no</h5>
<p>Best energy bar there is, no other like this that can even..</p>
</div>
<div class="col-md-3 col-3">
<a href="#" class="btn btn-outline-secondary float-right">
Upvote
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
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>
It'd be better if you use media, it'll make your work easier. Also .container should use only once within a section.
Containers provide a means to center and horizontally pad your site’s
contents. Use .container for a responsive pixel width or
.container-fluid for width: 100% across all viewport and device
sizes.
Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them. This
padding is then counteracted on the rows with negative margins. This
way, all the content in your columns is visually aligned down the
left side.
In a grid layout, content must be placed within columns and only
columns may be immediate children of rows.
You can check the below links for reference
Grid System of Bootstrap
Media
First of all, you are making many mistakes in your markup. You should take the time to learn how to correctly write your markup.
Secondly, learn how to work with images. DO use width and height attributes for your images, but DO NOT specify them in pixels. What you are doing is setting an aspect ratio, not the actual dimensions. The .img-fluid class makes your image responsive. The attributes maintains its aspect ratio. Specifying the aspect ratio will prevent the browser from moving content down the page while it waits to download the image and figure out how to draw it on the canvas.
I believe the following is what you are trying to do.
See it on Bootply
<div class="container-fluid">
<div class="card my-2">
<div class="card-body">
<div class="row">
<div class="col-1">
<img src="https://1iq2pi1r3dw63rcvw63p8mfb-wpengine.netdna-ssl.com/wp-content/uploads/2017/08/kion-bar-box-600x600.jpg" class="img-fluid" alt="" width="600" heigth="600">
</div>
<div class="col-9">
<h5 class="card-title">Kion Bar 2 - Best energy bar there is no</h5>
<p class="card-text">Best energy bar there is, no other like this that can even..</p>
</div>
<div class="col-2">
<a href="#" class="btn btn-outline-secondary btn-block">
Upvote
</a>
</div>
</div>
</div>
</div>
</div>
Remember, you can set different col spans for different viewports.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
<div class="col-sm-2">
<span class="badge badge-info badge-pill">2</span>
</div>
<div class="col-sm-10">
<p>short text to write.</p>
</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.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
This code run in wrong way, becouse dont create one row with two columns in 2: 10 ratio, but second column goes down. I can add that when i fill with content second column that include 100 % width of itself - then everything is well.
You need a container (.container / .container-fluid) to wrap your rows and columns.
<div class="container">
<div class="row">
<div class="col-sm-2">
<span class="badge badge-info badge-pill">2</span>
</div>
<div class="col-sm-10">
<p>short text to write.</p>
</div>
</div>
</div>
fiddle: http://jsfiddle.net/aq9Laaew/184407/
I am trying to create a hero image with text on top of the image. I wanted to create this using mostly bootstrap 4 so I don't have to write a lot of CSS. Bootstrap card has an image-overlay class that helps put text over the image. so I am halfway there thanks to bootstrap, But I am having some issues on mobile and other things. Did i reach the bootstrap limit and need some CSS? or I can modify my bootstrap code and fix these issues below
example image
Problems
on mobile texts and buttons are going outside the image, I want to keep it inside the image
how can I make the "card-image-overlay" left centred like the example (see example image). I
made it left, not centred.
I put w-25 on text and button parent div so that I can control the width and the div stays on the left even if the texts are long (like the lorem ipsum text on example)
my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
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>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
<div class="container">
<div class="card bg-dark text-white">
<img class="card-img img-responsive" src="https://images.pexels.com/photos/87840/daisy-pollen-flower-nature-87840.jpeg?cs=srgb&dl=bloom-blossom-close-up-87840.jpg&fm=jpg" alt="Card image" width="500px" height="500px">
<div class="card-img-overlay ">
<div class="text-left w-25 ">
<h2 class="card-title "> Headline</h2>
<p class="card-text ">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="">
CTA to Our Locations
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
The w-25 class isn't responsive (it's 25% width on all screen widths), but the grid classes (row>col*) are responsive. Instead use a row > col-* inside the card, and use the responsive col widths as needed. For example, col-lg-3 col-sm-6 is 33% width on lg and up, 50% width on md and sm, and then becomes full width on xs (mobile).
<div class="card bg-dark text-white">
<img class="card-img img-responsive"
src="https://images.pexels.com/photos/87840/daisy-pollen-flower-nature-87840.jpeg?cs=srgb&dl=bloom-blossom-close-up-87840.jpg&fm=jpg" alt="Card image" width="500px" height="500px">
<div class="card-img-overlay d-flex align-items-center">
<div class="row">
<div class="text-left col-lg-3 col-sm-6">
<h2 class="card-title ">H2 Locations Headline</h2>
<p class="card-text ">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="">
CTA to Our Locations
</div>
</div>
</div>
</div>
</div>
Use d-flex align-items-center on the card-img-overlay to vertically center the row.
https://www.codeply.com/go/eRpRZj9Z8M
How do i create a 2 column grid in Bootstrap 4 that is responsive but the column widths are not fixed.
For example: I will have an image in the LEFT column of some width and I want the RIGHT column to flex to the remaining width of the parent DIV.
<div class="tut_wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-xl-8 col-lg-12 col-md-12 col-sm-12">
<div class="tut_leftbox"><img class="img-fluid" src="tutorials/anamorphic_drawing1.jpg"></div>
</div>
<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12">
<div class="tut_rightbox">
<h3>Introduction</h3>
some text
</div>
</div>
</div>
</div>
</div>
To make a div use up the space left, you just need to add the class col to that div. It will automatically assign all the space left to it. Under mobile view (when the left div occupies the whole row), the div will automatically become 100% wide.
div {
border: 1px solid #000000;
}
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-4">
ex: col-4
</div>
<div class="col">
this will take up all the space left
</div>
</div>
</div>
Or if you want to have your left div 100% fit with the image, you could do col-xs-auto to the left div and col to the right div.
div {
border: 1px solid #000000;
}
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="row justify-content-md-center">
<div class="col-xs-auto">
Fixed width image here
</div>
<div class="col">
Other content
</div>
</div>
</div>
Details of Bootstrap 4 grid system could be found HERE.