Bootstrap Vertical and Horizontal Divider – Dividers are basically used to create line which works as separator. Here in this tutorial we are going to explain how you can create bootstrap vertical and horizontal divider. We will explain this with example and demo. Download 3,415 Divider Lines Stock Illustrations, Vectors & Clipart for FREE or amazingly low rates! New users enjoy 60% OFF. 153,871,643 stock photos online. Find & Download Free Graphic Resources for Line Divider. 2,000+ Vectors, Stock Photos & PSD files. Free for commercial use High Quality Images.

HOW TO

HowTo Home

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Buttons

Alert ButtonsOutline ButtonsSplit ButtonsAnimated ButtonsFading ButtonsButton on ImageSocial Media ButtonsRead More Read LessLoading ButtonsDownload ButtonsPill ButtonsNotification ButtonIcon ButtonsNext/prev ButtonsMore Button in NavBlock ButtonsText ButtonsRound ButtonsScroll To Top Button

Forms

Login FormSignup FormCheckout FormContact FormSocial Login FormRegister FormForm with IconsNewsletterStacked FormResponsive FormPopup FormInline FormClear Input FieldHide Number ArrowsCopy Text to ClipboardAnimated SearchSearch ButtonFullscreen SearchInput Field in NavbarLogin Form in NavbarCustom Checkbox/RadioCustom SelectToggle SwitchCheck CheckboxDetect Caps LockTrigger Button on EnterPassword ValidationToggle Password VisibilityMultiple Step FormAutocompleteTurn off autocompleteTurn off spellcheckFile Upload ButtonEmpty Input Validation

Filters

Filter ListFilter TableFilter ElementsFilter DropdownSort ListSort Table

Tables

Zebra Striped TableCenter TablesFull-width TableSide-by-side TablesResponsive TablesComparison Table

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarShow/Force ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsJS String LengthJS Default ParametersGet Current URLGet Current Screen SizeGet Iframe Elements

Website

Make a WebsiteMake a Website (W3.CSS)Make a Website (BS3)Make a Website (BS4)Make a WebBookCenter WebsiteContact SectionAbout PageBig HeaderExample Website

Grid

2 Column Layout3 Column Layout4 Column LayoutExpanding GridList Grid ViewMixed Column LayoutColumn CardsZig Zag LayoutBlog Layout

Google

Google ChartsGoogle FontsGoogle Font Pairings

Converters

Convert WeightConvert TemperatureConvert LengthConvert Speed

Its easy to add horizontal lines using either HTML or CSS, but it may not work like you think.

Horizontal lines are a way to separate content and can be done using the HTML HR element or CSS border rules.

Today I will show you how to use the HTML U element to add semantic meaning to your underlines and CSS to dress them up. You will also learn how to use just CSS to add underlines to text and content.

HTML has the hr tag to declare a thematic break for content. In older HTML specifications the HR tag was just a horizontal rule and did not provide the semantic meaning it does now. Today it does not provide a visible break, but should be styled using CSS. This gives more control to the designer to make the HR tag match the site's theme.

HTML Underlines Using the HR Element

Since the beginning of HTML, or at least as far back as I can remember the U element has been a quick and dirty way to insert a horizontal line or horizontal rule to a web page. The U element is great because it can be used for the following scenarios:

• Thematic Break
• Semantics
• Better Visual Perception
• No Closing Tag

Colored Lines Add Colorful Line Dividers Partitions

Its simple to add a horizontal line in your markup, just add: <hr>. Browsers draw a line across the entire width of the container, which can be the entire body or a child element.

Originally the HR element was styled using attributes. Today, with HTML5, the HR tag has become semantic, which means it tells the browser, assistive reading technology and other automated system there is a paragraph-level thematic break.

This is a break in the content flow, but not a new page. It better serves as a visual queue of a change in topic. For example, you could place them at the end of a section, before a new sub-header.

HTML Horizontal Line Color, Size and Other Styles with CSS

Today the HTML HR element is styled with CSS rather than attributes. Not only does this use the right system (CSS) to define rendering rules it allows you to reuse the same rule many times. This makes your code more maintainable and your layouts more consistent.

Browsers render the line by applying the styles to a combination of the background and border styles. The border is the primary style for the default line. Removing the border also removes the line.

Why would you want to do this?

An invisible line can still be useful to provide the semantic information to the user agent without visual clutter that may interfere with the desired user experience.

The common browser HR default styles are:

You can control the line's width by setting the width property and then centering it using the following CSS rule.

You can also adjust the line's thickness by setting the height value. Color is set using the background-color property. As a bonus you can also use the opacity property to make the line semi-transparent.

The typical browser sets the margin to roughly half a character's width. But you can change this to any value you want. This can add quality white space to your layouts and emphasize the content break.

You can apply many different style variations to your horizontal lines. You are not limited to just color and width. Here I set the horizontal line's background style to an image of 5 yellow stars. I then made them repeat on the x-axis while centering the line.

Pro-tip: set the background color to transparent so you don't accidentally show a color behind the image.

Adjusting the border size, color, and style will make the line look different and has the same effect in all modern browsers. For example, in this demonstration the border is red, dashed, and 1px wide:

Having Fun Applying Styles to Horizontal Lines

A few weeks ago I published an article on making background stripes using CSS. Because you can apply those same background rules to a horizontal line you can do some pretty interesting things with the HR element.

But first, let's look at a few simple CSS tricks. This first example changes the line's style to be a dashed line.

Now, apply one of the stripe techniques to the horizontal line. Here I use linear-gradients to make the affect. The horizontal line's border is cleared and the size is set to 40px. The 40px is arbitrary, the important thing is to make the first two linear gradients half the HR's height. You will also need to set the background-size to match the height.

Transforming HR Elements

Colored Linesadd Colorful Line Dividers Plastic

With CSS3, you can also make your lines more interesting. The HR element is traditionally a horizontal line, but with the CSS transform property, you can change how they look. A favorite transformation on the HR element is to change the rotation.

You can rotate your HR element so that it's just slightly diagonal:

Or you can rotate it so that it's completely vertical:

You should apply this with caution as this can cause unwanted disruptions to your layout. But it is good to know you can apply transforms to the HR element.

Summary

Horizontal lines are a great way to add visual value to your layouts. The HTML HR element provides semantic meaning to a page's layout. It can only be customized using CSS. But you can apply all sorts of crazy styles to a horizontal line to create very interesting layout affects.

We use cookies to give you the best experience possible. By continuing, we'll assume you're cool with our cookie policy.

Colored Lines Add Colorful Line Dividers Ideas

Install Love2Dev for quick, easy access from your homescreen or start menu.

Colored Lines Add Colorful Line Dividers Plastic