I am newbie therefore your help will be much appreciated.
I'm trying to define column height but none of questions / answers I have found work for me(obviously I am doing something wrong). The idea is to have all information of page within 10 columns, keeping 1 column on each side free-of-infomration(automatically scale for different screen sizes). At the moment language bar is right above banner which doesn't look really nice. What will be correct CSS to increase language row height to 50px keeping text/links vertically aligned in the middle?
<div class="header">
<div class="container-fluid">
<div class="row language">
<div class="col-sm-11">
<span class="pull-right">LV | RU | ENG
</span>
</div>
</div>
</div>
<div class="banner">
<img border="0" src="images/banner.png">
</div>
This is one way:
<div class="header">
<div class="container-fluid">
<div class="row language">
<div class="col-sm-10 col-sm-offset-1 text-right">
LV | RU | ENG
</div>
</div>
<div class="row banner">
<div class="col-sm-10 col-sm-offset-1">
<img border="0" src="images/banner.png">
</div>
</div>
</div>
</div>
CSS:
.language {
padding-top: 15px;
padding-bottom: 15px;
}
Related
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 have three columns and I need to arrange them like this in a row:
Interested listings | Basic profile | Connections
And when the screen size is reduced to a phone size, it should be stacked like this:
Basic profile
Interested listings
Connections
So I saw a few techniques which use push and pull and tried this:
<div class="row">
<div class="col-lg-4 col-lg-push-4">
<h3 style="text-align: center;">Basic profile</h3>
</div>
<div class="col-lg-4 col-lg-pull-4">
<h3 style="text-align: center;">Interested listings</h3>
</div>
<div class="col-lg-4">
<div class="row">
<h3 class="col-12" style="text-align: center;">Connections</h3>
</div>
<div class="row">
<h3 class="col-12" style="text-align: center;">Requests</h3>
</div>
</div>
</div>
But it's appearing as this:
Basic profile | Interested listings | Connections
instead of:
Interested listings | Basic profile | Connections
I thought the col-lg-push and pull was supposed to swap the positions of the columns but I guess I'm missing something here and I'm not sure why the order remains unchanged.
You could use flex and flex order to change the column order on larger screens (I used md in the example, but you can use any size you want).
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
<div class="row d-flex">
<div class="order-md-2 col-md-4 col-lg-push-4">
<h3 style="text-align: center;">Basic profile</h3>
</div>
<div class="order-md-1 col-md-4 col-lg-pull-4">
<h3 style="text-align: center;">Interested listings</h3>
</div>
<div class="order-md-3 col-md-4">
<div class="row">
<h3 class="col-12" style="text-align: center;">Connections</h3>
</div>
<div class="row">
<h3 class="col-12" style="text-align: center;">Requests</h3>
</div>
</div>
</div>
</div>
I don't think Bootstrap has a col-lg-push-4 or a col-lg-pull-4 style.
I'm having a hard time styling my columns in a certain way. I have 2 rows containing 2 columns each of the same size.
A B
C D
I'm supposed to add a longer column that encompasses both rows next to it.
A B E
C D E
With E having the equal length of both rows. I tried separating two divs and floating each to its corresponding sides to no avail.
My code:
.announcements{
width: 300px;
height: 500px;
background: #FFFFFF;
box-shadow: 0 4px 4px 0 rgba(0,0,0,0.08);
float: right;
}
.btn-links{
width: 300px;
height: 160px;
background: #FFFFFF;
box-shadow: 0 4px 4px 0 rgba(0,0,0,0.08);
border-radius: 5px;
}
<div class="container-fluid bg-content">
<div class="content">
<div class="content-heading">
<h1> Welcome, </h1> <!--Name of user-->
<h4> What do you want to do today? </h4>
</div>
<div class="quick-links">
<div class="row">
<div class="col-md-4">
<button class="btn-links"></button>
</div>
<div class="col-md-4">
<button class="btn-links"></button>
</div>
<div class="panel announcements">
</div>
</div>
<div class="row">
<div class="col-md-4">
<button class="btn-links"></button>
</div>
<div class="col-md-4">
<button class="btn-links"></button>
</div>
</div>
</div>
</div>
</div>
However, this code produces:
ABCD being rectangle boxes, E being the long column on the right. How can I fix this that we can put more rectangle boxes on the left side and the right panel stays floating on the side? Thanks in advance.
What you want is the following, and you can check it out at this fiddle, but make sure that the window is big enough that the 4/12 of md size fits on the right otherwise responsiveness will cause it to fall bellow.
If you want to make it so that it stays on the right for smaller sizes, you would want to replace col-md... with col-sm... or add the col-sm...
<div class="container-fluid bg-content">
<div class="content">
<div class="content-heading">
<h1> Welcome, </h1> <!--Name of user-->
<h4> What do you want to do today? </h4>
</div>
<div class="quick-links">
<div class="row">
<div class="col-md-8">
<div class="col-md-6">
<button class="btn-links"></button>
</div>
<div class="col-md-6">
<button class="btn-links"></button>
</div>
<div class="col-md-6">
<button class="btn-links"></button>
</div>
<div class="col-md-6">
<button class="btn-links"></button>
</div>
</div>
<div class="col-md-4 panel announcements">
hello there
</div>
</div>
</div>
</div>
</div>
You go from the outside in. First you have a row that contains the whole thing with one div being 8/12 of the row, and the other div in it being 4/12 for the panel announcements. Then, within the first 8/12 div you have two rows, each having two divs with each having 6/12 of that space.
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'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>