I am trying figure out how to adjust some of the bootstrap CSS styling to fix an issue I am running into.
I am using the page header class to create my title which is consistent across all my pages.
On the page I am working on, there is some more information I would like to add to the right side of the page within the header.
Anytime I try to get it to appear above the line, it just goes below or in the middle and the line doesnt seem to move.
Fiddle: http://jsfiddle.net/rka18Lze/
<div class="container">
<div class="page-header">
<h3 class="text-info">A page header here</h3>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-8 text-right">
<h5 class="text-info">Owner: Bob Smith</h5>
<h5 class="text-info">Type: Desktop</h5>
<h5 class="text-info">Status: Active</h5>
</div>
</div>
</div>
Here is an example of what I am trying to accomplish:
Is there a way I can move the line down under this text; or maybe a special class to help in this one situation if needed?
This would be a Bootstrap-only solution: (Example)
<div class="container">
<div class="page-header row">
<div class="col-xs-6 col-sm-6 col-sm-6 col-md-8">
<h3 class="text-info">A page header here</h3>
</div>
<div class="col-xs-6 col-sm-6 col-sm-6 col-md-4 text-right">
<h5 class="text-info">Owner: Bob Smith</h5>
<h5 class="text-info">Type: Desktop</h5>
<h5 class="text-info">Status: Active</h5>
</div>
</div>
</div>
Creates:
You should use the same row for both elements. Take a look:
<div class="container">
<div class="row">
<div class="col-xs-8">
<div class="page-header">
<h3 class="text-info">A page header here</h3>
</div>
</div>
<div class="col-xs-4 text-right">
<h5 class="text-info">Owner: Bob Smith</h5>
<h5 class="text-info">Type: Desktop</h5>
<h5 class="text-info">Status: Active</h5>
</div>
http://jsfiddle.net/jozreLj2/
You will need to position the <div>with the information first before the <div> with the page header. Then apply the class .pull-righton the <div> with the information.
Here is a jsfiddle
<div class="container">
<div class="row pull-right">
<div class="col-md-4 col-md-offset-8 text-right">
<h5 class="text-info">Owner: Bob Smith</h5>
<h5 class="text-info">Type: Desktop</h5>
<h5 class="text-info">Status: Active</h5>
</div>
</div>
<div class="page-header">
<h3 class="text-info">A page header here</h3>
</div>
</div>
Related
I have below text link list appearing in a col-md-3. I want to appear them as right-justified. See attached image below.
Current Coding is like below with "text-right" in the col-md-3, I tried text-justify too didn't seem to be working,
Any idea on how to make this the way i wanted as the image?Should i use a '<ul>' or '<li>' instead?
<div class="col-md-3 mt-2 text-right">
<div class="row mt-3">
<div class="col-md-12">
<b>View Profile</b>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<b>Send Message</b>
</div>
</div>
....
<div class="row mt-3">
<div class="col-md-12">
<b> View Proposal </b>
</div>
</div>
</div>
Don't use text-right on the container. Instead, turn the col-md-12 divs into col-md-6 and use an offset i.e. offset-6. Now the element takes up 6 columns and is offset 6 columns, which puts it to the right of it's parent element.
More information about offsets can be found about halfway down the Bootstrap Grid documentation.
Here's the code demonstrating how to do this:
<div class="col-md-3 mt-2 container">
<div class="row mt-3">
<div class="col-md-6 offset-6 inner">
<b>View Profile</b>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6 offset-6 inner">
<b>Send Message</b>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6 offset-6 inner">
<b> View Proposal </b>
</div>
</div>
</div>
Here it is on Codepen
I Just updated my Codepen: https://codepen.io/shnigi/pen/jOWmqLe
It really depends how you want to place your grids and how much content they are going to have.
<div class="col-md-12 row">
<div class="col-md-3 offset-9 text-right">
<b>View Profile</b>
</div>
</div>
<div class="col-md-12 row">
<div class="col-md-3 offset-9 text-right">
<b>Send Message</b>
</div>
</div>
<div class="col-md-12 row">
<div class="col-md-3 offset-9 text-right">
<b>View Proposal</b>
</div>
</div>
Here I have created three rows which all span 12 columns. Then inside the rows I have element which spans 3 columns and has offset of 9 totalling 12 columns. Then I have placed text-right to make the text float on right inside the 3 column element.
I have this layout made with bootstrap each witdth is 4 units
This is what im trying to achive
Basically I want last elements to stretch to fill.
If there were only four elements last one should be full width.
My attempt
I tried to add flex-fill and flex-grow-1 to each column but it doesn't seem to change anything.
Can I achive this effect whithout js?
Code
<div class="container">
<div class="d-flex justify-content-around row">
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
Assuming you want the default columns to have width 4, like col-md-4, I can suggest the following approach:
Do not specify column width in the HTML and justify the content evenly:
<div class="container">
<div class="d-flex justify-content-evenly row">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
Then set the minimum size of all columns:
.my-2 {
flex-basis: 33.3%;
min-width: 33.3%;
}
Use equal-width utility of bootstrap. Divide the area in 2 rows with same width (col-md-8 here) and then place as many divs of equal width.
Sample below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="d-flex justify-content-around row">
<!-- row-1 -->
<div class="row col-md-8">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
</div>
<!-- row-2 -->
<div class="row col-md-8">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
You can create using 'Equal-width', for more details go through the Bootstrap 4 Grid System.
https://getbootstrap.com/docs/4.0/layout/grid/#equal-width
Bootstrap comes up with a lot of different solutions to achieve multiple views. What you've been trying so far was almost correct. However, your last col ist currently just looking a bit wrong. You might exchange your last cols classes by the following.
<div class="my-2 col flex-grow">
This does simply 2 things.
Using col you're letting flexbox decide how much space to take
Adding flex-grow you're telling flexbox to use and fill up any left space
This question already has an answer here:
Bootstrap 4.0 Grid System Layout not working
(1 answer)
Closed 4 years ago.
My page has three cards in it as shown in image 1. The cards are not the same width in columns 1. When testing it on the mobile (Chrome) they are all different widths and the bottom two cards are touching as shown in image 2.
How do I get the columns on the left to be the same width and maintain responsiveness and size when on mobile? I'm expecting uniform width and height on both web and mobile.
My code is:
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">
<div class="col-lg-12">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">Numbers</h6>
</div>
<div class="card-body" style="font-size: small; overflow-y: scroll;">
My Content
</div>
</div>
<div class="col-lg-12">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">More Numbers</h6>
</div>
<div class="card-body" style="font-size: small;">
My Content
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">Some stuff</h6>
</div>
<div class="card-body" style="font-size: small;">
My Content
</div>
</div>
</div>
</div>
Layout on web page:
The layout on mobile:
https://www.codeply.com/go/Fia8Y6YPNl
You're breaking the bootstrap rule of always having div.col-* being a child of a div.row. A div.col-* cannot be a direct child of another div.col-*. This is likely your issue.
Try this:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">Numbers</h6>
</div>
<div class="card-body" style="font-size: small; overflow-y: scroll;">
My Content
</div>
</div>
</div>
<div class="col-md-12">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">Numbers</h6>
</div>
<div class="card-body" style="font-size: small; overflow-y: scroll;">
My Content
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">Numbers</h6>
</div>
<div class="card-body" style="font-size: small; overflow-y: scroll;">
My Content
</div>
</div>
</div>
</div>
</div>
I have already created this basic web page that has a header with an image and words, then below that header I have 3 blocks of text, I have one last thing to add which is another block of text below the 3 others. This block needs to be centered and extend downward instead of sideways when the text is long.
See layout example.
Here is a live example with lots of text.
Here is my current code
<div class="container-fluid">
<div class="row text-left">
<p>Having trouble viewing this email? View in browser</p>
</div>
</div>
<div class="container-fluid page-header">
<div class="row text-center">
<div class="col-xs-12">
<img src="http://ssiclouddev.azurewebsites.net/Content/Images/Icons/favicon-96x96.png" />
<h1>Susquehanna Software Inc.</h1>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row text-center">
<div class="col-xs-12 col-md-4">
<h3>From: <% =Request.QueryString["From"] %></h3>
</div>
<div class="col-xs-12 col-md-4">
<h3>Email: <% =Request.QueryString["FromEmail"] %></h3>
</div>
<div class="col-xs-12 col-md-4">
<h3>Subject: <% =Request.QueryString["FromSubject"] %></h3>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row text-center">
<div class="col-xs-12">
<div class="col-xs-6">
<h3><% =Request.QueryString["Content"] %></h3>
</div>
</div>
</div>
</div>
Replace
<div class="col-xs-12">
<div class="col-xs-6">
<h3><% =Request.QueryString["Content"] %></h3>
</div>
</div>
With
<div class="col-xs-6 col-xs-offset-3">
<h3><% =Request.QueryString["Content"] %></h3>
</div>
HTML (you shouldn't nest col- classes in another col- class without new row):
<div class="container-fluid">
<div class="row text-center">
<div class="col-xs-6 col-xs-offset-3">
<h3><% =Request.QueryString["Content"] %></h3>
</div>
</div>
</div>
CSS (allow long words to be able to break and wrap onto the next line):
h3 {
word-wrap: break-word;
}
Okay, your example actually is working fine. But because your content is just one massive word it continues outside of the parent. To check this, add this CSS: word-wrap:break-word to your h3.
I suggest using a source of dummy text such as Ipsum Lorem or Bacon Ipsum in future
I'm trying to have a nice grid of items on my site using Bootstrap 3 grid, while each item has a different height.
The problem is that i get different spaces between the items.
Forgive me for the long code, I had to write 6 items in order to show the problem. Once you read the first you'll notice it repeats but with different length due to different item description.
<div class="container">
<div class="row-fluid">
<div class="col col-sm-6 col-md-4">
<div class="result-padder">
<div class="box">
<p class="boxTitle">vendor1</p>
<p class="boxDescription">Description of vendor1</p>
</div>
</div>
</div>
<div class="col col-sm-6 col-md-4">
<div class="result-padder">
<div class="box">
<p class="boxTitle">vendor2</p>
<p class="boxDescription">Description of vendor2 which is longer and the layout takes more than one line...</p>
</div>
</div>
</div>
<div class="col col-sm-6 col-md-4">
<div class="result-padder">
<div class="box">
<p class="boxTitle">vendor3</p>
<p class="boxDescription">Description of vendor3</p>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col col-sm-6 col-md-4">
<div class="result-padder">
<div class="box">
<p class="boxTitle">vendor4</p>
<p class="boxDescription">Description of vendor4</p>
</div>
</div>
</div>
<div class="col col-sm-6 col-md-4">
<div class="result-padder">
<div class="box">
<p class="boxTitle">vendor5</p>
<p class="boxDescription">Description of vendor5</p>
</div>
</div>
</div>
<div class="col col-sm-6 col-md-4">
<div class="result-padder">
<div class="box">
<p class="boxTitle">vendor6</p>
<p class="boxDescription">Description of vendor6</p>
</div>
</div>
</div>
</div>
</div>
The result is that the first row is set right but the second row comes out bad.
I want the spaces between all items to be the same, making it much more fluid.
Note: the heights of the items change all the time, so it has to work with all set of heights.
Take a look at it, you need to resize the result window to max in order to see the problem: http://jsfiddle.net/asafusan/09egpzkj/6/
How can I fix it?
I'm a rookie in programing so please explain extensively.
Thanks
i happen some time if you put less data then other so it become some irregular shape,
for this you have to give a fix height to your div, but it cause one issue that is it will be in same height in mobile or tablet as your applied,
so for this you have use media queries for mobile version
i am declaring another class that is grid, and give static height
Your code looks good, I would use a visual border to see the code. I created a mockup for you here
[http://www.bootply.com/Pzn15AfwyA][1]
.container {
border: 1px solid blue;
}
.result-padder {
border: 1px solid red;
margin-bottom: 10px;
}
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-md-4 col-lg-4">
<div class="result-padder">
<h1>vendor1</h1>
<p>Description of vendor1</p>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="result-padder">
<h1>vendor1</h1>
<p>Description of vendor1</p>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="result-padder">
<h1>vendor1</h1>
<p>Description of vendor1</p>
</div>
</div>
</div><!-- .row 1 -->
<div class="row">
<div class="col-md-4 col-lg-4">
<div class="result-padder">
<h1>vendor1</h1>
<p>Description of vendor1</p>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="result-padder">
<h1>vendor1</h1>
<p>Description of vendor1</p>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="result-padder">
<h1>vendor1</h1>
<p>Description of vendor1</p>
</div>
</div>
</div><!-- .row 2 -->
</div>
</div>
[1]: http://www.bootply.com/Pzn15AfwyA