Hello friends I have a problem with bootstrap and the <p> tag. When I add some big text in the <p> tag, it doesn't adjust to the 6 column that I define, it stays continuous to the right of the page taking up all space.
How could I make the text within the <p> tag always take the first 6 colums?
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class='container'>
<div class='row'>
<div class='col-sm-6'>
<h2 class='text'>text</h2>
<hr>
<h4 class='text-warning'>Title</h4>
<p>text content</p>
</div>
Just add this as a custom style and it'll wrap at your defined column size.
p{
word-wrap: break-word;
}
Check it out here.
First of all make sure you close all your <div> tags.
And then make sure you are displaying the device you need. The class col-sm-6 is for tabelt view. If you want 6 columns on every device add these classes aswell: col-lg-6 col-md-6 col-xs-6.
Due to the fact that bootstrap is mobile-first it would be enough to add only the rule col-xs-6, so it will have 6 columns on every device.
To learn more about the grid and the breakpoints visit:
Bootstrap CSS and scroll to Grid options
Related
I have a heading tag with a secondary subtitle like this:
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Is there a way to apply the Bootstrap grid system with column spacings for these inline elements, so that for small screens, the subtitle is on a different line?
I could only think to split the h1 into two columns and apply column classes to control the layout:
<div class="row">
<div class="col-xs-12 col-md-4 col-lg-4">
<h1>Fancy display heading</h1>
</div>
<div class="col-xs-12 col-md-8 col-lg-8">
<h1><small class="text-muted">With faded secondary text</small></h1>
</div>
</div>
But there are now two heading tags and too much negative space between them.
The easiest Bootstrap solution is to forget even using columns for this. Using Bootstrap 4's display utilities set the small element to display block by default, and for larger than small screens display inline like:
<h3>
Fancy display heading
<small class="d-block d-md-inline text-muted">With faded secondary text</small>
</h3>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<h3>
Fancy display heading
<small class="d-block d-md-inline text-muted">With faded secondary text</small>
</h3>
You can specify this using Bootstrap's CSS utilities with breakpoints. Let's say you want different behavior on medium screen sizes and up. To clarify, you want the following behavior:
Medium and up:
The two headings should display inline with each other
Smaller than medium:
The two headings should be one on top of the other
This is what the code would look like:
<h1 class="d-md-inline-block">Fancy display heading</h1>
<h2 class="d-md-inline-block text-muted">With faded secondary text</h2>
The utility class here means that the elements will be displayed inline-block for medium screen sizes and up.
You can remove h1 and add necessary css rules, because the browser makes margin for h1 by default
HTML:
<div class="row">
<div class="col-xs-12 col-md-4 col-lg-4 headingTest">
Fancy display heading
</div>
<div class="col-xs-12 col-md-8 col-lg-8 headingTest">
<small class="text-muted">With faded secondary text</small>
</div>
</div>
CSS:
.headingTest {
font-size: 32px;
}
What is the best way to keep page content centered without appearing too thin when viewed on mobile? This is using a centered single column layout.
When I view the following on a desktop, it achieves the desired look and spacing, but on mobile the content is constrained to too small an area and appears far too narrow.
<section id="copybox" class="pl-sm-1 pl-md-5 pr-sm-1 pr-md-5">
<div class="row justify-content-center">
<div class="col-7">
(Area consisting of multiple div's, paragraphs etc)
</div>
</div>
</section>
What can be done to resolve this?
You're using col-7 which is always going to take up 58.333% of the width of it's parent. Use a wider column (ie: col-10, col-11, col-12, etc...) on mobile.
<section id="copybox" class="pl-sm-1 pl-md-5 pr-sm-1 pr-md-5">
<div class="row justify-content-center">
<div class="col-sm-7 col-10 border">
(Area consisting of multiple div's, paragraphs etc)
</div>
</div>
</section>
Demo: https://www.codeply.com/go/ueIUlH19DB
Try to use wider columns as Zim suggested.
Also, make sure to have a viewport meta tag in html page
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
If my page uses the Bootstrap class row, col-md-x and such to arrange the content, what would be the proper way to create a distance between each div containing a whole element semantically speaking?
I am adding a div with a padding between the divs to simulate the gap, is this a good tactic or is there a better one?
Starting from Bootstrap v4 you can simply add the following to your div class attribute: mt-2 (margin top 2)
<div class="mt-2 col-md-12">
This will have a two-point top margin!
</div>
More examples are given in the docs: Bootstrap v4 docs
Adding a padding between the divs to simulate a gap might be a hack, but why not use something Bootstrap provides. It's called offsets. But again, you can define a class in your custom.css (you shouldn't edit the core stylesheet anyway) file and add something like .gap. However, .col-md-offset-* does the job most of the times for me, allowing me to precisely leave a gap between the divs.
As for vertical spacing, unfortunately, there isn't anything set built-in like that in Bootstrap 3, so you will have to invent your own custom class to do that. I'd usually do something like .top-buffer { margin-top:20px; }. This does the trick, and obviously, it doesn't have to be 20px, it can be anything you like.
I required only one instance of the vertical padding, so I inserted this line in the appropriate place to avoid adding more to the css. <div style="margin-top:5px"></div>
The easiest way to do it is to add mb-5 to your classes. That is <div class='row mb-5'>.
NOTE:
mb varies betweeen 1 to 5
The Div MUST have the row class
An alternative way to accomplish what you are asking, without having problems on the mobile version of your website, (Remember that the margin attribute will brake your responsive layout on mobile version thus you have to add on your element a supplementary attribute like #media (min-width:768px){ 'your-class'{margin:0}} to override the previous margin)
is to nest your class in your preferred div and then add on your class
the margin option you want
like the following example:
HTML
<div class="container">
<div class="col-md-3 col-xs-12">
<div class="events">
<img src="..." class="img-responsive" alt="...."/>
<div class="figcaption">
<h2>Event Title</h2>
<p>Event Description.</p>
</div>
</div>
</div>
<div class="col-md-3 col-xs-12">
<div class="events">
<img src="..." class="img-responsive" alt="...."/>
<div class="figcaption">
<h2>Event Title</h2>
<p>Event Description. </p>
</div>
</div>
</div>
<div class="col-md-3 col-xs-12">
<div class="events">
<img src="..." class="img-responsive" alt="...."/>
<div class="figcaption">
<h2>Event Title</h2>
<p>Event Description. </p>
</div>
</div>
</div>
</div>
And on your CSS you just add the margin option on your class which in this example is "events" like:
.events{
margin: 20px 10px;
}
By this method you will have all the wanted space between your divs making sure you do not brake anything on your website's mobile and tablet versions.
I am designing a website using the responsive Bootstrap framework.
I have 3 content areas next each other (horizontally). If I have a small display, these 2 contents are under each other (typical responsive design).
Now I want to add a <hr/> after each content block that is under each other.
<div class="row-fluid content">
<div class="span4">test1</div>
<div class="span4">test2</div>
<div class="span4">test3</div>
</div>
This is the whole code for a big display.
On some displays there are 2 blocks horizontal and 1 block under the 2 blocks.
Then I want to insert a <hr/> between the 2 lines.
Bootstrap provides classes to manage the visibility of any element by device, based on media queries. You have to place <hr/> elements wich are only visible in specific viewports:
<div class="row-fluid content">
<div class="span4">test1</div>
<hr class="visible-phone"/>
<div class="span4">test2</div>
<hr class="visible-phone"/>
<div class="span4">test3</div>
</div>
Check the documentation for more Responsive utility classes.
I have a problem with the Grid System of Bootstrap 2.
I want to make a header with some text, and an image on the right of it.
Therefore I made a row, and put a span8 and a span4 inside of it.
However, when the window gets too small for the content to be displayed side by side, I want the span4 div to come before the span8 div.
<div class="hero-unit">
<div class="container">
<div class="row">
<div class="span8">
This is some text
</div>
<div class="span4">
<img src="image.png" alt="" />
</div>
</div>
</div>
</div>
How can I do this?
So in other words, how can I change the order of the divs.
If I'm not completely mistaking, there is no such thing described in the documentation.
You can do it with media queries and floats.
Should look somewhat like this:
<div class="span4 pull-right"><!-- Image here --></div>
<div class="span8"><!-- Text here --></div>
Now you should use a media query (as seen in the responsive.less file) to switch when the screen size jumps below a specific mark. Then you make sure that the span4's float is removed. You might need to use .row-fluid instead of the usual .row and use your own padding to make it look great.