im trying to split row (col-md-12 = full width of row) for 3 parts - col-md-8 + col-md-2 + col-md-2, but bootstrap class col doesn't work as it shoud and im getting 3x columns sticked 2 each other :(
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- Body -->
<body style="background-color:gray; margin: 0">
<div class="container-fluid" style="height: 5%; background-color: green;">
<div>
<div class="row form-inline">
<div class="col-md-8" style="display: inline-block">something</div>
<div class="col-md-2" style="display: inline-block">something2</div>
<div class="col-md-2" style="display: inline-block">something3</div>
</div>
</div>
</div>
</body>
What I'm getting:
What I want to get:
PS:
I know that i can use style width 70% + 15% + 15% but i think it s not the point of using bootstrap :/
Assuming based on your screenshot, it looks like your device width is less than 768px. If that is, therefore it works as expected in your screenshot since you're using col-md - Read more about bootstrap's responsive breakpoints here
If you do not want to make it responsive, then you should just use col-{n}. Read more about Bootstrap 4 grid options
E.g.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<h5> Current approach </h5>
<div class="container-fluid" style="height: 5%; background-color: #cfcfcf;">
<div>
<div class="row form-inline">
<div class="col-md-8" style="display: inline-block">col-md-8</div>
<div class="col-md-2" style="display: inline-block">col-md-2</div>
<div class="col-md-2" style="display: inline-block">col-md-2</div>
</div>
</div>
</div>
<br />
<br />
<h5> Expected approach </h5>
<div class="container-fluid" style="height: 5%; background-color: #a0a0a0;">
<div>
<div class="row form-inline">
<div class="col-8" style="display: inline-block">col-8</div>
<div class="col-2" style="display: inline-block">col-2</div>
<div class="col-2" style="display: inline-block">col-2</div>
</div>
</div>
</div>
Related
I'm trying to make three new columns inside the my center column. But when I nest, they do go inside the centered column, but they also stack at the bottom of it. I'm interested in the center column can work as a background kind of like a container for the other three columns.
Maybe this is not how to use Bootstrap and columns? Should I instead just created some three divs that are not columns, but regular divs inside the column?
I'm trying to design a website where it has tree major columns, in which inside the center columns there should be three evenly spaced boxes/images/blocks.
I'm using Bootstrap version: 4.6.1
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="bg-secondary col-sm-2">
1
</div>
<div class="bg-primary col-sm-8">
2
<div class="row">
<div class="bg-warning col-sm-4">
2.1
</div>
<div class="bg-warning col-sm-4">
2.2
</div>
<div class="bg-warning col-sm-4">
2.3
</div>
</div>
</div>
<div class="bg-secondary col-sm-2">
3
</div>
</div>
</div>
I'm trying to get my column (bg-primary col-sm-8) in the center to get three more columns inside it:
For what you want, you need to use flex utility classes
.container-fluid {
height: 100vh
}
.box {
border: 5px solid red;
padding: 30px
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row h-100">
<div class="bg-secondary col-sm-2">1</div>
<div class="bg-primary col-sm-8">
<div class="row justify-content-around align-items-center h-100">
<div class="box">2.1</div>
<div class="box">2.2</div>
<div class="box">2.3</div>
</div>
</div>
<div class="bg-secondary col-sm-2">3</div>
</div>
</div>
I'm trying to create a layout that looks like the component on the image.
It's a 12 col bootstrap grid. I'm looking to make the text take up 6 cols, 1 col spacer in-between the text and the last col, and then I'd like the last col (image) to take up the rest of the horizontal space, in and out of the container.
I've trying mixing the container and container-fluid classes (not advisable according to Bootstrap docs) and it doesn't work.
How would one achieve this type of a layout using Bootstrap 4?
Image:
Existing code:
<div class="info-side">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<h2>#Model.TitleText</h2>
<p>#Model.AreaText</p>
</div>
<div class="col-1">
</div>
<div class="col-5">
<img src="#Model.Image.Url)" alt="#Model.Image.AlternativeText" style="width: 100%; height:100%;">
</div>
</div>
</div>
</div>
try this
<div class="info-side" >
<div class="container">
<div class="row col">
<div class="col-6 bg-info">
<h2>#Model.TitleText</h2>
<p>#Model.AreaText</p>
</div>
<div class="col-1 bg-warning">
</div>
<div class="col-5 bg-info">
<img src="#Model.Image.Url)" alt="#Model.Image.AlternativeText" style="width: 100%; height:100%;">
</div>
</div>
</div>
</div>
I added col to class row #div tag. It expands to all space available.
In another hand, mix containers regular and fluid is possible, but you have to take care of hierarchy: fluid is widest as regular, so regular must be included alone or inside a fluid class.
See this answer: link
Good Luck!
I've come to the following solution which creates the layout in my original image in the question.
I had to make one row position absolute, this way the two containers are overlapping each other.
<div class="info-side">
<div class="text-side container" style="position: relative;" >
<div class="text-area" style="position: absolute;">
<div class="row">
<div class="col-6 d-flex align-items-center" style="height: 600px;">
<div class="text-items">
<h2>#Model.TitleText</h2>
<p>#Html.Raw(Model.AreaText)</p>
</div>
</div>
</div>
</div>
</div>
<div class="image-side container-fluid">
<div class="row">
<div class="col-7"
<div class="col-5" style="height: 600px; ">
<img src="#Model.Image.Url" alt="#Model.Image.AlternativeText">
</div>
</div>
</div>
</div>
I am new to bootstrap and now making a website with it.
I want to align small images in one row for my mobile view. The code is used for it is below
<div class="mobile">
<div class="container">
<div class="row">
<div class="col-sm-1 col-xs-1">
<img src="assets/img/icon/birthday.png" alt="" style="height: 50px; width: 50px;"><p style="text-transform: uppercase;"><b>Birthday</b></p>
</div>
<div class="col-sm-1 col-xs-1">
<img src="assets/img/icon/birthday.png" alt="" style="height: 50px; width: 50px;"><p style="text-transform: uppercase;"><b>Birthday</b></p>
</div>
</div>
</div>
</div>
with this, the result is below
Not in one row
All I want is that it appear side to side and not stacked. Please help me
Thanks in advance
col-sm-1 is too small and the width doesn't fit the content that the reason it broke line.
so set col-sm->1
Also in bootstrap 4 there is no xs size. so remove it
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="mobile">
<div class="container">
<div class="row">
<div class="col-sm-2">
<img src="https://i.stack.imgur.com/3mG2d.jpg" alt="" style="height: 50px; width: 50px;"><p style="text-transform: uppercase;"><b>Birthday</b></p>
</div>
<div class="col-sm-2">
<img src="https://i.stack.imgur.com/3mG2d.jpg" alt="" style="height: 50px; width: 50px;"><p style="text-transform: uppercase;"><b>Birthday</b></p>
</div>
</div>
</div>
</div>
This question already has answers here:
Remove padding from columns in Bootstrap 3
(26 answers)
Remove gutter space for a specific div only
(11 answers)
Closed 4 years ago.
I am trying to use bootstrap to create columns and rows to place my images however too much padding is being added around the images which is preventing my images from looking like the design:
This is how I structured my HTML:
<!-- header -->
<header>
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="col-md-12">
<img src="{!! $bg_image_col1_row1['url'] !!}" alt="{!! $bg_image_col1_row1['alt'] !!}" />
</div>
<div class="col-md-12">
<img src="{!! $bg_image_col1_row2['url'] !!}" alt="{!! $bg_image_col1_row2['alt'] !!}" />
</div>
</div>
<div class="col-md-7">
<div class="row">
<div class="col-md-6">
<img src="{!! $bg_image_co21_row1_col1['url'] !!}" alt="{!! $bg_image_co21_row1_col1['alt'] !!}" />
</div>
<div class="col-md-6">
<img src="{!! $bg_image_co21_row1_col2['url'] !!}" alt="{!! $bg_image_co21_row1_col2['alt'] !!}" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="container">
<h1>#php(get_field('front-page__title'))</h1>
<div>#php(get_field('front-page__slogan'))</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-9">
<div class="container">
<div class="zeo-cases-button">
#php(get_field('front-page__button--text'))
</div>
</div>
</div>
<div class="col-md-3">
<div class="container">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- /header -->
But this is resulting in this:
My question. Did I write the bootstrap elements correctly? How should I go about the padding in case the bootstrap elements are written correctly so that I can match the requirements of the design? Thanks a lot for your time!
Add the class no-gutters to each div class="row" to remove the spaces between the col-* elements
See the Bootstrap documentation about gutters.
<div class="row no-gutters">
<div style="background-color:#aaa" class="col-sm-3">a</div>
<div style="background-color:#bbb" class="col-sm-3">b</div>
<div style="background-color:#ccc" class="col-sm-3">c</div>
<div style="background-color:#ddd" class="col-sm-3">d</div>
</div>
Here a working jsfiddle that also removes the "visual padding" once the images doesn't fit 100% into the container.
Bootstrap : "The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns."
You should try to do :
<div class="row no-gutters">
<div class="col-6">
<img ... />
</div>
<div class="col-6">
<img ... />
</div>
</div>
Add below class hope it works for you.
.margin0-padding0 {
margin-left: 0px !important;
margin-right: 0px !important;
padding: 0px !important;
}
I'm trying to show two divs next to each other using Bootstrap, but there is a distance between them. How can i place them exactly next to each other.
The code:
<div class="col-lg-8 col-lg-offset-2 centered">
<div style="float: left; border: 1px solid; width: 227px; height: 50px;"></div>
<div style="float: right; border: 1px solid;width: 227px; height: 50px;"></div>
</div>
Image illustration:
Look into grids in Bootstrap.
You could do something like this:
<div class="row">
<div class="col-xs-6">div 1</div>
<div class="col-xs-6">div 2</div>
</div>
Adding to Lschessinger's answer you could use offset to center the blocks. Look here under Offsetting columns
Maybe this is what you're looking for?
<style>
.border {border: 1px solid #CCC;}
</style>
<div class="row">
<div class="col-xs-2 border col-xs-offset-4">div 1</div>
<div class="col-xs-2 border">div 2</div>
</div>
Or if you have to stick to your code with the inline styles and specific widths then maybe this, you can increase the width between by increasing the width 454px to 464px for a 10px gap, and so on:
<div class="col-lg-12">
<div style="width: 454px;" class="center-block">
<div style="border: 1px solid; width: 227px; height: 50px;" class="pull-left"></div>
<div style="border: 1px solid; width: 227px; height: 50px;" class="pull-right"></div>
</div>
</div>
One approach is to have a row containing two div elements. The elements will seemingly stack next to each other due to the fact that Bootstrap is built with flexbox.
In the following example I'm using the class justify-content-center to center both elements. And col-auto that will size columns based on the natural width of their content.
div{border:1px solid blue}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
<div class="row justify-content-center p-3">
<div class="col-auto">
content one
</div>
<div class="col-auto">
content two
</div>
</div>
</div>
Align the elements to the left by using justify-content-start
div{border:1px solid blue}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
<div class="row justify-content-start p-3">
<div class="col-auto">
content one
</div>
<div class="col-auto">
content two
</div>
</div>
</div>
Align the elements to the right by using justify-content-end
div{border:1px solid blue}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
<div class="row justify-content-end p-3">
<div class="col-auto">
content one
</div>
<div class="col-auto">
content two
</div>
</div>
</div>
Note: This codes do not have breakpoints. If you want to add breakpoints use this format: col-{breakpoint}-auto or/and justify-content-{breakpoint}-auto