I wanted to span an image to the full width on my website and I noticed that the container, where the image is put into, has 150px margin and 15px padding automatically on the left and right side, so the image is displayed in the center. I have tried various ways of removing it but nothing worked, does anyone have a solution for that yet?
Here is my code:
<div class="container">
<div class="row">
<div class="col-12 mb-5">
<img src="../../assets/business.jpg" class="img-fluid" alt="business">
</div>
</div>
</div>
Drop the usage of .container, or even .container-fluid
Remove nagative margins from .row and the horizontal padding from all immediate columns by adding the class .no-gutters
<div class="row no-gutters">
<div class="col-12 mb-5">
<img />
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/epw2vc8g/8/
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
<div class="col-md-8 nopadding">
Reference:https://intellipaat.com/community/27892/remove-padding-from-columns-in-bootstrap-3
Use .container-fluid this will keep the container the full width of the window then add .m-0.p-0 for no margin or padding on the container, row, and col. Then use .w-100 on the img for 100% width.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid m-0 p-0">
<div class="row m-0 p-0">
<div class="col-12 m-0 p-0 mb-5">
<img src="https://www.k2bindia.com/wp-content/uploads/2013/03/bootstrap-1.jpg" class="w-100" alt="business">
</div>
</div>
</div>
Related
I have a container (grid, Bootstrap 5) and I want to left align it on my page.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col border border-dark m-2">
Col1
</div>
<div class="col border border-dark m-2">
Col2
</div>
<div class="col border border-dark m-2">
Col3
</div>
</div>
</div>
and I want to have all cols and row to be left aligned on my page. I could use position-absolute top-0 start-0 on the container div, but according to the docs the page would not be responsive anymore. How to fix that?
If you look at the CSS for the .container class, it has the left and right margins aligned at auto. This centers content on the page. Technically, your row/columns are left aligned in the container. If you want the container truly left-aligned, overwrite the CSS with
.container {
margin-left: 0!important;
margin-right: 0!important;
}
the edges on the sides are given by the container tag, in this example below I used the container-fluid class to make it take as much space as possible to the container and removed the data margins from the m-2 class :
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col border border-dark ">
Col1
</div>
<div class="col border border-dark">
Col2
</div>
<div class="col border border-dark">
Col3
</div>
</div>
</div>
I'm using Bootstrap 5 and I'm trying to get the first row to be at the top of the page and the second row to occupy the rest of the viewport and have its content vertically centered without scrollbars (assuming the viewport is high enough). Here's the basic code
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container min-vh-100">
<div class="row">
<div class="col-12 col-md-2">
Content
</div>
<div class="col-12 col-md-10">
Content
</div>
</div>
<div class="row min-vh-100 align-items-center">
<div class="col-12 col-lg-6">
Content
</div>
<div class="col-12 col-lg-6">
Content
</div>
</div>
</div>
The second row does correctly center its content, however, because I'm using the min-vh-100 class it produces scroll bars (removing the first row makes the scroll bars go away as expected). Changing the second row's min-vh-100 to h-100 class doesn't help (actually makes things worse). The problem seems to be how to tell the second row to occupy 100% of the parent's remaining height and not 100% of the viewport height.
You need the d-flex and flex-column classes on your container. Then, rather than forcing height on the second row, use flex-fill to get it to use the remaining space. Fixed sizing should be a last resort.
See https://getbootstrap.com/docs/5.0/utilities/flex.
.row:first-child {
background: thistle;
}
.row:last-child {
background: moccasin;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container min-vh-100 d-flex flex-column">
<div class="row">
<div class="col-2">
Content
</div>
<div class="col-10">
Content
</div>
</div>
<div class="row flex-fill align-items-center">
<div class="col-6">
Content
</div>
<div class="col-6">
Content
</div>
</div>
</div>
I'm very new to Bootstrap and have been working through some tutorials. I'm currently trying to rebuild Google's homepage and have run into some difficulty with the responsiveness of the grid system.
I've created a very basic layout of the top bar on Google's homepage and it more or less looks fine as it is fullscreen; however, when I resize the window, the text on the right hand side spills over the width of the window.
<body>
<div class="container-fluid" id="topbar">
<div class="row">
<div class="col-1 justify-content-start aboutlink">
About
</div>
<div class="col-1 justify-content-start">
Store
</div>
<div class="col-8">
</div>
<div class="col-1 justify-content-end gmaillink">
Gmail
</div>
<div class="col-1 justify-content-end">
Images
</div>
</div>
</div>
Here's an image of the issue:
The classes "aboutlink" and "gmaillink" are simply aligning the text to the right and the topbar id has a 15px margin and sets the font size.
I've had a read through the responsive breakpoints and grid system documentation, but can't seem to fix this issue. Would be grateful if anyone could share some advice?
Thank you.
What is going wrong?
If we add a border to the columns and allow the word to wrap if it doesn't fit, we can see better what is happening.
Take a look at this example, and you will see that on smaller screens the words are not fitting into the col-1 divs, and because words don't wrap by default it is causing the col to grow bigger than it should be to accommodate the size of the text:
.col-1 {
overflow-wrap: break-word; border: 1px solid lightgray;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid" id="topbar">
<div class="row">
<div class="col-1 aboutlink">
About
</div>
<div class="col-1">
Store
</div>
<div class="col-8">
</div>
<div class="col-1 gmaillink">
Gmail
</div>
<div class="col-1">
Images
</div>
</div>
</div>
1. Breakpoints and padding classes
Bootstrap's grid classes to allow you to set the breakpoints for the cols. So for example these classes mean: give the column 6/12 of the space on screens up to the md breakpoint (768px), and 8/12 of the space from 768px and up:
<div class="col-6 col-md-8">
Bootstrap also has spacing classes that can be used to change the padding of the columns. The px-* classes set the padding for the left and right padding. The default is px-3, so we can use px-1 to make the padding smaller and so the same size columns can fit in more content.
Example using col-sm-* and px-*:
.row div {border:1px solid lightgray;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid" id="topbar">
<div class="row">
<div class="col-2 col-sm-1 aboutlink px-1">
About
</div>
<div class="col-2 col-sm-1 px-1">
Store
</div>
<div class="col-4 col-sm-8">
</div>
<div class="col-2 col-sm-1 gmaillink px-1">
Gmail
</div>
<div class="col-2 col-sm-1 px-1">
Images
</div>
</div>
</div>
2. Bootstrap Auto classes
A better option in this case (as you don't need a defined structure) might be to use the col-auto Bootstrap classes that will use only the space needed to fit the content - this can overcome the problem of having to set the cols to a specific proportion of the width, such as 1/12 or 2/12.
In the example below, we set the width of the first 2 and last 2 columns to col-auto so they will resize to fit the text inside them, and then give the middle column the col class to take the rest of the available space:
.col-auto{ border:1px solid lightgray;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid" id="topbar">
<div class="row">
<div class="col-auto aboutlink px-1">
Abouttttt
</div>
<div class="col-auto px-1">
Store
</div>
<div class="col">
</div>
<div class="col-auto gmaillink px-1">
Gmail
</div>
<div class="col-auto px-1">
Images
</div>
</div>
</div>
FYI: the justify-content-* classes are for flexbox layouts & don't work with the grid classes, so I have removed them from the examples.
html, body, .sidebar-container, .sidebar-row {
height: 100%;
}
.sidebar {
background-color: #2C3544;
}
#media (min-width: 992px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
display: block;
background-color: #2C3544;
}
}
img{
margin: auto;
display: block;
}
.sidebar-image{
margin-top: 15px;
}
.sidebar-items{
margin-top: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid sidebar-container">
<div class="row sidebar-row">
<div class="col-md-2 sidebar">
<div class="container-fluid">
<div class="col-md-12 sidebar-image">
<img src="assets/logo-white.png" width="75px" height="75px"/>
</div>
</div>
<div class="row sidebar-items">
<div class="col-md-12">
<ul class="list-group">
<li class="list-group-item">Dashboard</li>
<li class="list-group-item">Projects</li>
<li class="list-group-item">Statistics</li>
</ul>
</div>
</div>
<div class="row align-bottom">
hafldjalfjsdlfsjdlfsjlfs
</div>
</div>
<div class="col-md-10 offset-md-2 content">
Main Content
</div>
</div>
</div>
I wrote this HTML/CSS code trying to align a div to the bottom inside another div:
I want to align this last div in the col-md-2 to the bottom of the sidebar-container which height is 100%. I tried adding the bootstrap class align-bottom but somehow this doesn't work. Could anyone help me out?
Suppose you have 2 divs. Div A(Outer) and Div B(Inner). To achieve your task just place Div B code in Div A code and in Div B css class add this
position : absolute
bottom : 0
You can also just use bootstrap flexbox to do this.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="d-flex align-items-start flex-column bg-success" style="height: 200px;">
<div class="mb-auto p-2">Flex item-1</div>
<div class="p-2">Flex item-2</div>
<div class="p-2">Flex item-3</div>
</div>
<div class="d-flex align-items-end flex-column bg-info" style="height: 200px;">
<div class="p-2">Flex item-a</div>
<div class="p-2">Flex item-b</div>
<div class="mt-auto p-2">Flex item-c</div>
</div>
align items to the left or right make sure that you include the entire d-flex align-items-end flex-column on the parent element and choose start or end depending if you want it to be aligned left or right.
align item to the bottom Then, use mt-auto on the div that you want to stick to the bottom of the parent.
When using Bootstrap grid system, my go-to solution is like this:
add d-flex to each col-*
add d-flex flex-column to each card-body
add mt-auto mx-auto to the last element (or last div of elements) I want to stick to the end
This prevents any further styling mess-up in my opinion.
Relevant Documentation:
Flex Alignment in Bootstrap 5.0: https://getbootstrap.com/docs/5.0/utilities/flex/#align-items
Vertical Alignment in Bootstrap 5.0: https://getbootstrap.com/docs/5.0/utilities/vertical-align/
Relevant Code:
What worked for me to align a div (of text) at the bottom of a row/container
<div class="d-flex align-content-end flex-wrap mb-2">
<span class="display-4 fw-bold text-black text-start mt-0 mb-0">Active Mural Projects</span>
</div>
I have an image that's 1300px wide, using bootstrap I want this image to fill the full width of my container which is set to 1300px. I create a row, give it a full 12 columns and then add in the image with a class of image responsive. With this set up I get the output below.
I want my image to stretch all the way along to where my image is in my content, here is my code.
<div class="row">
<div class="container">
<div class="col-md-12">
<img src="<?php bloginfo('template_directory'); ?>/assets/img/homeBanner.jpg" alt="placeholder 960" class="img-responsive"/>
</div>
</div>
</div>
The image is set to width 100% so not sure why it isn't filling the container.
In bootstrap 4.1, the w-100 class is required along with img-fluid for images smaller than the page to be stretched:
<div class="container">
<div class="row">
<img class='img-fluid w-100' src="#" alt="" />
</div>
</div>
see closed issue: https://github.com/twbs/bootstrap/issues/20830
(As of 2018-04-20, the documentation is wrong: https://getbootstrap.com/docs/4.1/content/images/ says that img-fluid applies max-width: 100%; height: auto;" but img-fluid does not resolve the issue, and neither does manually adding those style attributes with or without bootstrap classes on the img tag.)
Check if this solves the problem:
<div class="container-fluid no-padding">
<div class="row">
<div class="col-md-12">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" />
</div>
</div>
</div>
CSS
.no-padding {
padding-left: 0;
padding-right: 0;
}
Css class no-padding will override default bootstrap container padding.
Full example here.
#Update
If you use bootstrap 4 it could be done even simpler
<div class="container-fluid px-0">
<div class="row">
<div class="col-md-12">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" />
</div>
</div>
</div>
Updated example here.
First of all if the size of the image is smaller than the container, then only "img-fluid" class will not solve your problem. you have to set the width of image to 100%, for that you can use Bootstrap class "w-100".
keep in mind that "container-fluid" and "col-12" class sets left and right padding to 15px and "row" class sets left and right margin to "-15px" by default.
make sure to set them to 0.
Note:
"px-0" is a bootstrap class which sets left and right padding to 0 and
"mx-0" is a bootstrap class which sets left and right margin to 0
P.S. i am using Bootstrap 4.0 version.
<div class="container-fluid px-0">
<div class="row mx-0">
<div class="col-12 px-0">
<img src="images/top.jpg" class="img-fluid w-100">
</div>
</div>
</div>
Here's what worked for me. Note: Adding the image within a row introduces some space so I've intentionally used only a div to encapsulate the image.
<div class="container-fluid w-100 h-auto m-0 p-0">
<img src="someimg.jpg" class="img-fluid w-100 h-auto p-0 m-0" alt="Patience">
</div>
container class has 15px left & right padding, so if you want to remove this padding, use following, because row class has -15px left & right margin.
<div class="container">
<div class="row">
<img class='img-responsive' src="#" alt="" />
</div>
</div>
Codepen: http://codepen.io/m-dehghani/pen/jqeKgv
This will do the same as many of the other answers, but will make sides flush with the window, so there is no scroll bars.
<div class="container-fluid">
<div class="row">
<div class="col" style="padding: 0;">
<img src="example.jpg" class="img-responsive" alt="Example">
</div>
</div>
</div>