Bootstrap center div stays in long rectangle - html

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

Related

How to align text right justified in Bootstrap 4?

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.

Make col center Bootstraps

I create a "col-lg-6 text-center" inside a row but it centered only within the column itself. So I have to add 2 more columns "col-lg-3" to make the col-6 lie at center of the page.
<div class="row">
<div class="col-lg-3">
</div>
<div class="col-lg-6 text-center">
<p>Some text</p>
</div>
<div class="col-lg-3">
</div>
</div>
You guys have any way to make the col-lg-6 centered at the page without 2 col-lg-3? I'm very appreciate.
Use col-lg-offset-3 to add offset of 3 columns at left
Plunker solution :
https://plnkr.co/edit/B5Ka3V7BHio0v8ZcMcXr
<div class="row">
<div class="col-lg-offset-3 col-lg-6 text-center">
<p>Some text</p>
</div>
</div>

Col-xs-6 divs with margins always end up stacking

The picture shows what I want to render. The col-xs-6 divs are the main issue here; I'm assigning them a background-color to make each col-xs-6 look like a panel which means I also need there to be some visible separation between each col-xs-6.
However, any attempts at all to assign margins to the col-xs-6 divs results in them stacking under each other instead of side by side, irrespective of whether I'm testing on mobile or full desktop resolution.
[EDIT: Requested code]
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1" style="padding-left:0px; padding-right:0px">
<div class="row" data-bind="with: ElementPairs()[2]">
<div class="row">
<div class="col-xs-6 backgroundPanel fullpad" >
<div class="row">
<div class="col-xs-3">
<!-- Picture -->
<img class="img-responsive img-center" src="/Content/images/Land/buttons/button_blankImage.png" style="background: url('/content/images/land/buttons/button1.png') 50% 50% cover no-repeat;">
</div>
<div class="col-xs-9" data-bind="text: Caption">Some Caption here</div>
</div>
</div>
<div class="col-xs-6 backgroundPanel fullpad">
<div class="row">
<div class="col-xs-3">
<!-- Picture -->
<img class="img-responsive img-center" src="/Content/images/Land/buttons/button_blankImage.png" style="background: url('/content/images/land/buttons/button2.png') 50% 50% cover no-repeat;">
</div>
<div class="col-xs-9" data-bind="text: Caption">Some other caption here and additional description.</div>
</div>
</div>
</div>
</div>
</div>
</div>
However, any attempts at all to assign margins to the col-xs-6 divs
results in them stacking under each other instead of side by side,
irrespective of whether I'm testing on mobile or full desktop
resolution.
This is key for the answer. This is how the columns work in boostrap 3:
grid
grid-framework
As you can see, when they create grid layout, of 12 columns, they calculate widths in percentages, and corresponding paddings and margins. Every column is floating to the left (or right for RTL).
If one of the columns becomes wider than "standard" calculated value (in your case you added additional margin), then two div-blocks with of width col-*-6 are not fitting anymore in one row, and the last one floats to the left in the next line, it looks like it was stacked. This is what happening in your case (though, I don't exclude, that you simply messed up with the breakpoints :) - but you haven't provided the code snippet in the question).
If you need to enlarge margins, you need at the same time to give out the same space from paddings/width of each column, at the same time - playing responsive, and updating corresponding breakpoints. Normally, no one does it manually. It's recommended to use less or sass mixins to generate the new grid with your new parameters. The topic was well explained on their official website.
p.s. do not forget to wrap each column with row, when nesting columns. It's common mistake not to include rows to the layout, they are necessary.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Some Title</h3>
</div>
<div class="panel-body">
<p>Some Body Content Comes here</p>
</div>
<div class="panel-footer">
<p> some footer content of a box comes here</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Some Title</h3>
</div>
<div class="panel-body">
<p>Some Body Content Comes here</p>
</div>
<div class="panel-footer">
<p> some footer content of a box comes here</p>
</div>
</div></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Some Title</h3>
</div>
<div class="panel-body">
<p>Some Body Content Comes here</p>
</div>
<div class="panel-footer">
<p> some footer content of a box comes here</p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Some Title</h3>
</div>
<div class="panel-body">
<p>Some Body Content Comes here</p>
</div>
<div class="panel-footer">
<p> some footer content of a box comes here</p>
</div>
</div>
</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Some Title</h3>
</div>
<div class="panel-body">
<p>Some Body Content Comes here</p>
</div>
<div class="panel-footer">
<p> some footer content of a box comes here</p>
</div>
</div>
</div>
</div>
Here's the Best and simplest way of using bootstrap as boxes (panels as boxes).
The Bootstrap grid system requires col-* elements to be wrapped with "row": http://getbootstrap.com/css/#grid-example-basic
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Bootstrap CSS Style Issue

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>

How to keep collapsed Bootstrap columns centered

I am trying to keep some Bootstrap columns centered when the columns wrap around when the screen is shrunk.
My code looks like this:
<div class="container">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8 text-center">
<div style="font-size:36px;">Page Title</div>
</div>
<div class="col-md-2">
</div>
</div>
<div class="row text-center">
<div class="col-md-2">
</div>
<div class="col-md-2">
<div class="text-left" style="float:left;width:25%;">WWW</div>
</div>
<div class="col-md-2">
<div class="text-left" style="float:left;width:25%;">XXX</div>
</div>
<div class="col-md-2">
<div class="text-left" style="float:left;width:25%;">YYY</div>
</div>
<div class="col-md-2">
<div class="text-left" style="float:left;width:25%;">ZZZ</div>
</div>
<div class="col-md-2">
</div>
</div>
</div>
In the code above the 'Page Title' text stays centered horizontally on the screen as the screen width is reduced which is exactly what I want. I also want the four columns to stay centered horizontally when collapsed down to two columns and then when collapsed down to one column but the code above results in the columns being left aligned in the col-md-8 when wrapped. Is it possible to ensure that however the col-md-2 columns are wrapped they stay centered horizontally?
Your content is being left-aligned within their container divs by the class text-left. If you use the Bootstrap class text-center it will be centered.
Also regarding your column layout, I think you're working against the Bootstrap styles with those inline widths. I'd remove them and try using Bootstrap's own classes, like this:
<div class="container">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8 text-center">
<div style="font-size:36px;">Page Title</div>
</div>
<div class="col-md-2">
</div>
</div>
<div class="row text-center">
<div class="col-xs-12 col-sm-6 col-md-2 text-center">???
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">WWW</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">XXX</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">YYY</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">ZZZ</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2 text-center">???
</div>
</div>
</div>
This will give you full-width columns on each div at the "xs" size (extra small, or mobile), then at the "sm" size (small) they'll grow to be 50%, then at md (medium) they'll shrink to be 1/6th.
Here's a bootply for your reference: http://www.bootply.com/t9XqPsBOpB