I am new to HTML, CSS I am trying to create a website for my project however one of the requirements is it should be the responsive website.
for some reason, my yellow box becomes smaller and smaller unlike my red and blue box which are big when I clicked smartphone to view, laptop view and different another view it just the yellow box became small and thin. I wanted o to ask for help or advice to make it a responsive website thank you
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4" style="margin-left: 3%" >
<div class="color">Column 1</div>
<div class="color" >Column 2</div>
</div>
<div class="col-md-8">Column 3</div>
</div>
<style type="text/css">
.color:nth-child(1) {
background:red;
height:40%;
margin-top:5%;
margin-left: 2%;
border-radius: 4%;
width: 100%;
}
.color:nth-child(2) {
margin-top: 3%;
border-radius: 4%;
background:blue; height:260px;
}
.col-md-8 {
background:yellow; height:628px;
width: 38%;
margin-left: 15%;
margin-top: 1%;
border-radius: 9%;
}
</style>
I dont know what kind of Website this is gonna be, but try "min-width" instead of the normal "width" in the yellow column
Both the red and blue are actually responsive but because they are set to 100% width it looks like they're not doing anything. Try setting their width to the same width as the yellow and you'll see they do work.
Short answer:
Everything works as expected, due to width:38% css property in col-md-8 override.
Long answer:
First option:
What you would like to do is to create own separate classes so you don't override bootstrap classes directly
Second option:
Bootstrap most probably has all the classes ready for your use-case so try not to write your own css at all and reuse utility classes from bootstrap, please see:
https://getbootstrap.com/docs/4.0/layout/grid/
https://getbootstrap.com/docs/4.1/layout/utilities-for-layout/
https://getbootstrap.com/docs/4.1/utilities/spacing/
Please remember about proper html document layout, for your convenience here's bootstrap starter template:
https://getbootstrap.com/docs/4.0/getting-started/introduction/#starter-template
And to place css in apropriate places within the document:
https://www.w3schools.com/css/css_howto.asp
I advise going through the HTML and CSS courses on the following sites:
https://www.freecodecamp.org/ and https://www.codecademy.com/catalog/language/html-css
They're both free so familiarise yourself with basic HTML and CSS before using bootstrap. These courses also explain how to make a page responsive in the way you want and you'll gain more of an understanding of what you're trying to do and how to do it.
Related
I am working on this task where I need to put the divs in the required positions. The final result should be this:
.
I have the following code:
HTML:
<div class="activity">
<h2>Activity 5</h2>
<section class="hint"><input type="checkbox" > <h3>Hint 5</h3><i></i><div><p>Grid is <strong>not</strong> the right way to do this. In fact there is only one way to really do that...and that is with float. Remember that we float the thing we want the text to wrap around. Also remember to start by making all the shapes the right size and shape.</p><h4>Properties used:</h4><ul><li>float: left;</li></ul></div></section>
Wrap the text around the square like in this image. This is one case where Grid is NOT the right way to solve this one and will in fact make it harder if you try to use it!
<div class="content5" >
<div class="red5" ></div>
<div class="green5" ></div>
<div class="yellow5">Step 01: Continue creating the main page for your chosen web site by modifying the CSS file you created in week 9's Adding Classes and IDs to Your Website assignment. This week, you will position all of the content on your main page using the CSS positioning techniques taught in KhanAcademy. When you are done, your webpage layout should reflect what you outlined in the wireframe you designed in the assignment Your Own Site Diagram and Wireframe in week 3. <br />
If you have changed your mind on how you want the content of your main page laid out, take an opportunity to update your wireframe before completing this assignment (it is much easier to experiment with different layouts in a wireframe than it is to do so by modifying the CSS). Also, if you find that you are having trouble with using CSS positioning, feel free to review the concepts at the learn layout site: http://learnlayout.com/. You should be able to apply these principles to your site. For futher help, refer back to the Max Design site used in the beginning of the course for an example of how to implement your site design.</div>
<div class="blue5"></div>
</div>
</div>
CSS:
.content5 {
/* This is the parent of the activity 5 boxes. */
position: relative;
}
.red5 {
width: 100%;
height: 100px;
background-color: red;
}
.green5 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
}
.yellow5 {
width: 100%;
height: auto;
background-color: gold;
}
.blue5 {
width: 100%;
height: 100px;
background-color: blue;
}
The code I have so far looks like this: I have tried a couple of things to make the text appear next to the div but they haven't worked. The HTML should not be modified. And I need to use CSS for this task, not bootstrap or something else. Thanks!
Add this to .green5 would work.
I've tried it and it actually works well.
.green5 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
First post so I am unsure of the format works for post but I have created a site as a newbie in which I got it to work on desktop but when on mobile, the right hand side of the website goes over another text instead of under. Any thoughts? I have trouble with getting the side bar update to appear where I want to. The solution now is to add the code between two left side divs which in turn, when minimized, the stripo goes over there divs and the following ones.
My trouble is that if i put the div at the end of the code, then the div only appears next to the last div then going down. The website is http://clinicalresearch-apps.com/index.html. Thank you.
HTML CODE
<div class="col-md-5">
<br>
<div class="navigation">
Center for Biostatistics Updates
<br>
<div class="my-text">
<p><font size="4"> Application cycle open for our Center for Biostatistics-sponsored 1-year MS in Biostatistics Program in Theory and
Methods! Learn more here
<br>
<p><font size="4">Apply now for our Center for Biostatistics-sponsored 1-year MS in Biostatistics
Program in Clinical Applications geared specifically for clinically-trained professionals! Learn more here
</div>
</div>
</div>
CSS CODE
.navigation
{
position:absolute;
left: 20px;
padding-left: 10PX;
background-color:#221f72;
opacity: .9;
width:502px;
height:745px;
color:white;
}
First off let me say good job for creating the site as newbie, many comments on what you could be doing better but awesome start, everyone starts somewhere.
Your have two main issues:
1) Your class of "navigation" is causing issues with it's current rules.
2) You are not utilizing bootstrap html/css correctly.
First update your class to something like this:
.navigation {
background-color: #221f72;
opacity: .9;
width: 100%;
height: auto;
color: white;
padding-bottom: 15px;
padding-left: 20px;
padding-right: 20px;
padding-top: 15px;
}
Removing the position : absolute solves a lot, let the element flow naturally.
Add this for your video iframes, particularly for mobile:
.navigation iframe { width: 100%; }
Next, since you are already using bootstrap, utilize it correctly. Bootstrap specifies that you should place columns inside of rows, and your rows inside of a container. You have columns and a container, but not rows around your columns!
You looks like you want to have the main column be col-md-7 and the right/side column be col-md-5, surround both of these with a <div class="row"></div>, then seeing what you get. Remember to refer to the docs: https://getbootstrap.com/docs/3.3/css/#grid
Use media screen, you can control it through its width size. Make the position relative instead of absolute
I'm using Bootstrap and I'm having trouble placing two divs next to each other. I've tried display: inline and that makes it look even worse. I created a div to hold them both called steven-and-leah and got the same result, however if use a specific type of inline such as inline-flex I get a result which near what I want, but they are too close together and cannot be separated when using that.
I'm sorry if this isn't specific enough, but I don't notice anything that even effects the code.
.steven-and-leah{
display: inline;
}
.team-bx{
width: 500px;
height: 570px;
margin-top: 80px;
border: 5px solid #FFF;
border-radius: 120px;
padding: 20px 0px 20px 0px;
overflow: hidden;
background-color: #111924;
}
You're using bootstrap wrong here. Remember that the strength of Bootstrap is on its grid.
If you want to place two divs next to each other, you simply have to apply a col-£-6 to them (£ being the device you want to target). For example:
<div class="row">
<div class="col-md-6">div number one!</div>
<div class="col-md-6">div number two!</div>
</div>
This will automatically place both divs next to each other as if they were "inline", with the huge plus of them being automatically responsive.
If this is not your question, please reframe it.
You can find great examples in their getting started site
Did you try with this. check the demo
.steven-and-leah > * {
display: inline-block;
}
Demo
You better use grid system if you have specific pattern in mind (as Obed mentioned). But if you want to have a bit of freedom use d-inline
<div class="d-inline p-2 bg-primary">box1</div>
<div class="d-inline p-2 bg-dark">box2</div>
You should manage the spacing and alignment by your own and you should not wrap the divs with class="row" div to allow d-inline to take effect.
I'm working on a thing with Bootstrap/Angular and am using ng-repeat to populate divs from an array retrieved from the database. My issue is that while the divs themselves need to have word-wrap set to auto, this causes them to be inconsistent heights depending on the content.
I'm displaying three per well, so how would I get all three divs heights to be uniform, depending on the tallest one?
Here's the html:
<div class="well tickets" ng-repeat="tickets in chunkedTickets">
<div class="col-sm-4 task clearfix" ng-repeat="ticket in tickets">`
<form name="editForm" class="editForm">
<h4 ng-show="!ticket.edit">{{ticket.name}}</h4>
<h4 ng-show="ticket.edit">Ticket Name:</h4>
<!-- more stuff -->
</div>
</div>
chunkedTickets is the array of data chunked into a nested array of threes.
And here is the CSS applying to the well and the 'task' divs:
.tickets {
overflow: auto;
}
.task {
word-wrap: break-word;
background-color: #fbfbfb;
border-radius: 4px;
border: solid 1px #aaaaaa;
border-left: -5px;
border-right: -5px;
};
The well and clearfix classes are bootstrap of course. I've tried flexboxes, tried setting a height to 90%, tried everything. I've always been very bad at this, and can't find any help on search since questions are relating to bootstrap's .row class and I need to specifically use .well. I would greatly appreciate some help.
Screenshot of the app now: http://i.imgur.com/70F34tM.png
I'm usually using this solution:
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
It's pretty robust, just add classes for the row and desired columns (I usually use row-md-height and col-md-height, for smartphones it's usually not needed.
I'm using Bootstrap 3 to design a website, and I would like to ask how could I apply a custom class to an existing col-md-12 for example, so I won't use ids (#cusom-name) ?
should I write my css like
.col-md-12 test {
background: blue;
padding-left: 10px;
}
and my html like:
<div class="col-md-12 test">div content</div>
or should I just stick to something like using a standard col-md-12 and inside it use my custom class with a new div? like
<div class="col-md-12">
<div class="test">
test content
</div>
</div>
I hope it's clear enough... thanks!
In your HTML, load your custom stylesheet file AFTER you load the Bootstrap 3 stylesheet file. Don't ever edit Bootstrap's files, as updating will become difficult.
Then, in your stylesheet just define the class as normal, on its own.
.blue-bg {
background: blue;
padding-left: 10px;
}
Then, as you already have in your HTML, us it like this;
<div class="col-md-12 blue-bg">
div content
</div>
What this will do is apply all the styles from both .col-md-12 (defined by Bootstrap) and .blue-bg (defined by you).
The reason we load your stylesheet last, is for conflicts. If both you and Bootstrap are defining a property. For example, Bootstrap sets the background to red, and then you set it to Blue. Whatever the last stylesheet says, will be obeyed.
In this way, you can define yet another class;
.red-bg {
background: red;
padding-left: 10px;
}
Then use them both as often as you like, however you want. Consider this.
<div class="row">
<div class="col-md-6 blue-bg">
Div with a blue background.
</div>
<div class="col-md-3 red-bg">
Div with a red background.
</div>
<div class="col-md-3 blue-bg">
Another div with a blue background.
</div>
</div>
Just write it like this in your own CSS:
.test {
background: blue;
padding-left: 10px;
}
And like this in the html:
<div class="col-md-12 test">
<p>test content</p>
</div>
Don't change bootstraps css because then it will be harder to update it later on, insteed work with a css you create which overwrites bootstraps rules.
It really depends on what you are styling really. As well as your code style. You could add another modify class to the .col-md-12 class, or nest another class inside that container. There isn't an always or never answer for modifiers. And by modifiers, I mean overrides on BS3's default/core classes.
Also, in your example code, you forgot the period before test. It should be like this if you're going to nest that class inside:
.col-md-12 .text {}
Because .col-md-12 is a grid component, I think it makes sense to nest a div.test inside that component to not muddy up the context of what that element does, or how it behaves. An example that could have unwanted effects would be if you added padding to all .col-md-12 in your app, instead of the one off use of padding. To add the padding in this case, you could nest .test inside of .col-md-12, and add padding to .test (instead of the grid element). In my opinion, you'd have a nice separation of code and it's use. Also, you might be able to use that newly created .test class in other places of your app.
There are a lot of ways to organize your CSS, and keep elements together based on purpose. If you're interested in some reading, you might check out this resource: http://smacss.com/ (among others).
In CSS, you can have properties that will be set for both classes only, but there shouldn't be a space between the class names, as you have. It should be:
.col-md-12.test {
background: lightblue;
padding-left: 10px;
}
you don't need to add additional div, u can have
<div class="col-md-12 test">div content</div>
and define new as well as u can also override bootstrap css for col-md-12 but if u apply directly on it , it will applicable to everwhere where u have used this bootstrap class. so its better to add your custom css on .test e.g
.test {
width: 80%;
padding: 2%;
}
and if your custom css is not overriding bootstraps css u can use !important e.g.
.test {
width: 80% !important;
padding: 2% !important;
}
Defining a rule with the !important 'attribute' discards the normal concerns as regards the 'later' rule overriding the 'earlier' ones.