I'm incorporating bootstrap into my site, and there is a noticeable difference in the layout, particularly the navigation grid item div. This is the html code for the navigation bar:
<div id="container-i" class="container">
<div class="item logo">
<h1><a class="myName"
href="index.html">BROOKLYN</a></h1>
</div>
<div class="item links">
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li>Shop</li>
<li>Music</li>
<li>Tours</li>
<li>Contact</li>
</ul>
</div>
<div class="item menu">
<div class="menu-btn">
<div class="btn-mid"></div>
</div>
</div>
</div>
And this is the css code for the container:
.container {
display: grid;
grid-template-columns: repeat(8, 1fr);
margin-left: 0;
margin-right: 0;
}
When I add the line <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> to the header the width and height change. Here are two screenshots showing the results before and after:
I'm aware that 'container' is a class in bootstrap, so I can kind of adjust the with by changing the class to 'container-fullwidth', but even so, I still can't change the height and re-center the content vertically. I've already tried altering the style with the height attribute.
I'm trying to keep everything as ordered and as consistent and as centered as I can because I want this to be as professional as possible, so is there a way for me to reverse the changes after adding the code?
boostrap has its own classes sometimes it matches with your classes too.
so for that you have to remove bootstrap class from your html and custom class and add your css to that class.
It turns out for the display, some of the bootstrap class styles overwrite the ones that I write. So to counter this, make sure that the custom css file is declared after the bootstrap css file like this:
And make sure that each element in the layout has a class to specify what the changes apply to. Your changes should then overwrite bootstrap designs.
Related
I am using the new Foundation XY-grid on a new project. The site has a max-width of 1000px for the grid-container.
All is well.
But, i now need to make a new component for the site using the Accordion component from Foundation. No problem there either.
The problem, starts when, the background, of the open accordion element, needs to be, another bg-color, than that of the parent element (edge-to-edge).
This would not be a problem, if it was not for the fact, that i needs to fill the entire width of the page - the background color that is.
The content itself, still has a max-width of 1000px.
This is the standard markup:
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="large-12 cell">
<ul class="accordion" data-accordion data-allow-all-closed="true">
<li class="accordion-item" data-accordion-item>
Accordion header
<div class="accordion-content" data-tab-content id="deeplink1">
Accordion content
</div>
</li>
</ul>
</div>
</div>
</div>
The above works as expected, and has the same bg color as the <body> - all is good.
But, there is a variation, of the above, where the background color, differs from the <body> bg-color.
To do this, i simply wrap the grid-container, in a callout, like so
<div class="secondary callout">
<div class="grid-container">
<div class="grid-x grid-margin-x">
<!-- accordion markup -->
</div>
</div>
</div>
This also works as expected.
The problems starts, when i open an accordion item.
The background-color, of the accordion item, needs to have the background-color from the <body> (or at least, not the same as the one from 'secondary callout').
But, how do I achieve this, in the best possible way?
Example: https://codepen.io/anon/pen/WXEMyp
Wanted output:
I'm using Materialize to create a navbar like the code below shows. After that, I render a div element to hold my application but the topmost part of it gets hidden by NAV element.
<div class="navbar-fixed">
<nav class="nav-extended deep-purple">
<div class="nav-wrapper">
...
<ul id="nav-mobile" class="application right hide-on-med-and-down">
<li>...</li>
...
<li>...</li>
</ul>
</div>
</nav>
</div>
<div id="application">Shazoo</div>
My current workaround is to simply add a top margin to the DIV named application but it's hardly something I want to see in a printed book as a best practice. I'm guessing there's a specific hack for Materialize that I haven't found. The documentation seems a bit Spartan on the website.
To avoid adding the margin or an extra div, just add top padding to your body like this:
body {
padding-top: ABCpx;
}
Where ABCpx is the height of your fixed navbar.
If the navbar is positioned using "fixed" then I adding margin-top to the following div would, in my opinion, be the correct method, or else adding padding.
Twitter's documentation states that "Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element."
This is my HTML:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" class="img-responsive">
</a>
</div>
<ul class="nav navbar-nav">
<li role="navigation" class="active">NavA</li>
<li role="navigation">NavB</li>
<li role="navigation">NavC</li>
</ul>
</div>
</nav>
The only way, however, that I can get the image not to extend beyond its parent is to modify CSS:
.img-responsive {
max-height: 100%;
}
I am new to Bootstrap but my understanding is that it is better to extend its core code rather than override it. To me, adding the class img-responsive should do what it says– scale the image nicely to the parent element.
Fiddle for your reference. [EDIT] Be sure to comment out my CSS override to see what I am talking about.
What am I missing? Or is my modification considered standard practice?
.navbar-brand doesn't have a width set by default, so .img-responsive has no idea what the parent width should be, and so cannot scale to it.
By default if no width or height attributes are added to an <img> tag, the image is displayed at full size.
Your modification is correct. Or you can just apply a max-width to the .navbar-brand.
http://www.bootply.com/BGsm04iKKK
I don't believe the class img-responsive works in Bootstrap unless it's being used inside of the Bootstrap Grid.
According to the documentation on how to use an image for the navbar-brand, you may need to customize the CSS depending on your image.
Replace the navbar brand with your own image by swapping the text for an <img>. Since the .navbar-brand has its own padding and height, you may need to override some CSS depending on your image.
Source
I'm absolutely new to coding and attempting a basic website, and have used the BootStrap CSS as a basis.
I've set up nav-pills and managed to customise them thus far (spacing, font, background colours etc) but struggled for hours trying to change the background colour of my header behind the nav-pills - 1 white b/g to 2 grey b/g.
My HTML header container reads:
<div class="header">
<div class="row">
<p id="navigator">
[nav-pills code]
</>
</div>
</div>
With a lot of researching into specificity I thought this may be my problem so I tried CSS code:
.header .row #navigator {
background-color: #CCCDD9;
}
to no avail, but found that simply did work:
.header .row {
background-color: #CCCDD9;
}
now produced the desired override of the bootstrap CSS even though I was not even selecting the #navigator ID to increase rule specifity. Could someone explain why this method works?
Further, as the new background does not appear for the other website pages I did not add the #navigator header ID to, is there a method (besides adding the #navigator ID to each HTML page) of modifying my CSS which would make this override work across all pages?
In your first CSS example, you are targeting the paragraph tag within the row, but in the HTML you provided your paragraph tag is malformed (missing a closure and contains no content). Because of this, the paragraph tag is being rendered with 0 height which explains why you don't see the background color. If you add content to the paragraph tag and you add a closure, it will work with the first bit of CSS you posted.
In other words, this is not a specificity issue.
<div class="header">
<div class="row">
<div class="col-sm-12">
<p id="navigator">Testing</p>
</div>
</div>
</div>
Bootply Example
After re-reading your question, I don't think you should be using a paragraph tag at all. It looks like you were trying to use it as a container for the pills, but you should be using either an unordered list (like in the Bootstrap docs example or a div). Here's some sample code:
HTML:
<div class="header">
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-pills">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
</div>
</div>
</div>
CSS:
.nav-pills {
background-color: #CCCDD9;
}
Bootply
I'm having an issue using twitter bootstrap on my webpage http://scrapp.site90.com/ . Header is wrapped in container and has .row around it, but seems that because of margin-left: -20px this row cannot align with other content. Is it possible to fix it? I tried to change value of margin-left, but then layout gets really messed up.
Instead of using the span* you could use pull-left on the H1..
<div class="row">
<h1 class="pull-left">Take a look at our work to see what we mean</h1>
<div>
<ul class="social inline pull-right">
<li>..</li>
</ul>
</div>
</div>