What's the most reliable and efficient way to make bootstrap fixed to top header with 3 text elements: 2 on the sides and 1 in the center.
It's important that the header must not fold or collapse on mobile or tablet.
Issues:
the center text element isn't centered (classes navbar-right/left/center don't work)
the header keeps on
collapsing when resizing.
This is my current code:
<nav class="navbar navbar-default navbar-fixed-top" style="margin-left: auto;
margin-right: auto;">
<div class="row-fluid">
<div class='navbar-left'>
<p class="navbar-text" id="left">Text text text
<br>text text</p>
</div>
<div class='navbar-center'>
<p class="navbar-text" id="center">Text text text
<br>text text</p>
</div>
<div class='navbar-right' id="right">
<p class="navbar-text">Text text text
<br>text text</p>
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="buffer">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more ยป</a>
</p>
</div>
</div>
</div>
Jsfiddle
Bootstrap docs say:
"The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen)."
Override the less variable #grid-float-breakpoint to 0px for eliminating collapsability.
For centering, You may wish to consider just using custom code in the header since you're not using the bootstrap responsive features.
There is no navbar-center class in Bootstrap 3, and there is no longer a row-fluid class (the DIV tag is not closed in your HTML).
You can create a custom class to center the text and use pull-right and pull-left classes since they're not impacted by the collapsing navbar:
http://codeply.com/go/R2JwHRpzXN
.navbar-center
{
position: absolute;
width: 100%;
top: 0;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Related
I am running into an issue where I need to extend the height of a single bootstrap card in a tile-module layout, and not have it effect the height of any other card in the row. The following html structure is what I have:
<div class="module tile-module">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-4">
<div class="card">
<div class="card-img-top">
</div>
<div class="card-body">
<h3>Title Here</h3>
<p class="card-text">Long text here...</p>
</div>
</div>
<div class="card">
<div class="card-img-top">
</div>
<div class="card-body">
<h3>Title Here</h3>
<p class="card-text">Long text here...</p>
</div>
</div>
<div class="card">
<div class="card-img-top">
</div>
<div class="card-body">
<h3>Title Here</h3>
<p class="card-text">Long text here...</p>
</div>
</div>
</div>
</div>
</div>
</div>
My goal here is to dynamically hide/show a card's paragraph text div depending if the content is longer than X characters. I can add the JavasScript logic showing the button which extends the height of a single card just fine. The problem that I'm running into is now when I click the 'show' logic for a single card and extend the height of this paragraph, it extends the height for all cards in that section, and not just the single card I am adjusting. I am adding the css style directly to the element and not all elements with the single class, to try to target only this single card and not all cards with the same css class: but this doesn't help either.
Every online question I find is where the OP is trying to extend height for all cards in a row, which is the opposite of what I am trying to do and I can't figure out a solution. I would rather not have to rebuild this entire layout to meet my requirements, but then again I'm new to bootstrap and not sure how to best approach this requirement.
I don't have a great way to test this but I'd assume the .card in Bootstrap is using flexbox to create the tile layout. By default, a row of flex elements all try to maintain the height of the tallest element.
I don't know Bootstrap well enough to provide a native solution. But I can tell you how I would approach it in normal CSS.
You can try adding align-self: flex-start; to the individual .card you're expanding (I'd toggle a js class that overrides the Bootstrap class) as discussed here.
However, I'd be willing to bet that will cause other rows to have issues and your card will overlap in strange ways.
The way to fix that is by creating a wrapper to get the flex layout properties. Then on expand give the card absolute position, z-index and allow the content to expand its height.
HTML:
<div class="cardContainer>
<div class="card">card content ... </div>
</div>
And CSS:
.cardContainer {
position: relative;
}
.card.expanded {
position: absolute;
top: 0;
left: 0;
right: 0;
/* no bottom position to allow content to expand it outside the container */
z-index: 50 /*some higher number to put it at the top */
}
<div class="input-group Flugo_group">
<h4 class="text-center">or</h4>
</div>
i am try to show in center but not working.second time using position relative but not working properly in responsive design.
I was facing the same problem in Bootstrap 4.1.0. Here is what I figured out:
I was doing this (having my paragraph inside div with class "row"):
<div class="container-fluid">
<div class="row" style="background-color: #009688;">
<p class="text-center" style="color: #fff;"> Meet me at</p>
</div>
</div>
Later I removed the class and it worked.
<div class="container-fluid">
<div style="background-color: #009688;">
<p class="text-center" style="color: #fff;"> Meet me at</p>
</div>
</div>
Bootstrap 3
v3 Text Alignment Docs
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
Bootstrap 4
v4 Text Alignment Docs
<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
In Bootstrap 4, for aligning center position:
Use class= "mx-auto"
example:
<p class="mx-auto">Kailash</p>
It will align the text horizontally center position.
I solved it this way.
<section className="d-flex">
<span className="mx-auto">Hello World!</span>
</section>
Bootstrap v5.
The input group field has display: flex which causes elements inside, including your paragraph, to not be at 100% width, but the width of their content only. The text is centred, however, the length of the paragraph is only as long as the characters or. To counter this you could use mx-auto which would centre the paragraph using margin auto on the X-axis, or w-100 which will make the paragraph be 100% the length of the parent instead of just something like width: max-content. The issue here isn't with the Bootstrap utilities, but rather flexbox.
I would strongly suggest that you use input group as shown in the documentation only. This is intended to create an inline group of buttons and it is not expected to have any other elements. I would altogether suggest removing the input group class.
It's most likely that you have your own stylesheet and your <h4> tag has text-align: left; or something like that. It could be .input-group or .Flugo_group as well. We'd need to see your code though.
Edit: Or even something as simple as what contains any of your code could be the problem.
UzumakiL answer was ok so my answer is based on his example.
I tried to fix it bootstrap way and found you need to add a col to center the header.
Try add col then center the header in there.
Something like that:
<div class="container-fluid">
<div class="row bg-dark">
<div class="col-12 text-center">
<p class="text-success"> Text Center</p>
</div>
</div>
</div>
jsfiddle solution
I'm using the Bootstrap 3 grid to hide/show nav bar content based on whether or not the user is using an extra small device.
I'm using .hidden-xs and .visible-xs classes. These classes appropriately hide/show the content, but I'm running into two problems:
(1) Hiding the content also shrinks the column spacing by .col-xs-5 because the div is hidden. I tried adding .visible-xs to a subsequent div and using .col-xs-5 to make up the empty space. This works, but only if I place content inside the divs. I just want the columns to be spaced out.
(2) On XS view size, the final item on the Nav bar "Nav" jumps to the next row. I have only accounted for 12 total columns.
See this JSFiddle. I'm trying to nly show "Welcome" on large view and show nothing on XS view.
I here's an idea, you can try instead of adding content. This CSS trick uses :before and :after CSS pseudo-classes.
.no_content {
display: block;
content: "";
width: 151px;
height: 35px;
background: transparent url(tape.png) 0 0 no-repeat;
}
<div class="no_content"></div>
I would look at the grid system further. I believe there is an offset that you can use to offset the div like this:
<div class="row">
<div class="col-xs-5 col-xs-offset-5></div>
<div class="col-xs-2></div>
</div>
Use the pull-right bootstrap class instead of trying to make empty div's fill in the space.
Completely remove the div you added in item (1) to "make up the space". On the div containing "Nav" set the class as pull-right col-xs-1. So the code from your JSFiddle becomes:
<div class="container">
<div class="row" id="header">
<div class="col-xs-5" id="brand-wrapper">
<div class="brand">Brand</div>
</div>
<!-- Hidden on XS Devices -->
<div class="hidden-xs col-xs-5">
<p>
Welcome
</p>
</div>
<!-- Nav -->
<div class="pull-right col-xs-1" id="toggle-wrapper">
<p>Nav</p>
</div>
</div>
</div>
I'm trying to set some divs to width: 100% on Twitter Bootstrap 3 (including no paddings or margins).
JSfiddle: http://jsfiddle.net/rq9ycjcx/
HTML:
<div class="container">
<header>
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x50">
</div>
<div class="col-md-10">Menu</div>
</div>
<div class="row gray">
<div class="col-md-6">
<h1>Page Title</h1>
</div>
<div class="col-md-6">
<div class="breadcrumbs">Main page > page </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/350x150" />
</div>
</div>
</header>
<footer>
<div class="row">
<div class="col-md-12">Content</div>
</div>
<div class="row dark">
<div class="col-md-3">Footer 1</div>
<div class="col-md-3">Footer 2</div>
<div class="col-md-3">Footer 3</div>
<div class="col-md-3">Footer 4</div>
</div>
</footer>
</div>
What is the right way to get image http://placehold.it/350x150 width: 100%, including no paddings or margins?
Page title and breadcrumbs height is 80px.
If I resize window to smaller screen (e.g. mobile), text Main page > page disappears (it's somewhere but not on own row).
How to fix it?
Use <div class="container-fluid">. As per Bootstrap Docs: Use .container-fluid for a full width container, spanning the entire width of your viewport.
There is 0 padding on container-fluid.
In your code you have what appears to be body content in your header and you also have a div class="container" outside of your header and footer. This is not correct, you should have your container/container-fluid inside of your body. Also for your header you should use <nav="nav navbar-nav">.
Updated Fiddle
As suggested above, you can create a helper class
.padding-0 {
padding: 0;
}
and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:
<div class="row">
<div class="col-md-12 padding-0">
<img src="http://placehold.it/350x150" />
</div>
</div>
For the second problem, set height of .gray class to auto :
#media () {
.gray {
height: auto;
}
}
Note: You could also remove line-height: 80px, it's optional :)
http://jsfiddle.net/rq9ycjcx/8/
There is no "right" way to do that in Bootstrap 3. It means you have to reset padding for the exact column.
You can create a class such as this one:
.col-md-12.resetPadding { padding:0px }
About Main page > page disappearing, I don't see this problem on my browsers (tested on Chrome and FF), but you have line-height: 80px there and as you said your breadcrumbs div has height: 80px;, so try to reduce line-height property and see how it works.
A simple way would be to remove the <div class="col-md-12">...</div> and add your content directly inside the row tag. The row tag removes the left & right gutters, whereas the cold-md-12 essentially adds the gutters back in.
The Bootstrap 3 documentation says that for single full width items you don't need any markup, eg just wrap it in <p> tags. However this will show the 15px gutters due to the page markup. So by simply adding in the row tag and placing your content directly inside this you will get 100% width content and be compliant with the BS3 documentation.
I am trying to get my footer, which has a grey color to show this color all the way to the bottom in my responsive design. It goes all the way across the page when in PC view mode, when I take it to the mobile size, the box only shows for half of the footer and then cuts off. I am not sure why it's not working for me.
Thanks ahead of time for taking a look.
HTML:
div id="footer">
<div class="container">
<div class="row">
<h3 class="footertext">About Us:</h3>
<br>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/w8lycl.jpg" class="img-circle" alt="the-brains">
<br>
<h4 class="footertext">Sitemap info 1</h4>
<p class="footertext">here is some site map info<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/2z7enpc.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">Sitemap info 2</h4>
<p class="footertext">here is some more site map info<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi61.tinypic.com/307n6ux.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">sitemap info 3</h4>
<p class="footertext">This is some more of it.<br>
</center>
</div>
</div>
<div class="row">
<p><center>Contact Stuff Here <p class="footertext">Copyright 2014</p></center></p>
</div>
</div>
</div>
CSS:
#footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 280px;
background-color:#B6B6B4;
/*
You are using col-md-4 classes for your grid, causing each column take a full row in mobile view and your footer is not going all the way to the bottom of page because of its fixed height (280px).
Try using col-xs-4 for x-small devices and appropriate classes for other windows sizes.
This can be achieved by doing something like <div class="col-md-4 col-xs-6">Content</div> which means this columns will use 4 grids in desktop view and 6 grids in mobile viewport.
More documentation can be found here, under 'Grid options' section.
By the way, <center> tag is obsolete, I would recommend you to use Bootstrap's text-center CSS class.
First of all I would recommend posting your code in jsfiddle for easier debugging: http://jsfiddle.net/r7mTc/
In jsfiddle above you will see that content of the footer is way higher than the footer itself and stick out of it.
Now look here: http://jsfiddle.net/r7mTc/1/ I just deleted height line in CSS ;)
I also see few other problems in your code:
<p><center>Contact Stuff Here <p
class="footertext">Copyright 2014</p></center></p>
Tag p can contain only inline elements like span or img, so there shouldn't be nested p tags.
<p class="footertext">here is some more site map info<br>
Tag p should always has be closed, so you should add </p> after <br>
<center> tag is deprecated. Better practise is to use CSS for that - for example text-align:center for inline elements or margin:auto for blocks.