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>
Related
I have a bootstrap row on my page that's divided into three columns. I wanted to add some space between the 3 columns and split each individual column internally into 2 parts. After extensive Googling, this is what I arrived on
<div class="container row h-100 mx-auto" style="margin-top: -60px;">
<div class="col-sm-4 ">
<div class="mx-3">
<div class="" style="width:50%; float: right;">
<h4>About Us</h4>
<p>Find out more about our team of working professionls</p>
</div>
</div>
</div>
<div class="col-sm-4 ">
<div class="mx-3 rounded">
<div style="width: 50%; float: left;">
<i class="fa fa-users" aria-hidden="true"></i>
</div>
<div style="width: 50%; float: right;">
<h4>Our Purpose</h4>
<p>Come up with some stuff to be put in here</p>
</div>
</div>
</div>
<div class="col-sm-4 ">
<div class="mx-3">
<h4>Our products and services</h4>
<p>Check out our vast array of products and services that we offer.</p>
</div>
</div>
</div>
Here's how it looks:
Ignore the three blue lines, that is experimental code.
Now it all works fine except I can't add a background colour to my columns. Every time I try adding any colour, it just doesn't show up. I write the line something like this:
<div class="mx-3 rounded" style="background: red;">
Now apart from this, I have a .card class defined in my main CSS file, it goes as follows:
.card{
border-radius: 15px;
}
That's it. Adding this class gives a rounded edge to a div (column) and adds a white background. However, every time I do that, the spacing is gone and the content inside my columns just sticks to the left instead of floating left and right.
How can I add a background to these columns without breaking any formatting? Or does anyone have an idea what's going on here?
First of all, I would suggest you should only have rows inside containers. If you put .container and .row together, the Bootstrap grid system doesn't work anymore because rows don't have the flexbox container parent.
Secondly, if you want 2 columns internally, why not declare a row and 2 columns? You've used that to create 3 column outer layout already. Using inline styles with floats defeat the purpose of using Bootstrap flexbox style grid system:
<div class="rounded">
<div class="row">
<div class="col-6">...</div>
<div class="col-6">...</div>
</div>
</div>
You can also utilize the built-in .card class to help you with the paddings:
<div class="row">
<div class="col-sm-4">
<div class="card border-0">
<div class="card-body">
<div class="row">
<div class="col-6"></div>
<div class="col-6">
<h4 class="card-title">Our Purpose</h4>
<p class="card-text">
...
</p>
</div>
</div>
</div>
</div>
</div>
</div>
To add background color to the .card, it's as easy as putting background color classes in:
<div class="card border-0 bg-danger">
...
</div>
demo: https://jsfiddle.net/davidliang2008/ed8bav14/36/
I am making a project based on the grid. I am using bootstrap, CSS, and HTML for making the grid. I need to display a grid like this Image. But the row span is not working properly. I am using fully div structure, not the table. My code is:
`
<div>
<div class="row">
<div class="col-md-4">
</div>
</div>
<div class="col-md-4">
</div>
<div rowspan="2" class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
`
First I would suggest using indenting to make it more readable.
You would just create 3 columns next to each other and in the middle one start a new row.
In the code example I create 1 row and 2 columns that are full width, you could also just create 2 rows.
<div class='container'>
<div class='row'>
<div class='col-4 col1'>1</div>
<div class='col-4'>
<div class='row'>
<div class='col-12 col2'>2</div>
<div class='col-12 col3'>3</div>
</div>
</div>
<div class='col-4 col4'>4</div>
</div>
</div>
https://codepen.io/anon/pen/XOYZRG?editors=1100
Use class="short-div" at col-md-6 in both the div. Remove col-md-6 from both the div, also remove rowspan.
I am trying to build a website with flash-cards to help learn the Hebrew alphabet. My Card partial view looks like this:
#model FlashCards.MultipleChoice.ViewModels.CardViewModel
<div class="index-card">
<div class="row">
<div class="col-md-offset-5"></div>
<div class="col-md-2 text-center">
#Model.Numeric
</div>
</div>
<div class="row">
<div class="col-md-offset-2"></div>
<div class="col-md-8 text-center card-symbol">
#Html.Raw(Model.UnicodeEscape)
</div>
</div>
<div class="row">
<div class="col-md-offset-2"></div>
<div class="col-md-8 text-center">
#Model.Name
</div>
</div>
</div>
Now the col-md-offset works on all but the first row, causing the card to render as in the below image:
Now why isn't the 1 in the image offset like the glyph and the name for the letter Aleph?
My CSS file for these cards only contains the following so far:
.index-card {
height: 150px;
}
.index-card .card-symbol {
font-size: large
}
I believe you're using the offset classes wrong; do not apply them to empty divs.
Your text is centered. Second and third rows have widths of 8 columns. It looks like the offset is working but it really isn't. The first row is only 2 columns wide. None of your offset divs are having any effect on the layout.
You need to do something like this, at the very least:
<div class="index-card">
<div class="row">
<div class="col-md-offset-5 col-md-2 text-center">
#Model.Numeric
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8 text-center card-symbol">
#Html.Raw(Model.UnicodeEscape)
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8 text-center">
#Model.Name
</div>
</div>
</div>
I am trying to adapt a layout on Bootstrap that I got from the designer. Two columns in the content has a small spacing, that I couldn't achieve with direct column-spacing (as it gives too much gap). Thus, I tried wrapping everything into a row and adding sub-columns inside my main columns. Here in the code, it's more clear:
<div class="container">
<div class="col-md-12 banner"></div>
<div class="row">
<div class="col-md-8">
<div class="col-md-12 leftSide">
</div>
<div class="col-md-12 leftSide">
</div>
</div>
<div class="col-md-4 rightSide">
<div class="col-md-12">
</div>
</div>
</div>
</div>
Now the spacing seems good but as I wrapped it in a row (I think), the right panel overflowed more then the banner.
It can be seen more clear on the fiddle: http://www.bootply.com/gMBrLvaK5C
The problem is the 'rightSide' panel.
How can I keep that spacing between 'leftSide' and 'rightSide', and fix the overflowing of the right column (because the spacing gets too much if I try achieving spacing with columns)? Or what is the best way to achieve that?
this is my personal solution, instead of add a class on the columns, create a div inside of a column, then you can place a div.banner and div.block like my example:
http://www.bootply.com/PEIiDnp9VD
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="banner"></div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="block"></div>
</div>
<div class="col-md-4">
<div class="block"></div>
</div>
</div>
</div>
if you want less space between the columns you can simply override Bootstrap col-md-* class by adding a class on the columns changing the padding left and right.
First of all, you need to follow proper wrapping of rows and columns. If you want consistency you need to make sure all columns are wrapped into a row.
<div class="row">
<div class="col-md-8 leftSide">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="col-md-4 rightSide">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</div>
Then apply custom margins and styling to elements inside of the columns, not columns themselves.
http://www.bootply.com/g6eLHRd1tH
I'd have two "sections" in which I am using the bootstrap 3 scaffolding to style. I am having a hard time figuring out how I might have these maintain their column spacing while still be centered on the middle of the page. For example right now it is
<content><content> ---<space>---
and i want
---<space>--- <content><content> ---<space>---
Here is what i've got.
<div class=".container-fluid" id="aboutContent">
<div class="col-md-3">
<img src="../imgs/pic.jpg" alt="Joe Brunett" id="aboutPicture"/>
</div>
<div class="well col-md-4" id="desc">
<p> text<p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3"></div>
</div>
</div>
Offsets can be used to center a div but remember that it'll work only for even columns
<div class="col-md-8 col-md-offset-2"></div>
You can even change the break-point by replacing
<div class="col-md-6 col-md-offset-3"></div>
with
<div class="col-sm-6 col-sm-offset-3"></div>